どうも、まさとらん（@0310lan）です。
Webサイトには「問い合わせフォーム」「ショップページ」「ギャラリー」「コメント」…など、さまざまなコンテンツが詰まっています。
これらのWebコンテンツをプログラミングすることなく、まるで「YouTube動画」を貼り付けるような感覚で構築できる無料サービスがあるのでご紹介しようと思います！
【 POWr 】
「POWr」は、およそ50種以上のWebコンテンツが登録されており、「埋め込みタグ」をサイトに貼り付けるだけですぐに利用できるようになります。
細かいカスタマイズにも対応しており、1つずつのコンテンツを複数組み合わせて使うのも自由自在です。
■使い方！
それでは、実際に使いながらどのようサービスなのかを見ていきましょう！ 今回は、サンプルとして「お問い合わせフォーム」を作ってみたいと思います。
まずは、サイトにアクセスして無償の「ユーザー登録」を済ませておきます。
登録後に、自分の「ダッシュボード(管理画面)」が表示されます。
ここから、さまざまなWebコンテンツを選択して「埋め込みタグ」を生成することができるようになります。
Webコンテンツを生成するには、新しくプラグインを作ります。
左側のカテゴリから「Forms」を選択！
その中にある「Contact Form」を選びましょう。
すると、フォームを細かくカスタマイズできる「設定」と、デザインを確認できる「プレビュー」が表示されます！
ゼロからフォームを作りたいので、「START FROM SCRATCH」からまずは自分のメールアドレスを設定します。
これにより、誰かがフォームへ入力して送信すると、ここで設定したメールアドレス宛に通知が届くようになります。
初めて設定するメールアドレスの場合は、すぐ下の「認証ボタン」をクリックするのを忘れないようにしましょう。
設定したメールアドレス宛に「認証確認メール」が届くので、メール内にあるボタンをクリックすれば自動的に利用可能になります。
画面下の「NEXT」ボタンをクリックしていくと、フォーム内の「テキスト」やデザインの「レイアウト」などを細かくカスタマイズすることが可能です。
サイトのデザインに合わせたフォームにするなど、自由な編集が自分好みにできるのが魅力的です。
テキストを日本語にして、少しだけデザインをいじればこんな感じになります。
最後に、今作ったプラグインを保存したら、「➀ Add to Site」ボタンをクリックして表示される「➁ 埋め込みタグ」をコピーしておきます。
コピーしたタグは、HTMLの好きな場所へ貼り付けるだけで準備完了です！
先ほど作った「フォーム」が見事に表示されたのが分かります！
ちなみに、画面には「編集ボタン」が表示されていると思いますが、これは自分のPCだけに表示されるもので、実際にサイトを公開すれば表示されなくなります。
また、この「編集ボタン」は、クリックすることで「フォーム」の中身をすぐに再編集できるようになっています。
送られてきた「問い合わせ内容」を確認するには、「ダッシュボード」にあるプラグインの「➀ 設定」から、「➁ Submissions」をクリックします。
すると、「フォーム」から受け取ったデータの一覧が、「ユーザー別」で表示されます！
このように、埋め込み用のタグを貼り付けるだけで、簡単に「お問い合わせフォーム」が完成するので、誰でも容易に扱えるのが特徴と言えるでしょう。
■まだまだある、こんなコンテンツ！
さて、これまで「フォーム」の作成事例を見てきましたが、「POWr」の素晴らしい点は同じような感覚で50種以上のコンテンツを生成できるところです！
例えば、自分のPayPalアカウントに紐付けて、「商品画像」と「価格」を入力するだけですぐに「ネットショップ」コンテンツを生成することも可能です！
こちらも当然ながら、埋め込み用のタグをHTMLに貼り付けるだけで、すぐに自分のサイトに表示させることが出来ます。
「モノ」の販売だけでなく、電子書籍などのデジタルコンテンツ用の販売ページも簡単に作れますよ！
ユニークなコンテンツとして、地域を指定するだけでフォーキャスト付きの「天気予報コンテンツ」を生成したり…、
Instagramの「ユーザー名」を入力するだけで、自動的にレスポンシブな画像ギャラリーも作れます！
ブログ記事の下などに「コメント機能」を追加しても面白いでしょう。
また、Webサービスなどに使えそうな「料金価格表」コンテンツなどもあります！
カスタマイズ性も高くて、中身のコンテンツ編集はもちろんのこと、PayPalと連携して課金システムを構築したり、「お試しサービス」を提供することも出来ます。
さらに、公開前のWebサービスなどで使えそうな「タイマーコンテンツ」も便利です。
カウントアニメーションやスタイルも編集できるし、カウントアップに変更も可能！
少し変わったコンテンツとして、ミニブログ的な使い方ができるコンテンツもあります！
ちょっとした記事を掲載するのであれば、十分に実用的でしょう。
他にも、SNSボタンやフィードを表示させたり、「FAQ」「ポップアップ」「グラフ」「ドキュメントファイルの埋め込み」「アンケート」…など、まだまだ紹介しきれないほど多彩なコンテンツを無料で作ることが可能です！
このようなコンテンツを自由に組み合わせれば、とてもユニークなWebページをデザインできるので非常にオススメです。
■JavaScript、HTML/CSS/Bootstrapを初心者でも無料で学べる動画講座公開中！
動画でプログラミングが学べる「paiza learning」（パイザ・ラーニング）に、無料でごらんいただける「HTML/CSS/Bootstrap入門編」および「JavaScript入門編」が追加されました！！
この講座では、paizaの人気美少女キャラクター霧島京子（cv:上間江望）が、かわいい声で優しく・楽しく・わかりやすくHTML/CSS/Bootstrap・JavaScriptの使い方を教えてくれます。「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。
■まとめ
「POWr」で生成できるコンテンツは随時追加されており、同時にバージョンアップも活発に行われています。
プロトタイプ作りにも最適ですし、「ちょっとあの機能が欲しい…」という時にもすぐに利用できて便利だと思います。
埋め込みタグを貼り付けるだけなので、国内のブログサービスやWordPressとも相性が良いので、ご興味ある方はぜひ気軽にトライしてみてください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
