リブレオフィスのグラフについて

あまプロではプレゼンテーション用資料としてデータからグラフを生成する事が有ります。
データ（数値の羅列）だけだと解り難い事も、グラフで可視化すると解り易くなります。

あまプロではリブレオフィスを使用してますので、リブレオフィスでグラフを作成する方法をあメログ。
今回は環境省の大気汚染物質広域監視システム（そらまめ君）のデータを使ってみます。
窒素酸化物とか光化学オキシダントとか色々な物質を調査してはるんですが、今回はＰＭ２．５の濃度をグラフにしてみます。

先ずはそらまめ君から尼崎市のデータと、比較の為に大阪市のデータを取ってきます。
HTMLの表をコピーして、Calcへ貼り付けます。
貼り付け時に取り込み方法を聞いてきますが、そのまま「ＯＫ」します。

貼り付けましたら、グラフ化したいセルを選択します。

次にメニューの挿入 -> グラフ...を押下します。グラフウィザード゛が表示されるので、色々設定して行きます。

環境省サイトには折れ線グラフ表示機能が有るんですが、リブレやと棒グラフや円グラフ等々様々なグラフ形式を選ぶ事が出来ます。
今回は棒グラフで進めます。
次にデータ範囲

ここでは特に変更せず「次へ」ボタンを押下。次はデータ系列

名前をＰＭ２．５にしたかったんですが、何故かＰＭ２としか設定できません…．５があかん様です。
今回はＰＭ２．５のみですが、他の列を追加したい場合は追加ボタン押下で追加可能です。
逆に不要な列の削除も可能です。
この名前は凡例に表示されます。
「次へ」を押下

タイトルやサブタイトルやＸ軸やＹ軸を設定します。
ここは省略しても構いませんが、出典明記義務の有るデータを使っている場合や解り易さを求めるなら、設定しておいた方が無難でしょう。
今回はPM2.5のみですので凡例を表示チェックは外しておきます。
最後に「ＯＫ」ボタン押下でグラフが表示されます。

取り敢えずグラフは表示されましたが、何箇所か変な部分が有るので修正します。
グラフをダブルクリックすると、グラフ編集モードに移行します。

比較対象である大阪のグラフはＹ軸の最大値が20になってます。尼崎の最大値は３０…。
グラフとして比較する際には合わせといた方が良いので、尼崎のＹ軸の最大値を20に修正します。

次に、日時が日時になってないですが、これは日時の列が無い為です。
年と月と日と時がそれぞれ別の列に分かれてます…なので、新たに列を挿入し、そこに数式で「月/日 時」となる列を作ります。数式は

=B1 & "/" & C1 & " " & D1

で、数式をオートフィルすれば良いです。

 データ範囲で日時の列を指定します。

この場合Ｅ列をドラッグ・アンド・ドロップで選択すると

範囲の数式が入ります。ここでＯＫすると

Ｘ軸の目盛りに日時が表示されます。
あともう少し、Ｘ軸の日時が降順になってるので

Ｘ軸の目盛りで逆方向にして、

目盛りを逆方向にするとＹ軸のラベルが右側に表示されてしまうので、Ｙ軸ラベルの配置を「右端／上端」に変更します。

完成！

こんな感じで、皆さんも是非リブレのグラフを活用してみて下さい。

リブレオフィスについて

あまプロではオフィスソフトはLibreOfficeを使ってます。

最近、立て続けにバグを見付けたのであメログ。

1. Impressで複数行（二行以上）を入力し、全選択して日本語を入力するとハングする
   スライドを作ってたら偶々見付けたんですが、日本語入力時にフリーズします
   CPUが100%になってまいます
   Ubuntu( Linux)環境でのみ起きるみたいでWindows環境では起きない様です
   バグ票はこちら
2. Calcで時間のオートフィルが出来ない
   01:00をautofillで加算したら、見た目は加算されへんのに、実際は24:00加算されます
   勤務シフトの表計算を作ってたら偶々見付けました
   セルの見た目と値が異なるという気付き難いバグ
   これはOS関係無く発生している様です
   バグ票はこちら

長い事使ってると色々バグが潜り込みますね。
先日LibreOffice6.1がリリースされたばかりなので、早ければ6.2では改修される…筈。

松竹マルチプレックスシアターズメンバーズのシステムについて

あまプロでは夏休みを迎えております。
先日、子供達と近所の映画館へ行ったのですが、その時に困った事が会ったのであメログ。

Movixあまがさき では会員になって、六回鑑賞すると一回無料鑑賞クーポンが貰えます。
先日、ネットで 仮面ライダービルドとルパンレンジャーVSパトレンジャー の映画親子ペアチケットで２席購入して、更に無料クーポンでもう１席（計３席）購入しようとしました。
しかし、 SMTmenbers のシステムでは、同じ回で親子ペアチケットを購入した後に無料クーポンは使えません…。
困るので、取り敢えずメールで改善要望を出しときました📧

回避策としては、先に無料クーポンで１席購入した後に、親子ペアチケットで２席購入するか
先に親子ペアチケットで２席購入してしまった場合には（ネットでは購入出来なくなるので）諦めて窓口で無料クーポンで１席購入するしかないです。
窓口では無料クーポンが利用出来たので、システム上では親子ペアチケットと無料クーポンを同時回で利用するのは可能ですが、SMTmenbers経由だとそれが出来へん様です。

ひょっとしたら直ぐに改修されるかもしれませんけど、親子三人で映画を観られる方はご注意を。

ちなみに映画はおもろかったです。
次の仮面ライダージオウがちらっとお披露目されてました。
最後の平成ライダーはどんなんかな〜。

Google Apps Scriptのfor in文について

あまプロではグーグルスプレッドシートでスクリプトを組む事が有ります。

グーグルのスクリプトはApps Scriptという名前で、JavaScriptに似た仕様になっています。
利用にはGoogleのアカウントを作成する必要が有るのですが、無料でアカウントさえ作れば、グーグルサービス同士の連携が出来るので、とても便利です。
例えば、グーグルフォームでアンケートを収集して、アンケート受付をGmailで送信するとかが可能になります。

今回はみんなのサマーセミナーで当日シフトを作成するにあたり、
　グーグルフォームでシフト可能日を選択してもらい
　グーグルスプレッドシートへシフトを割り当てる
というスクリプトを作成しました。

嵌まりポイントが有りましたのであメログ。
例えば配列を繰り返し処理する場合、以下の様なスクリプトを組んだとします。

function myFunction() {
  var abc = [ 'a', 'b', 'c'];
  for( var i in abc) {
    if( i + 1 == 2) { //ここね
      console.log( abc[ i]);
    }
  }
}

とした時、意図した結果になりません…。
デバッグで追跡したみたところ、iにはStringが入っている事が判明しました。
良く解らないのですが、インクリメントして文字列に変換してくれてるんかな？
仕方ないので

function myFunction() {
  var abc = [ 'a', 'b', 'c'];
  for( var i in abc) {
    if( parseInt( i) + 1 == 2) {
      console.log( abc[ i]);
    }
  }
}

として数値に変換して回避しました…。

どうもGASのfor in文では反復子（i）を文字列で扱っている様です…。
反復子の操作はバグの元という意見も有るので、わざと扱い難くしてはるんかな？
一層の事この場合は

function myFunction() {
  var abc = [ 'a', 'b', 'c'];
  for( var i = 0; i < abc.length; i++) {
    if( i + 1 == 2) {
      console.log( abc[ i]);
    }
  }
}

にした方が良ぇんかな？

３Ｄモデルについて

あまプロでは３Ｄモデルを作成する案件が有ります。
今回はBlenderとthree.jsを用いて、ウェブサイトにスリッパの3Dモデルを表示してみました。
手順が少しややこしかったので、あメログ。

インストール

あまプロではUbuntuを使いますので、Ubuntuソフトウェアから簡単にBlenderをインストール出来ます。

日本語化

デフォルトではＵＩが英語表記になっているので、File -> User Preferences -> System -> International Fontsをオンにします。
これだけでは文字化けするので、Interface fontに適当な（/usr/share/fonts/truetype/fonts-japanese-gothic.ttf等）日本語フォントを指定します。

アドオンのインストール

Blenderで作成したオブジェクトをthree.jsで表示するにはglTF（またはそのバイナリ形式のglb）形式に変換する必要が有ります。
glTFはWebGLを用いて3D表示する為に策定されたファイル形式です。
Blenderの標準機能ではオブジェクトをglTF形式へエクスポートする機能が有りませんので、アドオンを別途追加します。
こちらからアドオンをダウンロードし、解凍して
Ubuntu（の１８．０４）の場合アドオンのパスは/usr/share/blender/scripts/addons/なので、

sudo cp -r glTF-Blender-Exporter-master/scripts/addons/io_scene_gltf2/ /usr/share/blender/scripts/addons/

でコピーします。
ディストリビューションによってはパスが異なると思いますので、調べてみて下さい。

これでエクスポートにglTFが追加されます。もし、追加されへん場合はファイル -> ユーザ設定 -> アドオンで、glTFエクスポートにチェックが付いてないか確認して下さい。

オブジェクトの作成

サイトに表示したいオブジェクトを作成します。
デフォルトでは立方体が表示されているので、これを編集したり、新たにオブジェクトを増やすと良いでしょう。
今回は押し出しや細分割曲面を利用してスリッパのオブジェクトを作りしまた。

ＵＶマッピング

オブジェクトだけではちと寂しいですが、表面に画像を貼り付けてそれらしく見せる事が出来ます。
対話モードを編集モードにして、スクリーンレイアウトをUV/Editingにします。
シェーディング/UVタブのUVマッピングをスマートUV投影にしてOKを押下します。

リンク（表面に貼り付ける）する画像を下で選択すると、左画面に展開図が表示されます。
次にスクリーンレイアウトをDefaultに戻して、 プロパティのテクスチャの画像で先程の展開図を選択します。

プレビュー上ではテクスチャが反映されませんが、これで表面に画像が貼り付けられてます。
何かこちょこちょやってたら偶に反映されます。方法は有るのでしょうが、判りませんでしたm( _ _)m。

エクスポート

作成したオブジェクトをエクスポートします。
glTF形式でもglb形式でも構いませんが、今回はglb形式にしました。
ファイル -> エクスポート -> glTF 2.0(*.glb)をクリックします。

色々オプションが有りますが、取り敢えず何も変えずに保存します。

サイト組み込み

three.jsのサイトにサンプルが上がってますので、ここを参考に組み込む側のスクリプトを作成します。
ローカルで動作さす場合はダウンロードしたライブラリを参照するだけで動きます。
ウェブで公開する場合は、glbファイルとライブラリファイルもアップする必要が有ります。
ライブラリの配置が難しい場合はライブラリのCDNを使うと良いでしょう。

別ドメインにglb（またはglTFファイル）を置く場合

3Dモデルを表示したいjimdoにはglbファイルをアップ出来ませんでしたので、別途GCPのバケットに置く事にしました。
その場合、リソースのドメインが異なりますので、クロスオリジン リソース シェアリング（CORS）の制約に引っ掛かります。
なので、ここを参考にバケット側の設定を変更する必要が有ります。
レンタルサーバに選ってはglbファイルもアップ出来ますので、CORS対応は不要です。

Facebookの3D投稿

glb形式でエクスポートすると、facebookに3Dモデルを投稿出来ます。
２０１８年７月現在glb形式のみで、glTF形式には対応してない様です。
ファイルサイズの制限等、詳しい方法はこちらをご覧下さい。
PCからの投稿方法は簡単で、投稿欄へglbファイルをドラッグ・アンド・ドロップするだけです。
画像や動画のファイル選択からglbファイルを指定しても表示されませんのでご注意を。
こんな感じでfacebookにスリッパを投稿出来ました。
ライブラリの配置もCORSの設定も不要なので、（表示するだけなら）めちゃ楽です〜。

まとめ

ざっとこんなもんで、サイトに3Dモデルを表示する事が出来また。
みんなのサマーセミナーのサイトをWebGLに対応したブラウザで表示するとスリッパが表示されますので、楽しんでみて下さい。

vimの設定について

あまプロではubuntuを使って開発を行う事が多いです。

エディタはvimを使っています。
大抵の環境には入っている（又はインストールする事が出来る）のでこれを選んでます。

ｖｉｍは標準設定では使い難く、ちょっと設定を変える必要が有ります。

例えばこんな感じ

:set ambiwidth=double
:set cursorline
:set display=lastline
:set hls
:set list
:set listchars=tab:»\ ,eol:↲,extends:»,precedes:«
:set laststatus=2
:set noswapfile
:set nu
:set nowrap
:set paste
:set statusline=%F%m%r%=[%{&fenc}][%l/%L]
:set sidescroll=1
:set showmatch
:set smartindent
:set showtabline=2
:set ts=4 sw=4 sts=4 et
:set title
:set virtualedit=block
:set whichwrap=b,s,<,>,[,]
:set wrapscan
:hi CursorLineNr cterm=bold
:hi CursorLine ctermbg=black
:hi StatusLine ctermfg=darkgreen ctermbg=lightgreen

これは出来るだけ毎回入力してます。
どんな環境でもいつでもだいたい同じ様にvimを使う為です。

これを設定するとvimがちょっと便利に使えます。

地図について

あまプロでは地図サービスでOpenStreetMapを使う事が多いです。
乗り換え検索ではGoogleMapを使いますが、チラシ作成やスクリーンショットやデザイン等ではオープンストリートマップを使います。

ＯＳＭは１５年程前にイギリスで始まった、オープンデータの地図情報プロジェクトです。
簡単に言うと、ウィキペディアの地図版です。

このプロジェクトのおもろい所は、自由に地図が描けますので地図好きには最高のプロジェクトになります。
地図データはODbLのライセンスで使えます。
簡単に説明すると、営利非営利を問わず自由に変更出来ますし、データベースから著作物（地図等）を作れます。但し、データベースはODbLを引き継がなければなりません。

いきなりデータを使うなんて無理やわぁと言う方もご安心！
データベースから生成された地図画像もCCBYSAのライセンスで提供されてます。
簡単に説明すると、営利非営利を問わず自由に変更や使用が出来ます。但し、変更後の地図画像もCCBYSAになります。

縛りが全く無いとは言いませんが、かなり自由度の高い物になります。
例えば、データの方はそのまま地図サービスを提供出来ますし、俗に言う位置ゲーのマップやカーナビやサイコン等にも使えます。
有名所で言えばポケモンGOもOSMを使ってます。facebookの地図もOSMです。ヤフー地図もデフォルトでは有りませんが、地図の種類でOSMの選択が可能です。

地図画像の方も例えば印刷物やスクリーンショットに用いる事が出来ます。
地図画像はCCBYSAに加えて"© OpenStreetMap contributors"というクレジットを地図の何処かに記載する必要が有るのですが、それさえ守れば無料で無断で使えます。
OSMのサイトではこのクレジットは右下に表示されてるので、スクショを撮ると自動的にクレジットが入ります。

自由って言うても何だかんだで縛りが多い…かもしれませんが、一般的な商用のウェブ地図サービスですと更に縛りが多いです。
ウェブ地図サービスの殆どが無料で使えますが、自由に使えるウェブ地図サービスは少ないです。
それは地図サービスのデータが地図会社から提供されている為なのですが、
例えば、日本の無料地図サービスの殆どにダウンロード版（オフライン版）は有りません。
最近は携帯各社のエリアも拡大されていますが、それでも人の少ない場所や人の居ない場所はエリア外になります。
そういう場所で使えるのは当然ダウンロード版のみになります。
OSMにはOsmAndというアプリが有ります。但し、当然ですが地図データをダウンロードするにはそれなりの容量が要ります。

また、ウェブ地図サービスはウェブの外に出ると途端に縛りがきつくなります。
ほぼ使えないと言っても過言ではないです。
詳しくは各サービスの利用規約を読むしか無いのですが、基本は著作権が有りますので、無断使用は著作権侵害になります。
使用には地図会社へ使用料を支払って許諾を得る必要が有ります。

SNSを見てると週一ペースで、無断使用した地図が流れてきます。
こんな感じで。
残念ながら役所の印刷物にも多いです。先日、役所の面接の案内にウェブ地図を無断印刷して有りました…。
個人で使うには問題無いですが、ウェブ地図サービスのスクショや印刷物を無断で外部へ配るのは著作権侵害になります。

良く、地図をそのまま使うのが駄目なら自分で描きます、といって地図をトレース（下書きに使う）して自作したと言う方が居ます。
それは自作ではなく盗作です。

参考にするだけなら問題無いでしょ、と言って略地図を描く人も居ます。
例えば、良識の有る人がピカチュウを参考（パクった）にしたペカチュウを堂々とパンフレットに載せるでしょうか？
まともな団体なら載せないと思います。載せた所は倫理を疑われます。
ですが、それが地図の場合皆さん疑わずに受け入れてしまうねんな…これほんま不思議。
地図もキャラクタも記事もロゴマークもテレビ動画も同じ著作物でやで。

地図会社の地図は莫大な予算を掛けて、様々な調査をして高精度な地図を作成しています。
その成果を利用したいのであれば、使用料を支払うべきです。
高精度の地図でなくても構わなければ無料のOSMを使えば良ぇと考えます。
それが嫌なら何も見ずに地図を描きましょう。するとあなたはきっと自分の描いた地図の出来の悪さに驚き、ついつい他所の地図をチラ見してしまう事でしょう（¬_¬）
それも嫌なら地図を載せるのは控えましょう。

偶に、著作権侵害は親告罪なので、著作者でない人が声を上げるのはおかしいという意見が有ります。
親告罪には違いないです。単独の強姦や名誉毀損も親告罪です。
言われなければ罪にならなのは確かにそうですが、そこから先は個人の倫理観にお任せします。

OSMは自由度の高い地図データを提供してますので、そのデータを利用した様々なプロジェクトが派生しています。

• Wheelmap　　　道路や施設が車椅子対応しているかの登録表示に特化したサービス
• F4map　　　　３Ｄ表示に特化したサービス（但し端末に3D表示機能が要ります）
• uMap　　　　　地図に道案内線や吹き出し等の書き込みに特化したサービス
• OpenLevelUp!　施設内の階表示に特化したサービス
• OpenPoiMap　標準のタイルに表示されないPOI（地物）の選択表示に特化したサービス
  　　　　　　　例えばAEDマップとか消火栓マップとかを作れます
• OSMjp　　　　標準のタイルには載らないけど、日本で要望の多い表示に特化したサービス

どれも尼の同じ場所を表示したリンクを貼り付けてますので、違いをお楽しみ下さい。

OSMを色々と紹介しましたが、もし興味を持たれた方は是非参加してマッパー（地図職人）になってみて下さい。
メールアドレス一つ有ればマッパー登録が可能です。
地元や旅行先の地図等、色々描いてみて下さい。ハマる人はハマる…筈。
注意点としては他所の地図を写さない事。これは厳禁です。
詳しくはまた次回の投稿で紹介しようと思います。

また尼限定ですが、あまプロではCodeforAmagasakiと連携して、毎年インターナショナルオープンデータデイやみんなのサマーセミナーに参加して、OSMの紹介や講習を行ってます。
ご近所の方は参加してみて下さいね〜。