paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

プログラミングなし・埋め込みタグのコピペだけで超簡単にWeb制作できる「POWr」の多機能ぶりに驚愕!

f:id:paiza:20160905140641j:plain
どうも、まさとらん(@0310lan)です。

Webサイトには「問い合わせフォーム」「ショップページ」「ギャラリー」「コメント」…など、さまざまなコンテンツが詰まっています。

これらのWebコンテンツをプログラミングすることなく、まるで「YouTube動画」を貼り付けるような感覚で構築できる無料サービスがあるのでご紹介しようと思います!

POWr

f:id:paiza:20160905140745j:plain
POWr」は、およそ50種以上のWebコンテンツが登録されており、「埋め込みタグ」をサイトに貼り付けるだけですぐに利用できるようになります。

細かいカスタマイズにも対応しており、1つずつのコンテンツを複数組み合わせて使うのも自由自在です。

■使い方!

それでは、実際に使いながらどのようサービスなのかを見ていきましょう! 今回は、サンプルとして「お問い合わせフォーム」を作ってみたいと思います。


まずは、サイトにアクセスして無償の「ユーザー登録」を済ませておきます。
f:id:paiza:20160905140820j:plain


登録後に、自分の「ダッシュボード(管理画面)」が表示されます。
f:id:paiza:20160905140828j:plain
ここから、さまざまなWebコンテンツを選択して「埋め込みタグ」を生成することができるようになります。


Webコンテンツを生成するには、新しくプラグインを作ります。
f:id:paiza:20160905140843j:plain


左側のカテゴリから「Forms」を選択!
f:id:paiza:20160905140851j:plain


その中にある「Contact Form」を選びましょう。
f:id:paiza:20160905140900j:plain


すると、フォームを細かくカスタマイズできる「設定」と、デザインを確認できる「プレビュー」が表示されます!
f:id:paiza:20160905140908j:plain


ゼロからフォームを作りたいので、「START FROM SCRATCH」からまずは自分のメールアドレスを設定します。
f:id:paiza:20160905140919j:plain
これにより、誰かがフォームへ入力して送信すると、ここで設定したメールアドレス宛に通知が届くようになります。


初めて設定するメールアドレスの場合は、すぐ下の「認証ボタン」をクリックするのを忘れないようにしましょう。
f:id:paiza:20160905140931j:plain
設定したメールアドレス宛に「認証確認メール」が届くので、メール内にあるボタンをクリックすれば自動的に利用可能になります。


画面下の「NEXT」ボタンをクリックしていくと、フォーム内の「テキスト」やデザインの「レイアウト」などを細かくカスタマイズすることが可能です。
f:id:paiza:20160905140942j:plain
サイトのデザインに合わせたフォームにするなど、自由な編集が自分好みにできるのが魅力的です。


テキストを日本語にして、少しだけデザインをいじればこんな感じになります。
f:id:paiza:20160905140954j:plain


最後に、今作ったプラグインを保存したら、「➀ Add to Site」ボタンをクリックして表示される「➁ 埋め込みタグ」をコピーしておきます。
f:id:paiza:20160905141004j:plain


コピーしたタグは、HTMLの好きな場所へ貼り付けるだけで準備完了です!
f:id:paiza:20160905141012j:plain


先ほど作った「フォーム」が見事に表示されたのが分かります!
f:id:paiza:20160905141019j:plain


ちなみに、画面には「編集ボタン」が表示されていると思いますが、これは自分のPCだけに表示されるもので、実際にサイトを公開すれば表示されなくなります。
f:id:paiza:20160905141029j:plain
また、この「編集ボタン」は、クリックすることで「フォーム」の中身をすぐに再編集できるようになっています。


送られてきた「問い合わせ内容」を確認するには、「ダッシュボード」にあるプラグイン「➀ 設定」から、「➁ Submissions」をクリックします。
f:id:paiza:20160905141041j:plain


すると、「フォーム」から受け取ったデータの一覧が、「ユーザー別」で表示されます!
f:id:paiza:20160905141328j:plain
このように、埋め込み用のタグを貼り付けるだけで、簡単に「お問い合わせフォーム」が完成するので、誰でも容易に扱えるのが特徴と言えるでしょう。

■まだまだある、こんなコンテンツ!

さて、これまで「フォーム」の作成事例を見てきましたが、「POWr」の素晴らしい点は同じような感覚で50種以上のコンテンツを生成できるところです!
f:id:paiza:20160905141412j:plain


例えば、自分のPayPalアカウントに紐付けて、「商品画像」と「価格」を入力するだけですぐに「ネットショップ」コンテンツを生成することも可能です!
f:id:paiza:20160905141423j:plain
こちらも当然ながら、埋め込み用のタグをHTMLに貼り付けるだけで、すぐに自分のサイトに表示させることが出来ます。


「モノ」の販売だけでなく、電子書籍などのデジタルコンテンツ用の販売ページも簡単に作れますよ!
f:id:paiza:20160905141446j:plain


ユニークなコンテンツとして、地域を指定するだけでフォーキャスト付きの「天気予報コンテンツ」を生成したり…、
f:id:paiza:20160905141455j:plain


Instagramの「ユーザー名」を入力するだけで、自動的にレスポンシブな画像ギャラリーも作れます!
f:id:paiza:20160905141518j:plain


ブログ記事の下などに「コメント機能」を追加しても面白いでしょう。
f:id:paiza:20160905141528j:plain


また、Webサービスなどに使えそうな「料金価格表」コンテンツなどもあります!
f:id:paiza:20160905141540j:plain
カスタマイズ性も高くて、中身のコンテンツ編集はもちろんのこと、PayPalと連携して課金システムを構築したり、「お試しサービス」を提供することも出来ます。


さらに、公開前のWebサービスなどで使えそうな「タイマーコンテンツ」も便利です。
f:id:paiza:20160905141559j:plain
カウントアニメーションやスタイルも編集できるし、カウントアップに変更も可能!


少し変わったコンテンツとして、ミニブログ的な使い方ができるコンテンツもあります!
f:id:paiza:20160905141627j:plain
ちょっとした記事を掲載するのであれば、十分に実用的でしょう。


他にも、SNSボタンやフィードを表示させたり、「FAQ」「ポップアップ」「グラフ」「ドキュメントファイルの埋め込み」「アンケート」…など、まだまだ紹介しきれないほど多彩なコンテンツを無料で作ることが可能です!

このようなコンテンツを自由に組み合わせれば、とてもユニークなWebページをデザインできるので非常にオススメです。

JavaScriptHTML/CSS/Bootstrapを初心者でも無料で学べる動画講座公開中!

f:id:paiza:20160830130051j:plain
動画でプログラミングが学べるpaiza learning(パイザ・ラーニング)に、無料でごらんいただけるHTML/CSS/Bootstrap入門編」および「JavaScript入門編が追加されました!!

この講座では、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくHTML/CSS/Bootstrap・JavaScriptの使い方を教えてくれます「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。

paiza.jp

■まとめ

POWr」で生成できるコンテンツは随時追加されており、同時にバージョンアップも活発に行われています。

プロトタイプ作りにも最適ですし、「ちょっとあの機能が欲しい…」という時にもすぐに利用できて便利だと思います。

埋め込みタグを貼り付けるだけなので、国内のブログサービスやWordPressとも相性が良いので、ご興味ある方はぜひ気軽にトライしてみてください!




paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編