【Google Blocklyを使って遊ぼう】導入編
BlocklyはGoogleが公開しているオープンソースの教育向けビジュアルプログラミングライブラリです。
名前の通りブロックを並べ、繋ぐことでプログラミングを行います。
また、完成したブロックプログラムはJavaScript、Dart、Python、XMLなどの形式で出力することができます。
今回はAndroid用のライブラリを使用し、AndroidStudioで開発を行います。
下記の手順を行うことで開発準備を整えます。
- ライブラリのダウンロードする
- プロジェクトを作り、アクティビティを設定する
- プロジェクトの依存性を設定する
- 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のチェックを外す
android:windowSoftInputMode="stateHidden|adjustPan"
res/values/styles.xmlを書き換えていきます。
styleタグのparent属性にBlocklyVerticalThemeを指定します。
<style name="AppTheme" parent="BlocklyVerticalTheme"> <!-- Customize your theme here. --> </style>
プロジェクトの依存性
Blocklyプロジェクトに必要な依存性は2種類あります。まずはsupportパッケージの依存性を設定していきます。
- FileからProject Structureを選択する
- appを選択する
- Dependenciesタブを選択する
- +ボタンをクリックする
- Library dependenciesをクリックする
- サポートパッケージを選択する
- 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を追加する
- FileからNEWを選択し、New Moduleを選択する
- Import .JAR/.AAR Packageを選択する
- 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を選択する
- FileからProject Structureを選択する
- appを選択する
- Dependenciesタブを選択する
- +ボタンをクリックする
- Module dependenciesをクリックする
- モジュールを選択する
- blocklylib-core-releaseを選択する
- blocklylib-core-debugを選択する
- blocklylib-vertical-releaseを選択する
- blocklylib-vertical-debugを選択する
確認作業
導入完了の確認としてMainActivityにAbstractBlocklyActivityを継承させます。extendsの後に「AbstractBlockly」と打ち込み、コード補完を行い「AbstractBlocklyActivity」が候補として表示されるかを確認してください。
表示されない場合はGradleエラー等が出ていないかを確認してください。