JavaScriptのforループについて

あまプロではウェブサイトを作成する事が有ります。

その際、謎現象に遭遇したのであメログ。

JavaScriptでHTML要素をgetElementsByTagName( )で取得し

var elements = document.getElementsByTagName( 'tr');
for( var i in elements)
{
    console.log( i);
}

の様にfor inループで回すと、何故か
0
1
2
3
︙
item
という結果が出力されます。
何やねんitemって…。
ちなみに

var elements = document.getElementsByTagName( 'tr');
for( var i = 0; i < elements.length; i++)
{
    console.log( i);
}

という様にインクリメントするforやと発生しません。
なんかJavaScriptのfor...inループって癖が有りますね。

どないなってるんかなぁ…と思って調べたら
こういう仕様でした。
forループとfor...inループとfor...ofループ、それぞれ微妙にちゃう様です。
なので今回は

for( var element of document.getElementsByTagName( 'tr'))
{
    console.log( element);
}

for...ofループにし様としたんですが、for...ofはスマホのデフォルトブラウザで動かなかったので、諦めて普通のforループに戻しましたとさ…。

端末からクリップボードへコピーについて

あまプロではターミナルからクリップボードへコピーする場合があります。

コマンドでクリップボードにコピーする方法をあメログ。

xclip -sel clip < 適当なファイル名

xclipがインストールされてない場合は適宜インストールして下さい。

グーグルフォームの回答のコピーメールについて

あまプロではフォームの作成をお受けする事が有ります。

グーグルフォームを良く使うのですが、初期設定だと少し使い難いので、あメログ。

グーグルフォームには回答のコピーをメールで送信する機能が有ります。
しかし、このメールをHTML未対応（テキスト形式のみスマホの標準メーラ等）のメーラで受信するとかなり見難くなります。

致命的なのが、チェックボックスやドロップダウンリストで選択項目が送られません。
つまりフォームで何を選択したか確認できないのです。

この不具合はいつかは改修されるかもしれませんが、GoogleAppsScriptを使えば今から改修できます。

サンプルはこんな感じ。

function submitForm(e)
{
  var vName = 'グーグルフォーム';
  var vFrom = 'form@google.com';
  var vTo   = e.response.getRespondentEmail( );
  var vSub  = 'グーグルフォーム内容確認';
  var vBody = 'フォームの内容の写しをお送りします。\n\n';
  for( var i in e.response.getItemResponses( ))
  {
    vBody += e.response.getItemResponses( )[ i].getItem( ).getTitle( ) +'　'+ e.response.getItemResponses( )[ i].getResponse( ) +'\n';
  }
  MailApp.sendEmail( {from:vFrom, to:vTo, subject:vSub, name:vName, body:vBody});
}

グーグルフォーム側ではメールアドレスを収集するにチェックを付け、回答のコピーを送信のチェックは外す。
プロジェクトのトリガーでフォーム送信時にスクリプトを実行する様に設定するだけです。
フォームの入力内容をメール本文に出力しているだなので、適宜メール本文は編集して下さい。

ExcelのVBAで文字列の中でダブルクオーテーションを使う

あまプロでは表計算のマクロ（スクリプト）の授業を行う事が有ります。
先日、文字列の扱いで質問が出たのであメログ。

LibreOfficeでもGoogleAppsScriptでもExcelでも文字列はダブルクオーテーションでくくります。
MsgBox "こんな感じ"

で、文字列内でダブルクオーテーションを使いたい場合はエスケープする必要が有ります。

LibreOfficeとExcelではこんな感じ
  MsgBox "これが""ダブルクオーテーション""です。"
GoogleAppsScriptではこんな感じ
  Logger.log( "これが\"ダブルクオーテーション\"です。")

例えばマクロで表計算の関数を出力したいとかはこの様にします。

Scratch3.0対応ブラウザについて

あまプロではScratchでプログラミングを教えています。

先日Scratchを表示し様として問題が発生したのであメログ。
あまプロでは通常firefoxをデフォルトブラウザにして授業を行っているのですが、
Scratch3.0を表示すると

こんなエラーが発生しました。

PCかブラウザがWebGLに対応してへんからスクラッチ出来へんで、と言うてます。
でもご覧になれば解る通り、後ろに薄っすらスクラッチのブロックが表示されてて、ぱっと見使えそうです。

しかし同じPCのchromiumで表示すると

表示出来ます。
バージョンはどちらも最新版で、OSはUbuntu18.04です…。

何ででしょうね？他のPCではこんな事は起きないんですが…原因不明です。

QGISで尼崎の人口分布図を作る

あまプロではQGISを用いて地図データを可視化する事が有ります。

最近は政府や自治体が持っているデータをオープンデータとして公開して、それらを利活用する事で価値を生み出せる様になりました。

今回は、お客さんとの打ち合わせの中で使った、尼崎市内で赤ちゃんの多い地域の可視化の手順をあメログ。

先ず、e-Stat政府統計の窓口から尼崎市の境界データ（世界測地系緯度経度・Shape形式）をダウンロードします。
解凍してQGISにレイヤを追加するとこんな感じです。

属性テーブルを開くと

町丁目が文字化けしてるので

エンコーディングをShift_JISに変更します

これで文字化けは解決しました！
この一つ一つが町丁目になります。
けど、これだけでは白地図みたいなもんで、あんま役には立ちません…。

では次に尼崎市の人口のページから町（丁）別・年齢別（5歳）世帯数及び人口のデータをダウンロードします。
先程の政府統計の窓口から年齢別人口のデータはダウンロード可能なんですが、こちらは四年に一度の国勢調査の更新頻度になります。
しかし尼崎市単体ですと、毎年の更新頻度になりますので、選り生きたデータを分布図に使えます。

なので、政府の境界データと尼崎市の人口データを紐付ける必要が有ります。
境界データの町丁目（S_NAME）と人口データの町（丁）がキーとなりそうです。
その為には人口データを整形する必要が有ります。
整形手順としては

1. 中央、小田、大庄、立花、武庫、園田の各地区のシートを結合する
2. 列名とデータ以外（合計と小計と空の行等）を削除する
3. 調査未実施のxを0に置換する
4. 町丁目の一致に邪魔な脚注の括弧（）を削除する
5. 町丁目の一致に邪魔な町丁目区切りの空白を削除する
6. （尼崎固有）何故か二行有る大物町１丁目の片方を大物町に変更する
7. （尼崎固有）大浜町１～２丁目を大浜町１丁目と大浜町２丁目に分ける

大体こんな感じです。

人口データの整形が済みましたら、レイヤとしてQGISに追加します。

追加した人口データレイヤの属性テーブルを開くと

人口データを読み込めています次に境界データと人口データを町丁目で紐づけます

次にスタイルの段階に分けられたを選択して、対象のカラム（今回は赤ちゃんの分布を調べたいので、０〜４を選択）と分類数を選択して、分類ボタンとＯＫボタンを押下します。

これで0〜4歳の人口の色分け分布図が出来ます。

今回は８段階表示で、色が濃い程赤ちゃんが多い所になります。
２歳以上は赤ちゃんちゃうやろというツッコミは置いといて。

この図から、阪神沿線の南部には赤ちゃんが少ないですね。
ＪＲ沿線の中部から赤ちゃんが増え始め、阪急沿線の北部は赤ちゃんが沢山居てる事が解ります。
ＪＲ塚口駅とＪＲ尼崎駅の近所は子供が増え過ぎて、幼稚園保育所が不足しそうですね…。

今回はQGIS2.18とLibreOffice6.1とFirefox64とUbuntu18.04でお送りしました。
皆様も地理情報をご活用下さいませ〜

Scratch3.0始まりました

あまプロではScratchを使って授業をしています。
先日、Scratch3.0がリリースされまして、あまプロでも使い始めました。

Scratch2.0で作成した作品もScratch3.0へ移行されてまして、良い感じで使えます。
Flashプラグインに依存しなくなったので、ブラウザのみで使えるのが嬉しい所です。

2.0と比べてブロックの字が見難いと指摘が有りましたので、ブロックの文字色を変える方法をあメログ。

3.0はHTMLとCSSとJavaScriptを使って構築されてます。
ソースもGitHubに公開されてますので、興味の有る方は除いてみて下さい。

先ず、ブラウザでCtrl+Shift+iを押下してインスペクタを起動して下さい。

要素選択（ □に←が刺さってる）アイコンをクリックして、要素選択モードにして
ブロックの字をクリックします。

スタイルの.blocklyTextクラスのfill:#fffがブロックの文字色になります。
このfffがRGB形式の色になってます。
黒文字がお好みの方はここを000に変えると、ブロックの文字が黒色になります。

うちの生徒は赤字にしてましたが…目がチカチカしました。

他にもコスチュームのスポイト（色を取得する機能）で透明色を選択するとクラッシュする
というバグが有ったりするんですが、その内改修されるでしょう。

3.0になって、スプライトや音楽のライブラリも豊富になり、ますますScratchが楽しくなりそうです〜