どうも、まさとらん（@0310lan）です！

最近は、ドラッグ＆ドロップでWebサイトなどを構築できるサービスが増えていますが、今回ご紹介するのはさらに複雑なWebページを短時間で作れます。

簡単に言うと、Webの画面UIをドラッグ＆ドロップで手っ取り早く構築し、プログラミングが必要なロジック部分についてはScratch風のブロックで組み立て、完成したらそのまま無料で公開もできるサービスになっています。

【 Weld Action Blocks 】

どんなモノが作れるの？

「Weld Action Blocks」の最大の特徴は、ブロックを繋ぎ合わせることで複雑なロジックが構築できる点なのですが、意外と覚えることは少なく、さらにレゴブロックのような直感的な操作感が魅力的です。

例えば、公式サイトで紹介されている「Live Weather」を見てみましょう！
これは、任意の「都市名」を選択すると、現在の「天気状態」と「気温」の情報をサーバーから取得して画面に表示してくれるWebアプリです。

このロジック部分をプログラミングする場合、なんだか難しそうなイメージが湧いてきませんか…？。


しかし、「Weld Action Blocks」を使ってロジックを組み立てれば、わずか4つのブロックを繋ぎ合わせるだけで完成します。
見ての通り、必要なロジック毎に「ブロック化」されており、目的に応じて繋ぎ合わせることでさまざまな機能を簡単に追加できるように設計されているわけです。

「ミニ計算機」を作ってみよう！

それでは、実際に簡単なWebアプリを作りながら、もう少し詳しく見てみましょう！

今回はサンプルとして、「2つの数値」の合計値を計算するWebアプリを作ってみたいと思います。


まずは、無償のユーザー登録を済ませて、管理画面から「新規プロジェクト」をクリックします。


すると、編集用のエディタが表示されます。
この画面上で、Webサイトやアプリ、ゲームなどが作れるようになっています。


今回作るWebアプリは、2つの数値を入力する必要があるので、右側のメニューから2つの「入力ボックス」をドラッグ＆ドロップしましょう。


そして、実行用の「ボタン」も配置します。
ひとまず、これで画面レイアウトはOKでしょう。


さて、今回は単純に「合計値」を計算するだけなので、ロジックは3つのブロックだけで実現できます。
このようにブロックを繋ぎ合わせれば、計算機能を持ったWebアプリが作れますね。


そこで、「ボタン」要素を選択したまま、画面下の「actions」ボタンをクリックします。


「ブロックエディタ」が表示されるので、「Click」ブロックをドラッグ＆ドロップしましょう。


同じように、「計算用」と「表示用」のブロックも繋げていきます。


最後に、「Calculate」ブロックをクリックして、以下の手順で「値」を取得させていきます。
「fisrt value」の横にある「＋」アイコンをクリックすると、選択状態になるので1つ目の「入力ボックス」を選択すると、自動的に要素が選択されます。
（2つ目も同様にして、要素を選択しておきましょう…）

これでもう完成です！


画面下の「preview」ボタンをクリックしてみましょう！


そして、任意の数値を入力してから「ボタン」をクリック！


見事に「合計値」が表示されたのが分かります！
今回は簡単にするために「ポップアップ表示」を使いましたが、もちろん画面に直接表示させることも可能です。

また、四則演算用のボタンなどを配置すれば、本格的な「計算機」も簡単に作れるでしょう。

「アニメーション」に挑戦してみよう！

「Weld Action Blocks」を使うと、Webコンテンツのアニメーションも簡単に制作できます。

例えば、先ほど作った「ミニ計算機」の「ボタン」にちょっとしたアニメーションを追加してみましょう！


ロジックとしては、2つのブロックで実現できます。
「ボタン」にマウスを近づけたら、「ボタン」が少し大きくなるアニメーションを作ってみます。


先ほどと同様にロジックを組み立てて、「Animate」ブロックをクリックし「Animated」を選択しておいてください。


これで「録画状態」になっているので、このまま「ボタン」のサイズを大きくしてみましょう。
「透明度」や「フォントサイズ」など、その他のパラメータもいじってみると面白いですよ。

最後に、「Animated」から「Normal」へ選択を戻せば完成です！


プレビューを見てみると、しっかりとアニメーションしているのが分かります。

Webアプリを公開してみよう！

ある程度完成したら、いつでも世界中に公開することが可能です。

方法は簡単で、画面下にある「publish」ボタンをクリックするだけ！


これだけで、公開用のURLが表示されるのです！
あとは、このURLを友人・知人に教えてあげれば、誰でも自分が作ったWebアプリを試してもらうことが可能です！

もちろん、スマホ対応も自動的にされているので、どんな端末でもOKです。

また、埋め込み用のタグも生成可能で、自分のWebサイトやブログなどに挿入することも出来るので、ぜひみなさんもトライしてみてください！

おまけ

最後に、プログラミング不要でもっと高度なWebサービスを構築したい人にオススメのサービスを合わせてご紹介しておきます。

【コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた！】
こちらも画面UIはドラッグ＆ドロップで構築するのですが、ロジック部分は「ブロック」ではなくグラフィカルな「エディタ」を使って組み立てられるようになっているのが特徴です。

ECサービスやマッチングサービス＆SNSなど、かなり本格的なWebサービスが作れるので、ご興味ある方はぜひ一読くださいませ。

まとめ

今回ご紹介したように、ブロックによるロジックの組み立ては非常に簡単で、ちょっといじればすぐに慣れてしまい、簡単なミニゲームなどもすぐに作れてしまうでしょう。

そもそも「Weld」は、簡単にWebサイトが作れるサービスだったのですが、「ブロック」によるロジック作りが出来るようになり、可能性が大幅に広がったサービスに進化したと言えます。

「ギャラリー」を見ると、さまざまなWebサイトやサービスが作られているのがよく分かると思います。

これからWebアプリやゲーム、自分のWebサイトなどを制作しようと考えている人は、ぜひチェックしてみてください！


＜参考＞
・「Weld Action Blocks」公式サイト

・「Weld」公式サイト



written by まさとらん(@0310lan)