Cloud Storage

アプリケーションが App Engine でホストされている場合、ユーザーがプログラムを保存、読み込み、共有、公開できるクラウド ストレージ サービスを利用できます。

App Engine の設定

1 つ目の目標は、App Engine で Blockly を実行することです。

  1. Python SDK をダウンロードしてインストールします。
  2. Google App Engine にログインしてアプリケーションを作成します。
  3. appengine/app.yaml を編集して、アプリケーション ID を blockly-demo から、前の手順で作成したアプリケーション名に変更します。
  4. 次のファイルとディレクトリを appengine/static/ にコピーします（またはソフトリンクします）。
    • demos/
    • msg/
    • media/
    • *_compressed.js
  5. 省略可: サーバーで blockly_uncompressed.js を使用する場合は、そのファイルも appengine/static/ にコピーし、core を appengine/static/ にコピーします。
  6. （省略可）Blockly Playground を実行する場合は、blocks、generators、tests ディレクトリと、ステップ 5 のファイルをコピーする必要があります。
  7. GUI から Google App Engine Launcher を実行し、appengine ディレクトリを既存のアプリケーションとして追加して、[Deploy] ボタンをクリックします。コマンドラインを使用する場合は、appcfg.py --oauth2 update appengine/ を実行します。

Blockly をアップロードしたら、ステップ 2 で作成した URL をブラウザで参照できるようになります。Cloud Storage のデモなど、デモの一覧が表示されます。

クラウドに話をする

ストレージのデモのソースとして demos/storage/index.html を確認し、次の機能に注目してください。 まず、Cloud Storage API を読み込むスクリプト インクルードがあります。

<script src="/storage.js"></script>

このスクリプトは、ページに Blockly ワークスペースが 1 つあることを前提としています。 また、必要に応じて次のメッセージ定義も変更する必要があります。

BlocklyStorage.HTTPREQUEST_ERROR = 'There was a problem with the request.\n';
BlocklyStorage.LINK_ALERT = 'Share your blocks with this link:\n\n%1';
BlocklyStorage.HASH_ERROR = 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n' +
    'Perhaps it was created with a different version of Blockly?';

これらのメッセージを他の言語に翻訳するには、Blockly Games の json ディレクトリをご覧ください。

現在のブロックを保存するには、BlocklyStorage.link() を 1 回呼び出します。

<button onclick="BlocklyStorage.link()">Save Blocks</button>

ページの読み込み時に保存されたブロックを復元するには、Blockly の挿入後に URL のハッシュを指定して BlocklyStorage.retrieveXml を呼び出します。

if ('BlocklyStorage' in window && window.location.hash.length > 1) {
  BlocklyStorage.retrieveXml(window.location.hash.substring(1));
}

ローカル ストレージ

storage.js API を使用すると、単一セットのブロックをブラウザのローカル ストレージに保存することもできます。クラウド ストレージの代わりに実装することも、クラウド ストレージに追加で実装することもできます（後者の場合、一度に復元しようとする両方のタイプのストレージに注意する必要があります）。

ローカル ストレージからブロックを復元するには、Blockly が挿入された直後にタイムアウトで BlocklyStorage.restoreBlocks を呼び出します。

setTimeout(BlocklyStorage.restoreBlocks, 0);

ユーザーがページから離れたときにブロックを自動的にローカル ストレージにバックアップするには、BlocklyStorage.backupOnUnload を呼び出します。これにより、ページのアンロード イベントにイベント リスナーが登録されます。

BlocklyStorage.backupOnUnload();

例

これが、クラウド ストレージのライブデモです。