どうも、まさとらん（@0310lan）です！
今回は、インタラクティブ性の高いWebサイトやミニゲームなどを簡単に開発できる無料のWebサービスをご紹介します。
一般的なWebサイトはもちろんのこと、ノーコードで高度なロジックを組み立てる機能も提供されているので、アイデアしだいでとてもユニークな作品を作れるのが特徴です。
オリジナリティあふれるWeb作品を手軽に作りたい人はぜひ参考にしてください！
【 Playful 】
■「Playful」の使い方！
それでは、「Playful」をどのように使えばいいのか詳しく見ていきましょう！
まずはサイトのトップページから【Sign Up】ボタンをクリックして、無料のユーザー登録を済ませておきます。
「メールアドレス」と「パスワード」を入力します（Googleアカウントも利用可）。
次に好きなユーザー名を設定しましょう。
最後に「LET'S PLAY」ボタンをクリックすれば準備は完了です！
■「Playful」で作れるWeb作品例
基本的な機能を紹介する前に、「Playful」で作成できるWebサイトやゲームなどを先にご紹介しておきます。一般的なWebサイトをノーコードで作成できるのですが、「Playful」にはユニークな機能がたくさん搭載されているのが大きな魅力になっています。
たとえば、パーティクル機能やアニメーション機能などを使って動きのあるWebページが作れます。
こちらは、「ハート」のアイコン同士をドラッグして近づけたら、大量のアイコンを表示するという作品です。
このようにユーザーの操作を検出して、何らかの処理を実行するというアクションが手軽に構築できるのです。
また、物理演算を利用して任意の要素に「重力」を持たせることもできます。
物理エンジンを活用すれば、以下のようなミニゲームも簡単に構築できるわけです。
このようにインタラクティブ性の高いWeb作品を手軽に作れるのが大きな特徴と言えるでしょう。
もちろん普通のWebサイトも作れますし、ポートフォリオやアート作品などアイデアしだいで多彩なWebページを構築できる楽しいサービスになります。
■提供されている機能について
「Playful」が提供している機能を紹介しながら、どのようにWebページを作っていくのかをご紹介していきます。
まずはユーザー登録を済ませた状態で、画面右上のアバターアイコンをクリックすると以下のようなメニューが表示されます。
「Under Construction」の項目がONになっているかを確認しておきましょう。初期状態だとOFFになっているのでクリックしてONにしておきます。
表示が「Disable Under Construction」になっていればONになっています。
次に【try it for free】ボタンをクリックしてください。
テンプレートの選択画面が表示されるので、今回は試しに「Desktop blank」を選択してみましょう。
次のようなWebエディタが表示されます。
画面左側のメニューから「elements」を選択したら、表示されているさまざまな種類の要素を画面中央のキャンバスへドラッグ＆ドロップします。
一般的なフォーム部品から、シェイプ画像、矢印、アイコンなど…さまざまな要素が提供されているのが分かります。
また、画面右側には各要素の詳細な設定やスタイルなどを調整できるプロパティが表示されます。
他にも、フリー素材の画像・GIF・動画・音楽なども提供されており、同じようにドラッグ＆ドロップでキャンバスへ配置できます。
さらに、提供されている要素にはユニークなものがいくつかあります。
たとえば、Mermaid記法を利用して図やチャートなどを生成できる「DIAGRAM」要素があります。
マウスカーソルを追いかける「目」を生成できる「MOUSELOOK」という要素もあります。
「p5.js」でプログラムを作って表示できる要素も提供されています。
パラメータを調整するだけで「花火」のアニメーションを生成できる要素もあります。
このように提供されている要素をドラッグ＆ドロップするだけで、誰でも簡単に楽しい仕掛けを搭載したWeb作品を作ることができるわけです。
他にも以下のような要素が提供されています。
- 絵文字を利用したアニメーション
- QRコードの生成
- 訪問者カウンター
- ワードアートの生成
- Lottieを利用したアニメーション
…など。
これらの要素を組み合わせながら、ユニークなWebページを組み立てていくのが「Playful」の基本的な使い方となります。
■「Playful」の高度な使い方！
基本的な使い方に慣れてきたら、「Playful」をもっと活用できるいくつかの機能を使ってみましょう。
Webサイトだけでなくミニゲームなども作れるようになります。
たとえば、「HTML」要素をドラッグ＆ドロップしてみましょう。
この要素は、HTML / CSS / JavaScriptを利用して完全にオリジナルのWebコンテンツを作ることができます。
またアイコンをクリックすると、別ウィンドウでコードエディタだけを表示する機能もあります。
シンタックスハイライトやサジェスト機能なども使えるので、プログラムを作りやすくなります。
今度は「TIMER」要素をドラッグ＆ドロップしてみましょう。
ついでにテキスト要素も配置しておいてください（今回はワードアートを配置してます）。
「TIMER」要素で設定した時間が経過したら、テキストを任意の文字列に変更するという簡単なサンプルを作ってみます。
まずは「TIMER」要素のプロパティから、Intervalを「3」に設定します。
これで3秒後に何らかのアクションを実行できるようになります。
そこで、Actionsタブに切り替えて「ADD ACTION」をクリックします。
イベント処理の選択リストから「tick」を選びます。
「＋」アイコンをクリックして、アクションの中身を以下のように設定します。
今回はワードアートのテキストを利用しているので、対象を「wordart1」に設定してから「Text Content」で文字列を「Playful」へと変更するようにしました。
エディタ上部にある「preview」ボタンをクリックしてください。
すると、3秒後にテキストが「Playful」に変更されるのが分かります。
このように簡単な操作だけでロジックを組み立てられるのも「Playful」の魅力です。
ほかにも、ボタンをクリックしたらアクションを実行するとか、マウスカーソルが特定の範囲に入ったら処理を実行するなど、さまざまなアクションを構築可能です。
次に「PHYSICS」要素をドラッグ＆ドロップしてみましょう。
「PHYSICS」要素はキャンバスへ配置するだけで、任意のオブジェクトに物理演算を適用して「重力」を持たせることが可能です。
そこで、「星」のアイコンも配置して、これに「重力」を適用してみましょう。
「星」アイコンを選択した状態でEffectsタブに切り替えて、【add an effect】ボタンをクリックしてください。
画面左側のメニューから「Physics Properties」を選択します。
これで「星」アイコンに重力を適用させることができます。
追加で長方形のシェイプも配置しておきましょう。
プレビューを見てみると、星に重力が適用されているのが分かります。
これらの機能を活用すれば、インタラクティブなWebページやミニゲームなども作れるようになるでしょう。
エディタ上部にある「share」ボタンをクリックして、「copy link」ボタンをクリックすると作成したプロジェクトを簡単にシェアできます。
「settings」タブに切り替えると、公開条件を変更可能です。
たとえば、「Playful」のギャラリーへ同時に公開する機能や、リミックス機能をONにしたり、自動アップデート機能を使う設定もできるので便利です。
■エンジニア騎士とクエリの魔女公開中
paizaは先日「エンジニア騎士とクエリの魔女」を公開しました。
異世界に勇者パーティーとして召喚された新人ITエンジニアの男女。
目覚めるとそこは、剣（コード）と魔法（SQL）が支配する世界だった。
騎士と魔法使いの冒険が、今始まる――
Python、PHP、JavaScript、C言語、Javaなど28言語で遊べるプログラミングゲームです。
あなたのプログラミング&SQLのスキルを解き放って異世界に平和をもたらしてください！！
■まとめ
今回は誰でも簡単にインタラクティブ性の高いWebサイトやゲームを作れるサービスをご紹介しました！
「Playful」はまだ開発段階のサービスですが、すでに実用的な多くの機能が提供されています。現在も活発にアップデートが続けられているので、今後も便利な機能が多く搭載されるはずです。
アイデアしだいでオリジナリティの高いWeb作品を簡単に作れるので、ぜひみなさんも気軽に試してみてください！
＜参考リンク＞
・「Playful」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
