ワードプレスのテーマ編集時にファイルが空になる現象について

あまプロでは、ワードプレスの授業も行っております。
先日、生徒さんのwordpressを授業してたら、急にサイトが真っ白で何も表示されなくなる現象に遭遇しました。

その顛末をあメログ。

先ず、サイトが真っ白で何も表示されない原因は管理画面の 外観 -> テーマの編集 で使うfunctions.phpが空（０バイト）になっている為でした。
functions.phpが空になる原因ですが、functions.phpの更新時に

致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。

というエラーが発生して、その際に変更が取り消されただけでなく、ファイルの中身も消されてしまった様です…。
えぇ、ファイルと一緒に頭の中も真っ白になった次第です。

現象が発生したサイトはfunctions.phpのバックアップが有った為、バックアップから復旧する事にしました。
ですが、wordpressの管理画面からでは何度遣っても上記のエラーが発生し、ファイルを更新できませんでした…。

仕方ないので、FilezillaでFTPアップロードして何とか解決しました。
やれやれ、こんな事も起きるんですね…勉強になりました。

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

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

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

先ずはそらまめ君から尼崎市のデータと、比較の為に大阪市のデータを取ってきます。
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がちょっと便利に使えます。