ebata

芝村裕吏さんの「マージナル・オペレーション(改)」を、本日、全部読み終えてしまいました。

I finished reading all of "Marginal Operation (Revision)" by Yuri Shibamura today.

私は、夜中に、ヘッドライトを付けて読書しながらのウォーキングをしているのですが、『あ、もう家についたか』と思えるほど集中できる本は、やっぱり良いと思います。

I've been walking with my headlights on while reading at night, and I think it's good to have a book that makes me concentrate so much, with saying "Oh, I'm home already".

この本の舞台は、中国、ミャンマー、ラオス、タイです。

The book is set in China, Myanmar, Laos, and Thailand.

この付近の地政学の勉強をさせて貰っています。

I've been studying the geopolitics of this area.

挿絵(イラスト)もいいけど、地図を付けてくれると嬉しい。

Illustrations (pictures) are nice, but it would be nice if they could add a map.

戦場の配置図があれば、さらに嬉しい ――

A schematic of the battlefield would be even better.

と、図面至上主義の特許明細書量産機の研究員(私)は思っています。

The researcher (me) of a patent specification mass production machine with drawing supremacy thinks so.

-----

この本を読んで、つくづく思ったことは、中国という国の「気の毒さ」です。

After reading the books, I really felt sorry for the country of China.

今、GoogleMAPを開きながら、眺めているのですが、中国の広大さに、今さらながら驚いています。

I'm looking at Google MAP right now, and I'm still amazed at the vastness of China.

地続きの延々と続く国境線の、かなりの部分が紛争地帯です ―― その国境線の長さに眩暈(めまい)がしそうになりました。

I was almost dizzy from the length of the border line, which is a long stretch of land, much of which is disputed territory.

基本的に、『隣接する隣国とは敵対関係』を原則とする地政学的見地から見ると、こんな広大な領土を統治するのは、さぞ大変だろうと思います。

From a geopolitical point of view, which is basically based on the principle of "hostile relations with neighboring countries," I think it must be very difficult to govern such a vast territory.

いわゆる欧米型の民主主義(人権主義)の価値観をそのまま取り入れたら、国として成り立たないだろうなぁ、と実感できます。

If they were to adopt the so-called Western values of democracy (human rights), they would not be able to survive as a country, I think.

-----

我が国も80年ほど前に、同じようなことを「海洋と大陸」でやろうとして、ものの見事に転けました。

About 80 years ago, our country tried to do the same thing with oceans and continents, and failed spectacularly.

(「大東亜共栄圏」とか「絶対国防圏」でググってみて下さい)

(Google "Greater East Asia Co-Prosperity Sphere" or "Absolute National Defense Sphere.")

そういえば、ドイツも同じころに、ヨーロッパ(こちらは「大陸」)で展開して、やっぱり転けました。

By the way, Germany also expanded in Europe (this is a "continent") around the same time, and also failed.

「大きいこと/広いこと」は、基本的に「面倒なこと」だと思います。

"I think that "big/expansive" is basically "troublesome".

そういえば、以前後輩に教えて貰たのですが『兵站に必要な距離の合計ある値を越えると、戦争に負ける』のだそうです。

By the way, one of my juniors once told me that if the total distance required for logistics exceeds a certain value, the country comes to lose the war.

広くて長い戦線を維持するのって、膨大なコストが必要になると思います。

Maintaining wide and long fronts and borders is a huge cost.

-----

比して、江端家は、監視カメラ2台とセンサとラズパイで、領土を維持しています。

In comparison, the Ebata family maintains their territory with two surveillance cameras, sensors, and a Raspberry Pi.

しかも全部自前で、運用者は一人です。

And it's all self-supporting, with only one operator.

「小さいこと」は、基本的に「安くてラク」です。

Being small is basically being cheap and easy.

『小市民バンザイ』

"Hooray for petit bourgeois"

この週末は、資料の構成を考える予定だったのですが、気がついたら、dockerと格闘しているハメになりました。

This weekend I was supposed to be working on the structure of my new book, but I found myself struggling with docker.

3年前に動いた環境で再現を試みたのですが「動かない」。

I tried to reproduce it in an environment that worked three years ago, but it "didn't work".

で、動かない原因を探ってみると、世界で2人くらいしか同じトラブルに遭遇していない。

So I tried to find out why it didn't work, and found that only about two people in the world had encountered the same problem.

(正確には、「そのトラブルをネットにアップしている人数が2人」ですが)。

(To be precise, "the number of people posting that trouble on the Internet is two.)

こういう問題に遭遇した場合の最善手は『諦める』です。

The best thing to do when encountering such a problem is to "give up".

膨大な時間が消費された上に、高い確率で解決しないからです。

This is because it consumes an enormous amount of time and has a high probability of not being resolved.

それでも、それが「仕事」である場合には逃げられない場合もあるのですが、「娯楽」や「趣味」の範疇であれば、とっとと「逃亡」することが肝要です。

If it is your "job," you may not be able to escape. However, if it is a "pastime" or a "hobby," it is essential to "escape" as soon as possible.

-----

ところが、この合理的な行動を妨害する心理的な作用があります ―― 「サンクコスト」といいます、

However, there is a psychological effect that interferes with this rational behavior -- it's called "sunk cost".

サンクコストとは、投資を回収できないコストのことです。

Sunk cost is the cost of not being able to recover an investment.

費やした労力やお金、時間などが、今後の意思決定に影響を与えること ―― 赤字を垂れ流し続けながらも、撤収できないこと ―― を、サンクコスト効果といいます。

The sunk cost effect refers to the fact that the effort, money, time, etc. spent will affect future decision making -- the inability to exit while continuing to incur a deficit.

-----

もっとも日常的に現われるサンクコストは、「受験浪人」「資格試験」です。

The most common sunk costs are "exam wasters" and "qualification wasters".

「売れない芸人、アイドル」くらいなら個人の責任と言えますが、「高速増殖炉」ともなると、1日あたりの維持費が5500万円、廃炉に費用が1500億円と言われています。

"If you're an unsuccessful comedian, it's your own fault. However, "The cost of maintaining a fast breeder reactor is said to be 55 million yen per day, and the cost of decommissioning it is 150 billion yen.

当然、それらは、私たちの血税から捻出されたものです。

Of course, they have been funded by our blood tax.

今日、私は、これらの是非については語りません。

Today, I will not talk about the pros and cons of these.

しかし、私たちが為政者であったとしたら、これだけのコストをかけたものを「捨てる」という判断が、どれほど怖いことあるかは、想像できるかと思います。

However, if we were politicians, we can imagine how scary it would be to make the decision to "throw away" something that has cost us so much.

それに、まあ、ぶっちゃけ、研究員なんぞ、「サンクコストの製造装置」といっても、いいくらいです。

And, well, frankly speaking, researchers can be called a "sunk cost machine".

-----

という訳で、「娯楽」や「趣味」の範疇であっても、週末を使い果たしてしまう私は、存在自体が「サンクコスト」と言えそうです。

So, even if it is in the category of "entertainment" or "hobby", my existence itself is a "sunk cost" as I lose time on weekends.

新しいデバイス(スマホ、PC)を使う時に、ワクワクしていたのはいつごろまでだったかな、と思いながら、社用スマホの交換作業を行っていました。

I was replacing a company phone, wondering how long it had been since I was excited to use a new device (smartphone or PC).

充電を2時間経過すると、使いものにならなくなったので、会社に『バッテリー交換』を依頼していました。

After two hours of charging, it became useless, so I had to ask the company to 'replace the battery'.

しかし、『使用期間を越えているので、機器交換にしてくれると、こっちも面倒がなくて助かる』というニュアンスの回答がきましたので、それに応じました。

However, I received a nuanced response that said, "Since it is beyond the period of use, it would be helpful if you could replace the equipment so that we don't have to deal with it," so I agreed.

バッテリー交換をする、ということは、『社用スマホ』という超ド級の秘密情報を含むデバイスを第三者に預ける、ということになります。

When I replace the battery, I am entrusting my "company phone," a device that contains highly confidential information, to a third party.

当然、その守秘義務に関する契約が、想像を絶するほど面倒なものになる ―― ということは、想像に難くありません。

Of course, it is not hard to imagine that the confidentiality agreement would be unimaginably cumbersome.

これって、SDGs的にどうなの？ とは思わなくはありませんが ――

From the SDGs viewpoint , what does this means ? I thought, however,

まあ、私の古いスマホは、完全初期化された後、バッテリー交換されて、タリバンが支配する地域などで、有効活用されるのだろう、と思っています ―― 廃車後の日本車と同様に。

Well, I'm sure my old phone will be fully initialized and the battery will be replaced and put to good use in areas controlled by the Taliban -- just like Japanese cars after they are scrapped.

-----

なにしろ、社用スマホは、会社のシステムと連携するデバイスですから、複雑なセキュリティ用ソフトをインストールしなければならず、3種類のパスワードを合計30回くらいは入力する必要がありました。

At any rate, since the company phone is a device that is linked to the company system, I had to install complicated security software and had to enter three different passwords a total of about 30 times.

正直、かったるかった、です。

To be honest, it was a bit of a chore.

加えて、私、スマホにトコトン興味がないので、基本的に前と同じ機種を選んで、以前のスマホのレプリカを作成していただけでした。

In addition to that, I, I, I'm not really interested in smartphones, so I basically just chose the same model as before and made a replica of my previous phone.

-----

本当にしつこいのですが、本気で『ガラケー復活しないかなぁ』と思っています。

I know I'm being really persistent, but I'm seriously wondering if flip phones will ever come back.

小さいし、耐用年数長いし、操作が単純だし、充電時間が短い。

It is small, has a long service life, is simple to operate, and takes a short time to charge.

動画や音楽、リモート会議は、PCかタブレットで十分です。

For video, music, and remote meetings, a PC or tablet will suffice.

LINEは、テキストが表示されれば十分ですし、スタンプなんぞいらん。

For LINE, it's enough to display text, and I don't need stamps.

ただ、『スマホの使用を前提とするサービスの研究開発をしている研究員』としては、『かなり矛盾していることを言っている』という自覚はあります。

However, as a "researcher working on the research and development of services based on the use of smartphones," I am aware that I am saying things that are quite contradictory.

-----

今回の交換の際、うっかりとして、電話帳の移行をすっかり忘れてしまいました。

During this replacement, I inadvertently forgot to migrate the phonebook.

いえ、今回は故意ではなく、私の過失です。

No, this time it was not intentional, it was just my fault.

そんでもって、現在、通話履歴だけで対応していますが ―― 困ったことに、『全然困っていない』です。

So, I'm currently using only the call history -- and the trouble is, I'm not having any trouble at all.

メールとLINEだけで、十分、生活できています。

Email and LINE are enough for my life.

今、スキマ時間(10分単位)を見つけて、2冊目の本をダラダラと書いています。

I'm currently finding time in the gaps (10-minute unit) to lazily write my second book.

その中で、Dockerの解説文を書いているのですが、なかなか良い内容と自負しておりますので、ご紹介致します。

In the article, I wrote an explanation of Docker. I am proud to say that the content is quite good, so I would like to introduce it here.

===== ここから =====

===== from here =====

ちなみに、Dockerのコンテナに関する私のイメージは

By the way, my image of Docker containers is

■『姉妹または兄弟の複数の愛人(バージョンの違うアプリケーション)に、気が向いた時だけに尋ねることができるマンション(妾宅)の一戸』です。

- A unit of apartment (concubine's house) where you can ask multiple mistresses (different versions of applications) of your sisters or brothers only when you feel like it.

■『マンションの戸の内側とのコミュニケーションは、インターホン(ポート番号)のみで行うという徹底ぶり』ですので、ホストOS(Windows10)への、環境変数(PATHやLIB)などの設定は不要です。

- Communication with the inside of the apartment building is thorough, using only the intercom (port number), so there is no need to set environment variables (PATH or LIB) for the host OS (Windows 10).

■(私たちエンジニアは、このことを「本宅(ホストOS)の環境を汚さずに済む」という言い方をします。)

- (We engineers refer to this as "not having to pollute the home (host OS) environment").

■同じOS(例えばWindows10)に2つ以上の異なるバージョンの同じアプリをインストールしたら、アプリを正確に立ち上げることもできないし、仮にできたとしても、設定環境がグッチャグチャで、多分、まともに動かすことはできません。

- If you install two or more different versions of the same app on the same OS (e.g. Windows 10), you won't be able to launch the app correctly, and even if you could, you probably wouldn't be able to run it properly because of the messed up configuration environment.

■また不要になったら、『愛人も含めてマンションの戸単位で消滅させることができるという、後腐れのなさ』も、良いです。

- When you don't come to need the app, you can 'make the whole apartment disappear, including your mistress,' so there's no aftermath.

===== ここまで =====

===== to here =====

Dockerコンテナの説明は、これで正しいと思いますが ――

I think this is the correct way to describe Docker containers -- however,

なんだか、「私の人格に問題がある」ような内容にも読めます。

Someone might think that "there's something wrong with Ebata's personality".

「やはり俺の青春ラブコメはまちがっている」は素晴しい作品です。

The books "My youth romantic comedy is wrong, as I expected" would be a masterpiece.

ただ、間違って頂きたくないのですが、私は、あのような主人公に「憧れている」のではありません。

I don't "admire" that main character. Please don't misunderstand me.

あのような作品を、「私が書きたかった」のです。

I wanted to write that kind of work.

まあ、「ラブコメ」というのは分からないし、上手く書けないし、正直書きたくないですが、あの主人公のマインド、価値観、世界観は、私が書きたかった、と思う。

Well, I don't know what a "romantic comedy" is, I can't write it well, and honestly I don't want to, however that main character's mindset, values, and worldview is what I wanted to write about

ただ、私が書くと、ベースは「ラブコメ」ではなくて、多分「東南アジア 一人旅」になると思うけど ―― うむ、読む人いるかな？

However, if I were to write it, it wouldn't be based on a "romantic comedy" but probably on a "solo trip to Southeast Asia" -- hmm, I wonder if anyone would read it?

-----

で、まあ、そこまで詳細に説明した上でならいいですが、

And, well, I hope you've explained it in such detail.

―― うちの父親が、「やはり俺の青春ラブコメはまちがっている」が凄い、って言っていた

"My father said that "My youth romantic comedy is wrong, as I expected" was great."

と、軽いノリで友人に語るのは、ちょっと躊躇して貰えないだろうか、長女。

I hope you will hesitate a little to tell your friends in a light-hearted way, my daughter?

お父さん、少し、恥しいんだが。

I'm a little embarrassed.

With hearing the following,

ネットワークスペシャリストだの、

Network specialist.

データベーススペシャリストだの、

Database specialists.

組み込み系エンジニアだの、

Embedded systems engineer.

クラウドエンジニアだの、

Cloud engineer.

AIエンジニアだの、

AI engineer.

IoTエンジニアだの、

IoT engineer.

AWSエンジニアだの、

AWS engineer.

仮想化エンジニアだの、

Virtualization engineers.

―― うるせい！

"Shut up!"

と思っています。

I think.

「やらなければならない」ことなら、「やらなければならない」のが、エンジニアです。

"If it has to be done, it has to be done". It is an engineer.

どんな技術だって、どこからでも、膨大な資料を(自費で)購入して、Webを読み倒して、誰にでも(嫌なヤツにでも)頭を下げて、そんでもって、何度だってゼロから始める ―― それがエンジニアという職業です。

No matter what the technology, start from anywhere, buy tons of materials (at my own expense), read the Web, bow down to everyone (even the jerks), and then start from scratch again and again -- that's what being an engineer is all about.

それは、時代と社会と技術とからなる多次元の空間の中を、可能な限りつき進み続け、『ここが終わり』というものが『ない』世界です。

It is a world in which there is no 'end', in which I keep moving forward as far as possible in a multi-dimensional space consisting of time, society, and technology.

今まで、そうしてきましたし、これからも、そうしていくのだろうと思っています。

I have done so until now, and I believe I will continue to do so in the future.

-----

ちなみに、今、私の会社では、『デジタル人材認定制度』なる制度登録が始まっているようです。

Incidentally, my company is now starting the system called the "Digital Human Resources Certification System".

じっくり観察させて頂くつもりです。

I'm going to observe my co-workers carefully.

pandocを使ってMarkdownをepubにする方法と場所

の続きです。

ちなみに、pandocとは、こういうことができるツールです(興味のある人は、ググってインストールして下さい)。

PandocでMarkdownをHTML形式やらWord形式に変換する

それはさておき。

githubの最初のページに出てくるREADME.mdのフォーマットって、かっこいいですよね。

その上、Markdown言語で書くので、とっても簡単です。

今まで、Latexとか、htmlの記述で苦労してきたのがバカみたいです(まあ、技術系の記述だから、という理由もあると思いますが)

だから、このgithubのイメージをそのままにして、書籍化(epub形式)できないかな、と思っていたら、スタイルシートを変えるだけで行けました。

"github.css"で検索したら、色々出てくるようですが、私は以下のファイルを、"github.css"という名前で保存して使わせて貰いました。

body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }

ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

ul :last-child, ol :last-child {
  margin-bottom: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

因みに、元のmdファイルは、自分のgithubから持ってきた、このファイルを、"README_1.md"という名前で保存しました。

 

# PruneMobileとは

複数の人間や自動車等の移動体のリアルタイムの位置情報を、地図上に表示する、
PruneCluster https://github.com/SINTEF-9012/PruneCluster
のアプリケーションです。

PruneMobileに対して、任意のタイミングで位置情報(JSON形式)を送り込むだけで、地図上にマーカーが表示されます。

## 使用環境

- golang(Go言語)のインストールされていれば良いです。私(江端智一)の環境では以下のようになっています。
```
$ PruneMobile\server>go version
$ go version go1.14 windows/amd64
```

- 実際に動かせば、コンパイラから、あれこれ言われますので、それに対応して下さい。基本的には、
```
$ go get github.com/gorilla/websocket
```
は必要になると思います。

## サンプルプログラムの環境

- Webブラウザで表示される地図は、東京都江東区の豊洲駅を中心にして作ってあります。
  - PruneMobile\server\serverX.go (Xは数字) の中にある、
```
var map = L.map("map", {
   attributionControl: false,
   zoomControl: false
}).setView(new L.LatLng(35.654543, 139.795534), 18);
```
の"35.654543, 139.795534"の座標を変更すれば、地図の中心位置が変わります。

- クライアントプログラムでは、豊洲駅を中心にランダムウォークさせています
  - PruneMobile\server\clientX.go (Xは数字)を起動すると、10秒間程、マーカーが移動して、その後消滅します。

- クライアントプログラム(clientX.go)は複数同時に起動させることができます。

## 現時点で確認している問題点で、いずれ直すもの

- ~~マーカーの消滅のタイミングが、同時になってしまう~~

- ~~Webブラウザの表示が、最初の1つめしか、正常に動作しない~~

- ローカルのjs(javascript)のローディングに失敗した為、江端のプライベートサーバ(kobore.net)からローディングしている。PruneMobile\server\serverX.goの以下を参照
```
	<script src="http://kobore.net/PruneCluster.js"></script>
	<link rel="stylesheet" href="http://kobore.net/examples.css"/>
```

# サンプルプログラムの動作方法

## Step 1 サーバの起動

適当なシェルを立ち上げて
```
$ cd PruneMobile\server
$ go run serverX.go (Xは数字)
```
とすると、「Windowsセキュリティの重要な警告(windows10の場合)」が出てくるので、「アクセスを許可する」ボタンを押下して下さい。

## Step 2 地図画面(マーカ表示画面)の起動
Chromoブラウザ(他のブラウザのことは知らん)から、
```
http://localhost:8080/
```
と入力して下さい。豊洲地区の地図が表示されます。

## Step 3 移動オブジェクト(マーカの対象)の起動
適当なシェルを立ち上げて
```
$ cd PruneMobile\client
$ go run clientX.go (Xは数字)
```
とすると、マーカが0.5秒単位でランダムに動きます。

## 動作の様子
![](./PruneMobile_demo.png)





# クライアントプログラムで使うI/F(データ形式)

## 前提

- サーバとwebsocketのコネクションを確立して下さい。方法は問いません。golangでの記述方法はclient/clientX.goを参考にして下さい。

- データ形式はJSONを用います。golangでの記載サンプルは以下の通りです。

```

// GetLoc GetLoc
type GetLoc struct {
	ID  int     `json:"id"`
	Lat float64 `json:"lat"`
	Lng float64 `json:"lng"`
	//Address string  `json:"address"`
}
```

## Step.1 マーカーの登録

IDを"0"にして、最初のマーカーの座標を入力したJSONを、サーバに送付して下さい。golangでの送信方法はは以下の通りです。
```
	gl := GetLoc{
		ID:  0,
		Lat: 35.653976,
		Lng: 139.796821,
	}

	err = c.WriteJSON(gl)
	if err != nil {
		log.Println("write:", err)
	}
```

返り値に入ってきたIDが、これからそのマーカで使うID番号となります。golangでの受信方法はは以下の通りです。

```
	gl2 := new(GetLoc)
	err = c.ReadJSON(gl2)
	log.Printf("after ID:%d", gl2.ID)
	log.Printf("after Lat:%f", gl2.Lat)
	log.Printf("after Lng:%f", gl2.Lng)
```

以後、このID番号(整数)を使用して下さい。この番号と異なる番号を使用した場合、動作は保証されません。

## Step.2 マーカーの移動

指定されたIDを使って、移動後の座標を送付して下さい。
```
	gl := GetLoc{
		ID:  5,         // IDが"5"の場合
		Lat: 35.653923,
		Lng: 139.796852,
	}

	err = c.WriteJSON(gl)
	if err != nil {
		log.Println("write:", err)
	}
```
返り値は、入力と同じJSONが戻ってきますが、必ず受信して下さい。
```
	gl2 := new(GetLoc)
	err = c.ReadJSON(gl2)
	log.Printf("after ID:%d", gl2.ID)
	log.Printf("after Lat:%f", gl2.Lat)
	log.Printf("after Lng:%f", gl2.Lng)
```

## Step.3 マーカーの抹消

指定されたIDを使って、地球上の緯度経度の数値で現わせない座標を入力して下さい。具体的に、latに90.0より大きな値、またはlngに180より大きな値を入力することで、マーカが消去されます。
```
	gl := GetLoc{
		ID:  5,         // IDが"5"の場合
		Lat: 999.9,
		Lng: 999.9,
	}

	err = c.WriteJSON(gl)
	if err != nil {
		log.Println("write:", err)
	}
```
返り値は、入力と同じJSONが戻ってきますが、必ず受信して下さい。
```
	gl2 := new(GetLoc)
	err = c.ReadJSON(gl2)
	log.Printf("after ID:%d", gl2.ID)
	log.Printf("after Lat:%f", gl2.Lat)
	log.Printf("after Lng:%f", gl2.Lng)
```

# Amazon Lightsail を使った、スマホの現在位置の表示方法

PruneMobileは、シミュレータ等で計算した位置情報を、ブラウザで表示することを目的としたものですが、これを、現実のスマホの位置の検知にも使えるようにしました(要するに「ココセコム」としても使える、ということです)

これを実現する為には、インターネット上に(クラウド)サーバを置かなければなりません。AWSのVPS(仮想専用サーバー)が思いつきますが、AWSのEC2は6運用が面倒な上に使用料が高価です。そこで「月額 500 円で使えるAWSクラウドのVPS」を使う方法について記載しておきます。

- Amazon Lightsail の立ち上げ方法については、https://wp.kobore.net/江端さんの技術メモ/post-1513/ を参考にして下さい。

- ここでは、"sea-anemone.tech"という架空のドメインを例として使っていますが、外部(例えば「お名前.com」)でドメインを得た場合は、その名前に置き換えて読んで下さい。


- 公開鍵の取得方法については、https://wp.kobore.net/江端さんの技術メモ/post-1550/ を参考にして下さい(ここに記載されている、"go_template/server_test"は、"PruneMobile\vps_server"と読み換えて下さい)


## Step 1 サーバの起動

Amazon Lightsailのシェルから適当なシェルを立ち上げて
```
$ cd PruneMobile\vps_server
$ go run serverXX.go (Xは数字)
```

と起動して下さい。

## Step 2 地図画面(マーカ表示画面)の起動
Chromoブラウザ(他のブラウザのことは知らん)から、
```
https://sea-anemone:8080/
```
と入力して下さい。現在は、東京のある地域が表示されますが、serverXX.go の中に記載れている、位置情報、35.60000, 139.60000 を片っぱしから、任意の位置(自宅の位置等)に変更することで、自宅付近での実証実験ができます。
自宅の情報は、GoogleMAPから取得できます。

## Step 3 移動オブジェクト(マーカの対象)の起動
スマホのブラウザから、
```
https://sea-anemone:8080/smartphone
```
として、[open]ボタンを押して下さい。スマホで位置測位が開始されます(この際、位置情報を提供して良いか、と聞きあれることがありますので、"OK"として下さい)。
[close]ボタンを押下すると地図画面からマーカが消えます。

## 現時点で確認している問題点で、いずれ直すもの

- ローカルのjs(javascript)のローディングに失敗した為、江端のプライベートサーバ(kobore.net)からローディングしている。PruneMobile\vps_server\serverXX.goの以下を参照
```
	<script src="http://kobore.net/PruneCluster.js"></script>
	<link rel="stylesheet" href="http://kobore.net/examples.css"/>
```
- 動作中にwebsocketが切断してしまった時(スマホの閉じる、別のブラウザ画面を立ち上げた時)、オブジェクトが放置されて、システム全体が動かなくなる

PruneMobile_demo.png は、同じディレクトリに放り込んでおきました。

でもって、

ebata@DESKTOP-P6KREM0 MINGW64 ~/eBook_sample_with_markdown_and_pandoc
$ pandoc -f markdown -t epub3 README_1.md title.txt -o book.epub --css github.css --toc --toc-depth=2 --epub-cover-image=cover.jpg

を実行して、chromoの拡張機能としてアドインしておいた、epubリーダを使って"book.epub"を表示したら、

こんな感じで表示されるようになりました。

これで、一応「mdファイルを作成して、epubファイルにするまでの方法」を、(とりあえず)確立できました。

それと、 md(Markdown)ファイルを編集するなら、Visual Studio Codeが便利そうです。

編集とビューが連動しているので、いちいちビューアーで確認する必要がありません。

以上

 

PDFを黒塗りしてから、保存できるサイト(↓をクリック)

pandocを使ってMarkdown(README_1.md)をepub(book.epub)にする方法と場所

ebata@DESKTOP-P6KREM0 MINGW64 ~/eBook_sample_with_markdown_and_pandoc
$ pandoc -f markdown -t epub3 README_1.md title.txt -o book.epub --css styleshee
t.css --toc --toc-depth=2 --epub-cover-image=cover.jpg