【Google Blocklyを使って遊ぼう】導入編

このエントリーを Google ブックマーク に追加
Pocket
[`yahoo` not found]

BlocklyはGoogleが公開しているオープンソースの教育向けビジュアルプログラミングライブラリです。
名前の通りブロックを並べ、繋ぐことでプログラミングを行います。
また、完成したブロックプログラムはJavaScript、Dart、Python、XMLなどの形式で出力することができます。
今回はAndroid用のライブラリを使用し、AndroidStudioで開発を行います。
下記の手順を行うことで開発準備を整えます。
  1. ライブラリのダウンロードする
  2. プロジェクトを作り、アクティビティを設定する
  3. プロジェクトの依存性を設定する
  4. AbstractBlocklyActivityを継承し、必要なメソッドを実装する

ライブラリのダウンロード

BlocklyライブラリをZipFileとしてダウンロードします。
ダウンロードしたZipファイルを解凍し、下記のaarファイルがある場所を確認してください。
  • blockly-android/blocklylib-core/build/outputs/aar/blocklylib-core-release.aar
  • blockly-android/blocklylib-core/build/outputs/aar/blocklylib-core-debug.aar
  • blockly-android/blocklylib-vertical/build/outputs/aar/blocklylib-vertical-release.aar
  • blockly-android/blocklylib-vertical/build/outputs/aar/blocklylib-vertical-debug.aar

プロジェクトの作成

Blocklyを使うプロジェクトを作成します、作成するときに下記の設定にしてください。
  • MinimumSDKをAPIレベル18にする。
  • Empty Activityを選択する。
  • Generate Layout Fileのチェックを外す
次にAndroidManifest.xmlのapplicationタグにwindowSoftInputMode属性を追加します。
android:windowSoftInputMode="stateHidden|adjustPan"

res/values/styles.xmlを書き換えていきます。
styleタグのparent属性にBlocklyVerticalThemeを指定します。
<style name="AppTheme" parent="BlocklyVerticalTheme">
   <!-- Customize your theme here. -->
</style>

プロジェクトの依存性

Blocklyプロジェクトに必要な依存性は2種類あります。
まずはsupportパッケージの依存性を設定していきます。
  1. FileからProject Structureを選択する
  2. appを選択する
  3. Dependenciesタブを選択する
  4. +ボタンをクリックする
  5. Library dependenciesをクリックする
  6. サポートパッケージを選択する
上記を繰り返し、下記のサポートバッケージを追加します。
  • com.android.support:appcompat-v7:25.0.1を追加する
  • com.android.support:support-v4:25.0.1を追加する
  • com.android.support:recyclerview-v7:25.0.1を追加する
  • com.android.support:support-v13:25.0.1を追加する
次はZipFileでダウンロードしたファイル内に存在するaarファイルをモジュールとしてプロジェクトに追加していきます。
  1. FileからNEWを選択し、New Moduleを選択する
  2. Import .JAR/.AAR Packageを選択する
  3. aarファイルを選択する
上記を繰り返し、下記のaarファイルをモジュールとして追加します。
  • blockly-android/blocklylib-core/build/outputs/aar/blocklylib-core-release.aarを選択する
  • blockly-android/blocklylib-core/build/outputs/aar/blocklylib-core-debug.aarを選択する
  • blockly-android/blocklylib-vertical/build/outputs/aar/blocklylib-vertical-release.aarを選択する
  • blockly-android/blocklylib-vertical/build/outputs/aar/blocklylib-vertical-debug.aarを選択する
次は新しく追加したモジュールをModule Dependenciesの依存性を設定していきます。
  1. FileからProject Structureを選択する
  2. appを選択する
  3. Dependenciesタブを選択する
  4. +ボタンをクリックする
  5. Module dependenciesをクリックする
  6. モジュールを選択する
上記を繰り返し、下記のモジュールを追加します。
  • blocklylib-core-releaseを選択する
  • blocklylib-core-debugを選択する
  • blocklylib-vertical-releaseを選択する
  • blocklylib-vertical-debugを選択する

確認作業

導入完了の確認としてMainActivityにAbstractBlocklyActivityを継承させます。
extendsの後に「AbstractBlockly」と打ち込み、コード補完を行い「AbstractBlocklyActivity」が候補として表示されるかを確認してください。
表示されない場合はGradleエラー等が出ていないかを確認してください。