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がちょっと便利に使えます。