シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
注目記事ピックアップ
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/05/11 21:00

ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!

weld-action-blocks-01 どうも、まさとらん(@0310lan)です!

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

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

【 Weld Action Blocks 】



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

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

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


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


「ミニ計算機」を作ってみよう!
それでは、実際に簡単なWebアプリを作りながら、もう少し詳しく見てみましょう!

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


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

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


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

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


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


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

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

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

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

これでもう完成です!


画面下の「preview」ボタンをクリックしてみましょう!
weld-action-blocks-13

そして、任意の数値を入力してから「ボタン」をクリック!
weld-action-blocks-14

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

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


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

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


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


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

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

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


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


Webアプリを公開してみよう!
ある程度完成したら、いつでも世界中に公開することが可能です。

方法は簡単で、画面下にある「publish」ボタンをクリックするだけ!
weld-action-blocks-20

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

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

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


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

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

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


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

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

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

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


<参考>
「Weld Action Blocks」公式サイト

「Weld」公式サイト



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

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る