ただいま作業中

2022/04/13

MySTの翻訳環境作り

• サイドメニューをプログラムで変換可能にすること
  • 作業の中心場所 – jupyter notebook : g:\jupyter\python
  • pythonをwebでも可能に – g:\webapp\Doc-tools
• MyST 翻訳ソース
  • F:\web\sphinx\MyST\MyST-doc

2022/04/14

アルコール摂取量の目安

一日当たりのアルコールの摂取量の目安は、次により計算する。

$$お酒の量(ml) \times \frac{アルコール度数}{100}\times0.8（アルコールの比重）\le20(g)$$

Mathjax を使用しているので Blogger では表示できるかな？

問題ないようだ！

ただいま作業中

MySTも翻訳環境/ソフトの作成

概要

MySTのHTMLマニュアルを翻訳するため、全ファイル共通のサイドメニューを一括変換するための作業を行っている。

処理方式としては、英日対訳表を作成し、それの基づき全HTMLを変換しようとするもの。

手順は次の通り。
（1）対訳表を作るために、1つの代表的なHTML（例：index.html）を選択して、単語を抽出する。
（2）手作業で英文を翻訳し、対訳表を完成させる。
（3）対訳表に基づき、全HTMLを変換、更新結果を上書き保存する。

プログラムとしては、次の2本を作成する。

（1）対訳表作成
（2）HTML更新

進捗

pythonによる方式は完了 -- 成果物の場所：g:/jupyter/python
インタラクティブな処理にするため、処理をweb方式に変換したいので、

* HTML, JavaScript
* PHP

に処理を置き換えたいので、現在作業中。
今日現在、「対訳表作成」に取り組んでいるが、単語を抽出するところまでは出来ている状況。
作業フォルダ: g:\webapp\Doc-tools\MyST

PlotlyをWeb Makerで使う

Plotlyの様々な事例を簡単に試すため、Web Maker から動かしてみる。

1. plotly.js のダウンロード
   Web Maker でライブラリをインクルードする場合、CDN に制限があるためplotly.jsをダウンロードする。
2. Web Maker でのライブラリ指定
   Web Maker 右上の Add Library を押下し、JS にローカルアドレスを入力する。例えば、plotly.js を xampp/htdocs/lib に配置した場合は以下の通り指定する。

   http://localhost/lib/plotly-latest.min.js
   

【使用例】

• HTML

<h1>Plotly Test</h3>
<div id="myDiv"></div>

• JavaScript

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

• 表示例
  plotly img

Written with StackEdit.

Choroplethとデータ

都道府県境界データ

コロプレスといういと、毎回このデータを探し回っては大騒ぎするのが常である。もうここで、はっきりさせておこう
「国内にはこのデータはありません」。
国土地理院にも、e-stat にも市区町村や、更に細分化された地区とか街区とかのレベルのものは存在するが、都道府県境界だけのデータはない。

では、どこにあるのか？
ここ、Natural Earth にしかない（と思われる）。
探しにくいので説明する。境界データは、

• Large scale data, 1:10m の Cultural をクリックし、
• 1:10m Cultural Vectors の中の 「Admin 1 – States, Provinces」で
  「Download states and provinces」をクリック
  で取得できる。
  ファイル名：ne_10m_admin_1_states_provinces.zip（約14MB)

日本の都道府県境界の抽出

zip ファイルを解凍して出てきた shp ファイルは、全世界の境界データなので、ここから日本のデータのみを抽出する必要があるのだが、 如何せんバイナリの shp ファイルを覗く手段もないので、一旦は全体を GeoJSON に変換する。
変換にはogr2ogrを使用する。無条件に変換する場合は以下の通り。

ogr2ogr -f GeoJSON ne_10m_admin_1_states_provinces.geojson ne_10m_admin_1_states_provinces.shp

64MBほどの巨大なGeoJSONファイルが出来上がる。
エディタによっては開けないかもしれない。
この中に admin というプロパティがあり、その値は国名になっている。
これを手掛かりに、日本のデータのみを抽出することにする。

ogr2ogr -f GeoJSON -sql "SELECT * FROM ne_10m_admin_1_states_provinces WHERE admin = 'Japan'"  japan.geojson ne_10m_admin_1_states_provinces.shp

なんとデータベース宜しく、SELECT 文が使えるのが嬉しい。
これで都道府県境界データを抽出できるのだが、実際中を見ると不要な項目（例えば、都道府県名は英語、ロシア語、アラビア語等々の言語によってエントリされている）も多いので、実際に使用する項目のみに絞ることもできる。
【例】

ogr2ogr -f GeoJSON -sql "SELECT type,iso_3166_2,name_ja,latitude,longitude FROM ne_10m_admin_1_states_provinces WHERE admin = 'Japan'"  japan.min.geojson ne_10m_admin_1_states_provinces.shp

GeoJSON に必須な

• features
• geometry
  は選択できないが、その配下のプロパティは選択できる。

抽出データの問題点

1. 静岡県の “name_local” の値が “???” になっている。手修正したら読み込めなくなってしまい、結局元に戻したので未修正のままになっている。原因が分からない。
2. ファイル内のデータの並びが都道府県順になっていない。完全ランダム状態。例えば北海道に “population” というプロパティを追加するには、38番目の行（インデクス値は 37）まで探して設定する必要がある。ソートできないか。

追記

抽出データのソートについて、散歩しながらあれこれ考えた。
Javascript での配列ソートが使えないかとか、jq でファイル自体をソートできないかとか、どれも今一な案ばかり。
そんな時、ふと思いついたのが「SQL」が使えるということ。
実際「SELECT」を使って必要プロパティのみを選択したではないか。
これに「ORDER BY」を指定したら昇順にソートできるのではないか。
早速、自宅に帰って試してみた。

ogr2ogr -f GeoJSON -sql "SELECT type,iso_3166_2,name_ja,latitude,longitude FROM ne_10m_admin_1_states_provinces WHERE admin = 'Japan' ORDER BY iso_3166_2"  japan.min.sort.geojson ne_10m_admin_1_states_provinces.shp

ドンピシャ！
問題解決だ。

Written with StackEdit.

Ajaxを関数で使用する

Ajax を外出しにして関数化する

Ajaxを関数化して使用したいと挑戦したが、結果をCall元に戻せない。
ちょっと手に負えないので、インターネットで調査したところ分かり易い事例があったので以下にメモしておく。

$(function(){ 
  $(document).on('click', '#sample', function () { 
    var $data = new FormData($('#sample').get(0));
    var $resultConnect = sendAjaxRequest($data);
    $.when($resultConnect).then(function(data){ 
      console.log(data); 
    }); 
  }); 
  
  function sendAjaxRequest($data) { 
   var d= $.Deferred(); 
   $.ajax({ 
      url:'hogehoge.php', 
      type:'post', 
      dataType: 'json', 
      data: $data, 
      cache:false, 
      processData: false, 
      contentType: false, 
   }).done(function(data){ 
        d.resolve(true);
    }).fail(function(xhr,err){ 
     d.resolve(false);
    }); 
    return d.promise(); 
  } 
}); 

<form id="sample"> 
 <input type="text" name="username" value="123"> 
</form>

使用例

この例だけでは分かり難い場合は、実際の使用例 をご覧ください。

Written with StackEdit.

Bloggerのコード・ハイライト

Prism の導入

Blogger のコードハイライト用に Prism を使用します。
導入は簡単で、次のコードを Blogger テーマの HTML に次のコードを貼り付けるだけです。（テーマの HTMLの操作方法が分からない場合は、こちらなどを参考にしてください）

<!-- Prism -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js'></script>
<!-- /Prism -->

これで、コードハイライトは可能です。

使い方

<pre><code class="lamguage-markup">...</code></pre>

<pre><code class="language-xxx"> と </code></pre>で表示したいコードを囲みます。
「XXX」の部分には言語を指定します。記述方法については、Prism のSupported languages を参考にしてください。

オプション

CDN を追加することで、テーマの変更や行番号表示などができるようになります。

テーマの変更

上記の設定で使用されるテーマはdefaultです。
どのように表示されるかは、Prism のサイト で確認できます。右側の団子状に並んだ丸の1つをクリックすると、ページ内のコードが選択したもので表示されます。
気に入ったものがあれば、そのCDNをテーマの HTMLに設定します。
例えば、OKAIDIAを設定する場合は次のようになります。

手順

1. cdnjs サイトに行き、css タブを選択してください（初期値はjsタブになっていると思います）。
2. その中から、https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css を探しコピーします（1.20.0 部分はバージョンなので適宜読み替えてください）。
3. このコピーを、次のように href の中に張り付けて、テーマの HTMLに設定してください。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css' />

テーマの変更は以上です。

行番号

テーマの変更同様に、cdnjs サイトからURLをコピーしてテーマの HTMLに設定するだけですので、そのコードのみを示します（行番号については JavaScipt も必要ですので同時にインクルードします）。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.js'></script>

言語

大半の言語はデフォルトでサポートされていますが、所望の言語がない場合は、cdnjs サイトの js タブの中から components を含む URL をテーマの HTMLに設定します。
【例】

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-sass.min.js'></script>

Written with StackEdit.