VSCode Remote Containers で kintone のカスタマイズ開発環境を整える

(数年ぶりにこちらに記事書きます)

 

 ここ数年の kintone カスタマイズ開発にはエディタとして VSCode、開発環境として Docker を使っていたのですが、昨年リリースされた VSCode Remote Containers の Extension がこれにまたマッチしていい感じだったので、kintone カスタマイズ用に整理した kintone-customizationGitHub に上げてみました。

 

github.com

 

VSCode Remote Containers とは 

 まず VSCode Remote Containers のおさらいです。Docker コンテナに VSCode からアクセスできる VSCode Extension です。設定等の情報は公式で詳しい情報を確認できます。

 Docker コンテナの volume マウントでファイルがローカルと同期しており、ファイル操作はローカルで作業するのと Docker コンテナ中で作業するのには変わらず、実行できるコマンド等が ローカルか Docker コンテナ中かで異なってくるといった感じです。新たに準備するのではなくて既存のコンテナに対しても VSCode からアクセスして開発を進めるといったことも可能です。

https://code.visualstudio.com/assets/docs/remote/containers/architecture-containers.png

(公式ページにあるイメージです)

 新しく始める時の設定方法は 3 通りあるのですが、.devcontainer というディレクトリ中に、Dockerfile と devcontainer.json を作るのが基本になります。それぞれ、ベースになる Docker コンテナの設定と VSCode Remote Containers を通してアクセスするための設定ファイルです。今回もこの方法で必要ファイルを揃えました。

 

kintone-customization での始め方 

 手順は次のとおりです。

  1. ローカル PC に Docker をインストールする(バージョン等の条件はこちら
  2. VSCodeVSCode Remote Containers をインストールする(こちらからもインストールできます)
  3. kintone-customization をダウンロードする
  4. VSCode の左下のクイックアクションをクリックする

    https://code.visualstudio.com/assets/docs/remote/common/remote-dev-status-bar.png

    (緑の「> <」みたいなところです)
  5. Remote-Containers: Open Folder in Container を選択し、ダウンロードした kintone-customization フォルダ( .devcontainer を含む階層)で Open する

    f:id:yamaryu0508:20200331055243j:plain

    f:id:yamaryu0508:20200331055303j:plain

  6. コンテナが起動し、コンテナ中で作業する(初めての時にはイメージのビルドが走るので少し時間がかかりますが、一度イメージができてしまうと次からはすぐに立ち上がります)

    https://code.visualstudio.com/assets/docs/remote/containers/dev-container-progress.png

 

Docker コンテナが立ち上がると、VSCode で kintone-customization の中身が volume マウントされて左の File Explorer に現れ、Terminal も コンテナ中で実行できるようになりまます。

f:id:yamaryu0508:20200331014726j:plain

閉じるときは、始めた時に押した左下の緑ボタンから Close Remote Connection を選択します。

f:id:yamaryu0508:20200331055329j:plain

 

kintone-customization の中身 

 今回の kintone-customization の基本部分はこんな感じです。

  • Dockerfile: Amazon Linux 2 をベースに Node.js と Python 3 が実行できるイメージ
  • devcontainer.json:  8443, 8080, 443, 80 ポートを開放、この Remote Container でのみ利用する VSCode Extension をインストール

kintone のカスタマイズと言えば JavaScript ですので Node.js、AWS Lambda を使ったバッチ処理を開発するケースも想定して Python がベースで入るようにしました。また、開発用のローカル Devserver のためにポートを幾つか開放しています。そして、本コンテナアクセス時のみ利用する VSCode Extension が幾つか入るようになっています(詳しくは GitHub やソースをご覧ください)

 最後に、今回サンプルとして最上位階層に汎用的な package.json を置き、ES5、ES6、TypeScript の 3 種類で sample-project を今回入れてみたので、フォルダ階層や Webpack の設定等参考にして頂ければ幸いです。

 

 Docker 自体をちょっとした検証からガッツリ開発・サービス提供に利用されている方も多いと思いますが、VSCode を開発に利用されている方はその恩恵にもあずかれるので一度試されてみてはいかがでしょうか。

Atom用kintone-JavaScriptスニペット(Beta版)

ちょっと空いてのブログ更新となりましたが、Atom用kintone-JavaScriptスニペット(Beta版)をGistで公開しました。

 

f:id:yamaryu0508:20150426021639j:plain

 

スニペットというよりタブ補完に近いので「autocomplete-plus」と「autocomplete-snippets」のパッケージ追加が前提になります。

 

Beta版と言いつつ、kintone JavaScript APIと共に、イベント名も全て記載しています。あと幾らか個人的によく使う関数を記載しています。よく覚えていない関数のために都度ドキュメントを見る必要性はなくなり、多少は効率上がったかなぁと個人的には思っています。※Gistがうまく表示されない時にはこちらから直接ご覧ください。

 

gist.github.com

お試し頂いた方は、フィードバック頂けると嬉しいですm(__)m

Raspberry Piの設定【I2Cの有効化】

 Raspberry Pi 2が登場して、ほぼ同時期にアップデートされたRASPBIAN(2015-02-16版)ですが、こちらのOSでのI2Cの設定方法が以前の方法からDEVICE TREE(1, 2)というものを利用する方法に変更になりましたので、まとめておきたいと思います。こちらの「手順2 I2Cの設定」の置き換えでもあります。

 

手順 I2Cの設定

 /boot/config.txt/etc/modulesが対象ファイルで、いずれも書き足し(コメントアウト等はなし)ですので、以下のように一挙に設定します。はじめに、sudo suしておきましょう。

$ sudo su
# echo dtparam=i2c_arm=on >> /boot/config.txt
# echo i2c-dev >> /etc/modules
# reboot

最後に再起動して設定は終了です。その他の設定は、現状以前と同様に行えます。

kintoneは“技術者を育てる”開発プラットフォームだ

 先日ITproに掲載された「kintoneは“働くママによりそう”開発プラットフォームだ」を読んで、ふと自分なりのタイトルがふと頭をよぎりました。FBのシェアで少し触れていますが、「技術者を育てる」というのもkintoneの枕詞として「働くママによりそう」「開発者とユーザーを繋ぐ」に加わっても良いんじゃないかなぁと思ったのです。「技術者自身が楽しく作り、kintoneを通じて成長していける」、そしてこれがまた先の2要素にもフィードバックされると考えます。私自身はkintoneに出会ってちょうど2年、kintoneエバンジェリストにご指名を頂いてからもうすぐ1年目ということで、これまでの自身の取組みと共に、こんなタイトル付けができると感じた理由を今回「技術的な側面を中心」にまとめたいと思います。

 

kintoneとは 

 まずはkintoneのおさらいです。私なりには「kintone Café 福岡 Vol.1」で大方まとめさせてもらっていましたが、大きく認識も変わっていませんので大事なところを掻い摘んで振り返りたいと思います。

 いわゆる概要はこうですね。「チームを強くするツール」を提供するサイボウズさんが提供する「データ」「ワークフロー」「コミュニケーション」を構成要素とする、誰でも簡単に業務アプリが作れてしまう「ファストシステム(Web−DB)」です。

 

そして、もたらされるものは、(ここも大きく変わっておらず)「ユーザ」、「プロバイダ(営業・技術)」の側面で次のように考えています。タイトルにも拘りがあって、それぞれが「kintoneを使って嬉しく、楽しいこと」です!「開発者とユーザーを繋ぐ」ことが出来る所以の一端でもあると思います。

 

自分なりにまとめると、・・・kintoneは簡単なアプリ作成からはじまり、「データ」、「ワークフロー」、「コミュニケーション」という機能の疎密も絶妙にコントロール出来ますし、カスタマイズ機能も強力です。一定の制約はあるにしても手直しにも強いので、案件クロージング・アプリ提供・享受にかかるコストはやはり他の様々な方法と比較しても低く、「ICTを使った業務改善」には最強・最短のツールだと思います。

 

kintoneは“技術者を育てる”開発プラットフォーム【考察・まとめ】

 自身の振返りは長くなるので、先にタイトルたる所以の考察とまとめです。

 kintoneはもともと優れた設計のREST APIやパワフルなJavaScriptカスタマイズ機能を有し、今日ではkintone Caféやcybozu.com developer networkといったコミュニティも充実してきたことで学習コストも低くなってきました。kintoneを通じて案件に対応しようとする時に技術者自身も楽しく作りながら、それに伴う成長の実感を得やすい開発プラットフォームになっています。「(技術者も)ユーザーの反応をファストに体現でき、納得・満足してもらえて」というサイクルを生み出しやすいというのが本質だと思いますが、技術マターで少し項目を挙げます。

  • REST API 今では当たり前のREST/JSONという形式のAPIを提供するサービスの中でも優れた設計・バリエーションを有するので、簡単なリクエストからスタートしても使いこなそうとする過程でデータの取扱、RESTfulサービス周辺の技術的な知識・勘が養われる。JSONによるテキストベースのデータだけでなくファイルも取扱の対象となっている。勿論全知全能ではなくとも、全体としてv1のままここまで進化できているのも類を見ない

  • JavaScript/CSS データやデータアクセス権限等を扱うREST APIだけでなく、その気になれば画面もパワフルにカスタマイズできるJavaScriptCSSを読み込めるため、特にJSそのものや周辺ライブラリに触れるきっかけになり、kintoneに適用して試すという使い方もできる。kintone.proxy()というJSから外部サービスにAPIリクエストできるメソッドも更に可能性を広げてくれる

  • 短いアップデートサイクル kintoneが1〜2ヶ月に1回というハイペースでアップデート・進化していくので、それをフォローするだけでもアイディア・技術の幅を広げることができる。また、今まで出来なかったことが次のアップデートで出来るようになるかもという期待・ワクワク感、出来るようになるはずという安心感が常にある
  • 連携サービス kintone連携サービスまで手を伸ばすことで、周辺技術習得のきっかけが得られる。サードパーティが提供する連携サービスを使いこなすことも含まれるが、連携プログラムを別クラウドに設置する必要があればAWS等で構築したり、CMS連携の際にはMovableTypeWordPressの知識を要したり、directのようなチャットと便利に連携させたい場合にはNode.jsやHubotに触れたりといったこと具合になる

f:id:yamaryu0508:20150214165403j:plain

  • kintone Café まだkintoneに触れたことの無い方から、より高度なカスタマイズを行いたいと考えているプロフェッショナルの方まで幅広い層を対象に、 楽しく学び・教え合うことで、kintoneの魅力や活用法をみんなで共有するための勉強会コミュニティ(以上、kintone Café 理念)- 「kintone Café」(kintone Café運営事務局)の全国拡大に伴って、kintoneを学びながら、情報交換できる場が身近になってきた。2013年12月の「kintone Café at 札幌 Vol.1」を起源として、昨年2014年は各地で23回の開催回数を刻んでいる

f:id:yamaryu0508:20150213233623p:plain

  • cybozu.com developer network 開発者(技術者)同士を繋ぐコミュニティ「cybozu.com developer network」(サイボウズ運営)を通じてkintone界隈の開発者間でコミュニケーションし、疑問や課題を解決するためのヒントや具体策を得ることができる。開設半年で1,000IDを超え、2/27(金)には同コミュニティのリアル版?である「kintone devCamp Vol.1」の開催も予定されている

f:id:yamaryu0508:20150213233858p:plain

 

後に触れますが、私は技術面で「REST API」と「JavaScript」はkintoneを通して学ばせてもらいました。また、いまだにDBのコマンドは打ったことはありませんが、これらの要素は私にファストに大きな成長をもたらしてくれたと思います。そして、ユーザーと対面しながらのモノづくりの楽しさをkintoneの醍醐味として覚えました。

 いかがでしょうか?kintoneを通じて、技術者としての成長がユーザーの課題解決に近づくことに繋がり、・・・「開発者とユーザーを繋がり」、「働くママによりそう」ことにも繋がってきそうなイメージできそうでしょうか?いきなり「働くママによりそう」ところまでは想像が追いつかないかもしれませんが、「開発者とユーザーを繋ぐ」まではイメージしてもらえるのではないでしょうか?実は私自身が実感として語れる部分も「開発者とユーザーを繋ぐ」までで、「働くママによりそう」は今まさにジョイゾーメンバーが新たな切り口で実践中です。

 私の説明がイマイチということもあるかもしれませんが、kintoneは自分で触って、好きになっていくツールでもあると思いますので、興味を持って頂いた方は是非イジって実感してもらえればと思います。

 

kintoneは“技術者を育てる”開発プラットフォーム【自身の振返り】

 私はタイトル通り自身がkintoneを通じて技術的にも成長させてもらった存在だと思っています。また表現を増やすなら「kintoneは最高の教材」でもありました。

 ということで、自分のkintoneへの取組みの振返りたいと思います。

 

 kintoneに出会ったのはニシム電子工業サイボウズシルバーパートナー)時代M2Mに関わり出して3年目の2013年の2月のこと。M2M(Machine to machine)で連携できるサービスを探していた先輩がkintoneを見つけてきました。私自身の最初の印象は「NAS+ExcelGoogleスプレッドシートとかで十分じゃないですか?」でした(^^; まずは、kintoneのパートナー認定資格であるCD(Cloud Developer)の講習会に行きました。APIはもとよりDBはおろかプログラムも学生時代研究用のC言語Javaをちょっとかじった程度から7年経っているという状況からのスタートで、PHPkintoneのAPIをリクエストするということを通して「REST API」を学び、kintone上の画面をカスタマイズするということを通して「JavaScript」、「CSS」を学んでいきました。kintoneのREST APIは当時ドキュメントが申込制でググって情報が出てくるというものでもなかったので、はじめ苦労しました。ただ、いまだアプリを作るのに、このように多少のコードは書くようになりましたが、DBのコマンドを打ったことはありません。kintoneがあったからです。

 

kViewerTimelineカスタマイズで、「kintoneへの取組み振返り」)

 

しかし、kintone最初の案件がいきなり太陽光とある意味得意分野で、しかもM2Mに発展(クラウドWatch)し、M2M2kintoneな案件となれば、熊本や愛媛の農場に行ったり、宮崎や鹿児島のインターネットも届かなさそうな現場に足を運んでは、客先で作ったアプリを要望が出たその場で修正したり、カスタマイズコードを復路で修正したりということをやっていました。

 

 振り返れば、・・・まさしくkintoneを通じた「技術者とユーザーの繋がり」を楽しみながら、kintoneを便利に使って「お客さまに価値提供する(課題解決にあたる)」、「技術的に必要な機能を追加する」プロセスによる多くの学びと成長を実感し始めた時だったのだと思います。ちなみに、一応企画と営業の部門にいましたので、カスタマイズのやりすぎ感が否めませんが、kintoneであれば営業でも技術スタッフの帯同をお願いして要件を詰めるといった作業をスキップできるというのは体現できたのではないかと思います。

 

 そして、kintone等を扱う開発者コミュニティサイト「cybozu.com developer network」の開設(2014年4月)と同時に選出されたkintoneエバンジェリストにご指名を頂いたことをきっかけに自身でもkintoneの勉強会コミュニティであるkintone Caféの福岡版として「kintone Café 福岡」のVol.1〜3を主催し、各地のkintone Café沖縄のkintothon等遠方のkintoneイベントにも度々顔を出すようになりました。普段の福岡・九州という自身の枠の中での活動が、こういったコミュニティを通じて一気に刺激と広がりを帯び出した時です。

 

 このコミュニティを通じたご縁で、私はニシム電子工業から九州電力の電力保安通信(法律で義務付けられている電力会社専用の社内通信網)を司る電子通信部門に復帰して3ヶ月後、・・・「全てのサイボウズプロダクトに精通する」四宮さんが代表を務めるジョイゾーサイボウズSIパートナー)へと転職します。四宮さんは東京から福岡までわざわざ話に来てくれましたが、「Enjoy IT, Enjoy LIFE」というのスローガン、「システム39」という新しいSI・サービスの形を体現されているところに勝手に共感していましたので、あまり多くの説明を求め合うこともなく決断していました。これは「kintone転職」ですね^^ 「光ファイバ心線貸しの事業移管」といった重要ミッションへの取り組みの最中「送別会」ではなく「壮行会」として送り出してくれた九州電力電子通信部門の仲間への感謝も絶えないところです。SIerとして、kintoneを通じて「自身もユーザーさんもみんなハッピー」を共有できるような取組みをしたい、と上京し丁度3ヶ月が経ったところです。これからもkintoneがファストに進化していくように私もここまでに述べたコミュニティと共にまだまだ成長していきます!

 

 結びにかかりますが、・・・kintoneへの取組みによる成長、そのポイントは「優れた機能を備えたサービス」の上に形成された「コミュニティ」、「繋がり」、「楽しさとその共有」のサイクルに入り込むことだとまとめながら感じました。読んで頂いた方の中で、「kintone触って業務改善に挑んでみよう!そして、そこにある楽しさを感じ共有してみたい」と思ってもらえる方がいらっしゃれば幸いですし、実際に触れてみて、コミュニティに加わってもらい、どこかのCaféでお会いできれば最高だなと思っています!

 

p.s. こういうまとめでは良いことばかりだけでなく、残念なところにも触れた方が良いと思いますが、kintoneの場合はだいたいアップデートとコミュニティによってフォローされることがわかっていて、気にしたことありませんので、無しで(笑)

Raspberry PiをUnixBenchでベンチマーク比較【B/B+/2B】

 パッケージに6倍速いと謳われている「Raspberry Pi 2」ですが、人に聞かれると「速い感じはします」という応えになってしまうのが正直なところでしたので、UnixBench動かしてみました。

 

f:id:yamaryu0508:20150213084402j:plain

(上:B Rev.2 / 左下:2B / 右下:B+)

 

比較は、前回2B用にアップデートしたMicroSDカードをそれぞれに差し替えて、UnixBenchにかけることで行いました。

 

Raspberry Pi 2 Model B

 まずは早速2Bからやっていきます。

f:id:yamaryu0508:20150213084645j:plain

f:id:yamaryu0508:20150213084733p:plain

f:id:yamaryu0508:20150213084741p:plain

 

Raspberry Pi Model B+

 次にB+です。

f:id:yamaryu0508:20150213085331j:plain

f:id:yamaryu0508:20150213085352p:plain

 

Raspberry Pi Model B Rev.2

 最後にBです。

f:id:yamaryu0508:20150213085447j:plain

f:id:yamaryu0508:20150213085455p:plain

 

まとめ

 「System Benchmarks Index Score」だけまとめると、次のようになります。

ModelSystem Benchmarks Index Score
Raspberry Pi 2 Model B (4CPUs, 1parallel copy)

170.5

Raspberry Pi 2 Model B (4CPUs, 4parallel copy)

435.2

Raspberry Pi Model B+ (1CPUs, 1parallel copy)

77.5

Raspberry Pi Model B Rev.2 (1CPUs, 1parallel copy)

78.1

なるほど、B Rev.2とB+は同等で、2は4コア使えばその約6倍というのは妥当な数値のようです。画像ファイル等を扱う以外は特に使っていなかったVNC接続もまぁいけるかなという感じになりました。

f:id:yamaryu0508:20150213091448p:plain

これなら、やはりWordPressとかもいけるかもしれません。

 

Raspberry Piの設定【Raspberry Pi 2 Model B移行用アップデート】

 昨日千石電商秋葉原本店で購入してきた「Raspberry Pi 2」ですが、これまで使っていた「Raspbian  on Raspberry Pi Model B(+)」のSDカードはそのまま使えないことがあるらしく、アップデートが推奨されていると店員さんから聞きました。また、「element14」というのはシンガポールの会社で、OEM生産・販売をやっているようです。

f:id:yamaryu0508:20150208221508j:plainf:id:yamaryu0508:20150208221511j:plain

 

 試しに、既存のSDカードを挿してみましたが、やはり起動しませんでした。(ACTランプも、Ethernetのリンクランプも沈黙状態でした)

 アップデート方法はググると、こちらが出てきました。これまで「Raspberry Pi Model B(+)」で使ってきたRaspbianのSDカードを「Raspberry Pi 2」で使うためのアップデート方法が記載されていました。【2/9追記】このアップデートは結構容量を食うようで、SDカードの容量不足で進まないことがあるようです。そんな時には「Raspberry Piの設定【SDカード使用容量の変更(リサイズ)】」を事前に済ませてください。

 

手順1 Raspbianのアップデート

 どうやら、2014年12月バージョン相当へのアップデートが必要のようです。打つべきコマンドは4つです。既存の「Raspberry Pi Model B(+)」上で実行します。適宜プロセスを進めるために、[Y]を押して進めていきます。

$ sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist-upgrade
sudo apt-get install raspberrypi-ui-mods

前半の2行は定番ですが、後半2行が2014年12月版へのアップデートのようです。なんでも変更されたUIのアップデートを反映するもののようです。

 

 全てのコマンドを通し終えて、「Raspberry Pi 2 Model B」にSD移し替えて、電源を入れると無事起動して、SSHアクセスもできました。とりあえず、これで一安心です!また、執筆時点ではこのアップデート後も既存の「Raspberry Pi Model B(+)」にアタッチして利用できます

 

ちなみに、今回一区切りといことで私は、sudo rpi-updateファームのアップデートもやっておきました。

f:id:yamaryu0508:20150208235953j:plain

f:id:yamaryu0508:20150209000011j:plain

 

Raspberry Piの設定【SDカード使用容量の変更(リサイズ)】

 ここまでは容量には困っていませんでしたが、色々試してきてそろそろ容量不足に陥りそうな状況になってきたので、SDカードの容量をフルに使えるようリサイズしたいと思います。

 

手順1 現状確認

 最初にdf -hで現状の利用状況を確認します。

$ df -h

結果はこのようになりました。

f:id:yamaryu0508:20150208214905p:plain

今、SDカード自体は8GBのものを使っていますので、だいぶ持て余しています。

 

手順2 容量のリサイズ

 sudo raspi-configコマンドから入っていきます。

$ sudo raspi-config

f:id:yamaryu0508:20150208215308p:plain

コマンドを打つとこの画面が現れます。今回の設定は 、1 Expand Filesystem で行いますので、そのままエンターキーを押してください。

f:id:yamaryu0508:20150208215529p:plain

リサイズが終わると、このような画面になります。<了解> でそのままエンターを押してください。

f:id:yamaryu0508:20150208215819p:plain

 raspi-config の初期画面に戻ったら、「→」で<Finish> にカーソルを合わせて、エンターを押します。

f:id:yamaryu0508:20150208220007p:plain

そのまま、リブートを促してきますので、<はい> でエンターを押してリブートします。

 

手順1 リサイズ確認

 df -hで確認します。

$ df -h

rootfsのサイズが7.2GBになり、これでOKです。

f:id:yamaryu0508:20150208220217p:plain

これまで、「Raspberry Pi Model B」から途中「Raspberry Pi Model B+」に乗り換えてきましたが、「Raspberry Pi 2 Model B+」なるものが発表されました。価格据え置きで、かなりスペック上がるようですので、入手したら次は「iBeacon」や「WordPress」あたりに手をつけていきたいと思います。(WordPressは一度軽くやりましたが重すぎて記事化には至りませんでした)