USBメモリで持ち運びできる開発環境の構築(構築編)
作成するものがある程度決まってしまえば、ネットで多くの情報が見つかると思うので、今回作ってみた環境について簡単にまとめておきます。
Atom のポータブル化
上記の記事を参考にしました。一応、流れだけ書くとこんな感じです。
- atom（インストーラじゃないバイナリ）をDLして展開する
- 展開したフォルダをUSBメモリにまるっとコピー
- atom.exeを実行する。
- 動くのを確認したら atom を終了
- ユーザーフォルダに .atomフォルダができているので、USBメモリに移動（※移動先のフォルダ階層に注意。atom.exe を"含む"フォルダと同じ階層）
- 再度 atom.exe を起動。ユーザーフォルダに.atomフォルダができていなければポータブル化できている（はず）
導入するパッケージ
今のところ、以下の３つがあれば割と快適にコードが書けるんじゃないかと思います。
- japanese-menu … メニューを日本語化
- browser-plus … HTMLのプレビューが可能
- atom-ternjs … コード補完を強化
プロジェクトテンプレートの作成
（まだ作っていないのですが）あとは、enchant.js を使って開発するようのテンプレートプロジェクトがあれば、環境で躓くことなく始めれるのではないかなと。
とりあえず手間を省くなら、enchant.js のサンプルの beginner/hellobear をコピーして、コード補完が有効になるように 設定ファイル（.tern-project） を追加すればいいと思います。
ternjsの設定ファイルは、プロジェクトフォルダ直下に ".tern-project" の名前で作成します。 中身はこんな感じで書いてみました。
{ "libs": [ "browser" ], "loadEagerly": [ "./enchant.min.js" ], "plugins": { "doc_comment": { "fullDocs": true, "strong": true }, "complete_strings": {}, "node": {}, "es_modules": {} } }
enchant.js 本体はコピーしてきたものをカレントに置いて、それを読むように設定しています。 あと、libsに "browser" を書いておくと、ブラウザでサポートされているイベントやオブジェクトが補完対象になります。
まとめ
ここまでで、一通り JavaScript で開発できるポータブルな環境が構築できたと思います。
実際に配って使う時にはソースを置くフォルダを整理したり、プロジェクト作成からの流れを決めてみたり、なるべくコーディング以外のことで詰まらないように工夫したいですね。
USBメモリで持ち運びできる開発環境の構築(検討編)
月一でお手伝いに行っている CoderDojo 岡山岡南 では、主に Scratch を使ったプログラミングが主流なのですが、少しずつやりたいことが増えてコーディングに興味を持つ Ninja が出てくるようになりました。
https://www.coderdojo-konan.jp/
実際にプログラミング言語を使ってアプリケーションを作るためには様々な知識が必要となるわけで、すべてを一朝一夕に教えることはできません。ただ、とっかかりとしてある程度の導きは可能なんじゃないかとも思っているので、まずは Dojo で使えるそこそこリッチ？な開発環境の構築について考えてみました。
満たしたい要件
参加者によって年齢やプログラミングのスキルは異なり、使っているPCのスペック、OSなどもバラバラだったり、 また、公民館でお借りしているノートPCはソフトウェアのインストールが禁止されているので、ざっくりと以下の条件は満たすように気を付けました。
- Windows10 と Mac 環境で動作する
- 開発環境一式はインストール不要 （作品の持ち帰りにUSBメモリ持参は割と周知されているので、すべてポータブル対応がベスト）
- 日本語の情報が充実している
- コード補完に対応している
まぁ、今どきのIDEやエディタはクロスプラットホーム対応されていることが大半で、プラグイン拡張できるものであれば、ざっと見渡した感じ大抵は要件を満たせそうです。
※ 番号振ってないですが、大前提として無料で揃う環境をイメージしています(^^;)
開発言語・環境
聞いている限りでは興味を持ち始めただけで、実際にコーディングを必要とするプログラミング経験者は居ないとのことだったので、色々悩んだ結果、対象とする言語は JavaScript にしました。
一応、(1)～(3)の条件を満たしているし、まぁ妥当かなと。ブラウザがあれば概ね同じように実行できるのも周知の通りですしね。
フレームワーク・ライブラリ
素のJSでアプリケーションを作るのも流石にしんどいというか、作りたいものを聞くと概ねみんな"ゲーム"なので、 これについても少し調べてみました。
結果、いくつか候補はあったんですが、ここはいい意味で枯れている enchant.js で行こうかなと思います。
2016年以降開発は止まっているようですが、初学者が必要とするサンプルやドキュメントがネット上に多く存在し、書店で探せばまだ何冊かはゲーム開発の入門書でも取り扱われているので、情報を得やすいかなということで。
開発環境
クロスプラットホームかつUSBメモリで持ち運びできるエディタについても、メジャーどころは大体何かしらの手段が提供されてはいたのですが、公式にポータブルなバイナリを提供していて、アドインも含めてちゃんと対応していそうなのは Atom だけでした（深追いしていないので頑張ればできるとか、最新ではできるのがあるかもですが...）
DLしてざっと触ってみた感じ、メニューを日本語化してしまえば小中学生でも特に不自由はしないだろうということで採用。
コード補完
で、思ったより大変そうだったのがコード補完の対応。
私は普段、VisualStudio + TypeScript で開発しているので、基本的にすべてのJSのライブラリはコード補完の対象という快適なコーディングライフを送っているのですが、このすべてのJSライブラリをというのがかなり難しそうな印象でした。。
ここからは Atom を中心に調べたのですが、標準でインストールされているコード補完（autocomplete-plus）は、JavaScriptの言語構文のみをサポートしています。なので、例えば jQuery を参照していたとしても、jQueryで拡張されたメソッドなどは候補に現れません。
※ちなみに、jQueryくらいメジャーなライブラリであれば、特別にjQueryのコード補完に対応したアドインがそれぞれのエディタ向けに作成されていることもあるようです。
ただ、今回は enchant.js を使いたいので、enchant.js のモジュールやメソッドを補完したいのです・・。
で、これを実現するのに 今回は atom-ternjs をインストールすることにしました。
https://qiita.com/s-shin/items/33bdfc5b819dab320808
このパッケージは、JSのコードを静的解析しつつ、その結果をコード補完の候補として提供してくれるパッケージで、標準ではブラウザやnodeに対応したコードの補完が提供されています。
※ ternjs はatom専用ではなく、JavaScriptのコードを静的解析するエンジンだそうです。
このパッケージに外部ライブラリを読み込んでもらえばコード補完の対象になるはずと色々と試した結果、 設定ファイルの loadEagerly に補完対象にしたいjsファイルのパスを指定しておけば、使っているライブラリのコードを補完したいという目的は達成できそうでした。
これで最小限の環境が揃いました。
かなり長くなったので、実際の環境構築については別エントリにします。
Minecraft for Windows10 と MakeCode for Minecraft を接続する
続きです。
ステップ３
Minecraft for Windows10 を起動して、新しいワールドを生成する。
生成するワールドはサバイバルでもクリエイティブでもよいようですが、ゲーム設定の "チートの実行" を必ず ON にしてください（実績をオフにしますか？は「続ける」を選択）
設定ができたら「作る」を実行して、新しいワールドでゲームを開始します。
ゲームが開始したら、ESCキーを押して一旦ゲームを中断しておきます。
※この後の設定とかプログラムを作成している間もゲーム時間は止まらなくて、気付いたら夜になってゾンビに襲撃されて死亡、なんてことが間々あるので、基本はクリエイティブモードをお勧めします^^;
ステップ４
Code Connection を起動する （デスクトップにショートカットができているので実行します）
接続用のコマンドが書かれたダイアログが開くので、右側のコピーボタンをクリック。
ここで Minecraft for Windows10 のゲーム画面に戻ります。
ゲームを再開したら Tキーを押してコマンド入力画面を開き、先ほどコピーした接続コマンドを貼り付けて実行しましょう(Ctrl + v で貼り付け、その後Enterキーで実行)
ゲーム画面に "サーバへの接続を確立しました" と表示されていれば成功です。
ここからはプログラムを作成するため、Code Connectionの操作になります。ESCキーを押してゲームは中断しておいてください。
先ほどまでは接続用コマンドが表示されていたと思いますが、接続に成功していれば "使用するエディター" が選択できるようになります。
ここでは「MakeCode」を選択してください。
画面が切り替わって、MakeCodeのホーム画面が表示されるので、マイプロジェクトの「新しいプロジェクト」を選択します。
エディター画面が表示され、初期モードはブロックエディタになっていると思うので、まずはチュートリアルを見ながらプログラムを作ってみましょう。 https://minecraft.makecode.com/tutorials/chicken-rain
プログラムが完成したら、またゲーム画面に戻り Tキーを押してコマンド入力画面を開きます。
作ったプログラムの「チャットコマンド "xxx" を入力した時」の "xxx" がコマンド名なので、入力してEnterキーを押すことで自分で作ったプログラムが実行されます（例えばchicken-rainのサンプルなら chicken と入力してEnter）
これくらいで最初のプログラムを書いて実行できると思うので、英語だとよく分からないって方は参考にしてもらえればと思います。
MakeCode for Minecraft のセットアップ
最近は 10月に公開された MakeCode for Minecraft を試して遊んでいます。 https://forest.watch.impress.co.jp/docs/news/1087749.html
セットアップ手順は公式ドキュメントに書かれている通りでそんなに難しくはないと思いますが、先日参加した CoderDojo岡山 岡南 の終了後に軽く紹介してみたところ、やってみたいというニンジャがいたので、日本語でざっくり書いてみようと思います。
ダウンロード等のリンクは公式ドキュメントを参照してください。 https://minecraft.makecode.com/setup
ステップ１
Minecraft for Windows 10 をインストールする （Microsoftストアから購入 or PC版を持っている人は無料でダウンロードできるはず）
ステップ２
Code Connection をインストールする （「Download Code Connection」をクリックしてダウンロードできるインストーラを実行する）
※インストール時にファイアウォールの設定を聞かれるので、"プライベートネットワーク"にチェックを付けて「アクセスを許可する」を選択します（このアプリに限ったことではないですが、基本的に家庭で使うだけであれば、パブリックネットワークの許可はしない方が安全だと思うので、必要ではない場合は"パブリックネットワーク"のチェックは外した方がよいと思います）
環境の準備はここまでです。実行手順については次のエントリーで。
ブログを移行しました
勉強のためにと細々と自分でサーバを構築してブログを立ててとやってきましたが、管理とか色々と手間なのでこちらに移行することにしました。
とりあえず、過去記事から有用そうなものだけ移行しつつ、何かネタがあれば投稿していこうかなという感じ。
VSCodeのMarkdownプレビューのフォントを変更する
これもググるといくつかの方法が見つかりますが、全体的なスタイルはそのままでフォントだけ日本語フォントに変更したかったので、こんな感じで設定しました。
- VSCode の Markdown用の CSS をコピーする
- デフォルトだとこの辺 「C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\languages\markdown\common\markdown.css」
- (1) でコピーしたファイルを開き、フォント名（font-family）を変更する
- 「File」→「Refreences」→「User Settings」を開く
- Default.settings の markdown.styles を settings.json にコピーする
- (2) で編集したファイルのパスを (4) にセットし保存
