2020年7月26日日曜日

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.

2020年7月18日土曜日

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.

2020年4月6日月曜日

Bloggerのコード・ハイライト

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.

2020年4月4日土曜日

Mathjaxの構文

Mathjax構文

1. 数式モード

数式を表示する方法には、LaTexLaTex風に言えば「ディスプレイモード」と「テキストモード」の2種類がある。
HTML風に言えば「ブロックレベル」と「インライン」に該当する。

(1) ディスプレイモード

ディスプレイモードは、$$で数式の両端を囲みます。

【コード例】

$$
i=\sqrt{2}I\sin \omega t
$$

【表示】

i=2Isinωt i=\sqrt{2}I\sin \omega t

(2) テキストモード

テキストモードは、文中に数式を埋め込むもので、式の両端を$で囲みます。

【コード例】

$a \ne 0$ の場合、$ax^2  + bx + c =  0$ の解は次の式から計算します。

【表示】

a0a \ne 0 の場合、ax2+bx+c=0ax^2 + bx + c = 0 の解は次の式から計算します。

2. 数式モードでの文字と空白

数式内の文字はイタリック体で表示され、空白は全て無視される。従って、空白には\quadを使用し、文字には書体変更コマンド\textrmを使用して一時的に平文へ戻す必要がある。

【コード例】

$$x_i = 2x_{i-1} for each i, i=1,2, \dots,n \qquad 失敗例$$
$$x_i = 2x_{i-1} \quad  \textrm{for each i, i=1,2, \dots,n} \qquad 成功例$$

xi=2xi1foreachi,i=1,2,,nx_i = 2x_{i-1} for each i, i=1,2, \dots,n \qquad 失敗例
xi=2xi1for each i, i=1,2, ,nx_i = 2x_{i-1} \quad \textrm{for each i, i=1,2, \dots,n} \qquad 成功例

3. 上付き文字と下付き文字

【コード例】

$$A^1,A^2,...,A^n  \qquad y=ax^2+bx+c \qquad y=e^{x^2+x+1}$$
$$A_1,A_2,...,A_n \qquad y=a_1+a_2+a_3+a_4 \qquad y=A_{i,j}+A_{i,k}+A_{i,l}$$

【表示】

A1,A2,...,Any=ax2+bx+cy=ex2+x+1A^1,A^2,...,A^n \qquad y=ax^2+bx+c \qquad y=e^{x^2+x+1}
A1,A2,...,Any=a1+a2+a3+a4y=Ai,j+Ai,k+Ai,lA_1,A_2,...,A_n \qquad y=a_1+a_2+a_3+a_4 \qquad y=A_{i,j}+A_{i,k}+A_{i,l}

MathjaxをBloggerで使用する

MathjaxをBloggerで使用可能にする手順は次の通り。
(画像をクリックすると拡大できます)

Ⅰ. Mathjaxの設定

 1. Bloggerの管理画面で「テーマ」を選択する。

2. 右上の「:」のようなボタンをクリックする


3. プルダウンメニューから「HTMLの編集」を選択する

4. <head>セクション内に別掲のコードを貼り付ける

コード

<!-- MathJax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js" type="text/javascript">    
  MathJax.Hub.Config({
    HTML: ['input/TeX','output/HTML-CSS'],
    TeX: { extensions: ['AMSmath.js','AMSsymbols.js'], 
      equationNumbers: { autoNumber: 'AMS' } },
      extensions: ['tex2jax.js'],
      jax: ['input/TeX','output/HTML-CSS'],
      tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ],
      displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
      processEscapes: true },
      'HTML-CSS': { availableFonts: ['TeX'],
      linebreaks: { automatic: true } }
  });
</script>
<!-- /MathJax -->

Ⅱ. コードブロック

コードの表示用に、それ程好きではないがインターネット上の情報が多いのでhighlight.jsを使用することにする。
設定は、上記同様に以下のコードをHTMLに設定する。



<!-- START USER DEFINED AREA -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet'/>
<style>code{font-family:Menlo,"Osaka-等幅",Consolas,"Courier New",Courier,monospace;color:#333;background:#f8f8f8};</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- END USER DEFINED AREA -->
(このコードは。djeeno.logを参考にさせて戴きました)
使用方法は、以下の通り。

<pre><code>

ここにコードを配置する

</code><pre>

2020年4月2日木曜日

マスク2枚

アベノマスク

いま、Twitter で表題の件が話題になっている。
昨日、首相が全世帯にマスク2枚を配るとの表明を受けてのものだ。
Twitter のハッシュタグは、#アベノマスク。今年の流行語大賞は、これに決定でしょう(忖度がなければ)。
昨日は、折しも4月1日だったため、「首相のエイプリルフールか」と思った関係者も多かったようです。
これが、まさしく冗談なら「流石、外交のアベ。世界中を大爆笑させた。」となるのだろうが、残念ながら鬼の首でも取ったかのように胸張って発表している姿は、世界中の笑いものになること間違いなし。
Twitter には、これを揶揄する投稿がすごい。
中でも、次の画像が素晴らしく、その才能に驚く。

アベノマスク1 アベノマスク2 アベノマスク3

2020年4月1日水曜日

whichコマンド作成

Powershellでwhichコマンド

powershellでは、whichではなくgcmを使用するらしいのだが、直ぐにこれを忘れる。
whereもあるが、何の動作もしない)

powershellにはaliasがあるので、gcm(Get-Command) を alias を使用してwhichで使えるようにする。

alias を作成するにはSet-Aliasコマンドレットを使用する。

Set-Alias -name which -value Get-Commnd

これで出来たかと思いきや、一時的に作られる alias のようで、次回以降は使用できなくなるようだ。

そこで、Windows 10 の PowerShell で起動時にコマンドのエイリアスを設定 (Set-Alias) するにはという記事があったので、それを参考に設定する。
(1) 管理者権限で次のコマンドを実行する。

Set-ExecutionPolicy RemoteSigned -Force

(2) ユーザ権限で次のコマンドを実行する。

New-Item –type file –force $profile 

New-Item でプロファイルが次の場所に作成される。

C:\Users\tsuch\OneDrive\ドキュメント\PowerShell\Microsoft.PowerShell_profile.ps1

(3) プロファイルは次のコマンドで編集できる。

notepad $profile

プロファイルへの設定は次のように、Set-Aliasを使用して行う。

New-Alias -name エイリアス -value コマンド

または

New-Alias エイリアス コマンド

【例】
New-Alias -name an -value anaconda-navigator
New-Alias an anaconda-navigator

因みに、jupyter notebook の設定は次のようにすればできる。

New-Alias jn C:\Users\tsuch\Anaconda3\Scripts\jupyter-notebook.exe

New-Alias と Set-Alias の違いについて
Set-Alias は、コマンドレットを作成または変更するのに対し、New-Alias は、現在のセッションのコマンドレットを作成するが保存はされません。

肝心なwhichを忘れてました。

 New-Alias which Get-Command

Set-AliasではだめでしたがNew-Aliasにすると動くようです。
最後に、shコマンドの方が使いやすい。本当に必要な場合を除いて、使わない方がよさそうだ。
以上

2020年3月30日月曜日

stackEditを使用したブログ


昨日は、桜も散り始めたところなのに、霙まじりの雨から、午後には本格的に雪になるという大変な一日でした。
新型コロナウィルスの拡大が勢いを増し、東京には「来るな」とか「行くな」とか関東各都県から要請が出され、花見計画の中止にはおあつらえ向きの天気だったかもしれません。
かく言う自分にも自宅待機のいいチャンス。一日中パソコンの前でSphinx濃厚接触。Sphinxでは、reStructuredText(以下「reST」)というMarkdownに似た記法を用います。その記法をじっくり学習していたのですが、巡り巡ってこのstachEditにたどり着いてしまいました。

経緯

  1. VS Code でコードを入力しながらreSTの記法を確認。VS Codeでのプレビュー表示は可能ですが、変更の都度保存しなければならないのが面倒です。もうちょっと簡単にプレビューできないか、Chrome拡張のweb Makerを念頭に置いてググりまくる。
    この Online reStructuredText editor が使いやすかもしれません。
  2. このググっている最中に、 SphinxでMarkdownを扱うと言う投稿を見てしまい、しばしこちらの方に関心が向いてしまいました。でも、commonmarkrecommonmarkなど意味も分からずインストールするのに抵抗があり、結局途中というか初っ端で諦めることにしました。
  3. SphinxでのMarkdownは諦めたものの、web MakerでMarkdownを使ったことがなかったので、ものはついでなので使ってみることにしました。
  4. 手許にCheatsheetがあるので、それを元にGit Flavor記法などの確認をしました。ところが、superscriptMathjaxの数式が記法通り入力しても変換ができないのです。実は、見ていたものがMarkdownではなくRMarkdownのCheatsheetなので出来ないのは当然ことだったのですが。
    superscriptは、<sup></sup>で括ればできることは直ぐに分かったものの数式は?
  5. そこで探し当てたのがstackEditでした。
    それでは記念の第一号数式を --- と、書いて見たら stackEdit では旨くいったものの blogger がダメ。正常に表示できませんでした。
    Mathjax CDN をテーマの head に指定すれば表示可能らしいのですが、変更したテーマの HTML が何故か保存できないので、確認できていません。
    出来ましたら、再報告したいと思います。
Written with StackEdit.

StackEditから再挑戦

StackEditから再挑戦

blogger へ投稿してみたもののうまくいかなかったので再挑戦です。

Written with StackEdit.

ただいま作業中

2022/04/13 MySTの翻訳環境作り サイドメニューをプログラムで変換可能にすること 作業の中心場所 – jupyter notebook : g:\jupyter\python pythonをwebでも可能に – g:\webapp\Doc-tools ...