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

アプギガトップ > Webサービス > わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
注目記事ピックアップ
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/08/18 19:50

わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!

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

最近は、Webサービスやサイトなどを制作する際に、ページの解析やユーザー行動の分析、チャットによるサポート、メールの配信…など、いろいろやることが増えてきました。

そこで、今回ご紹介するWebサービスを活用して、さまざまな「解析作業」や「機能追加」をお手軽に一元管理してみませんか。

【 StackPile 】
stackpile-02 HTMLファイルに、わずか1行のコードを追加するだけで、あとは専用の管理画面から多彩なWebサービスと簡単に連携することが出来るようになります。

必要が無くなったら、1クリックで「連携解除」も出来るので非常に便利ですよ!


使い方!
それでは、既存のWebページへ導入する手順を実際に使いながらご紹介しようと思います!


まずは、サイトにアクセスして「登録」ボタンをクリックします。
stackpile-03

すると、登録フォームが表示されます。
stackpile-04 ここで、「➀ユーザー名」「➁メールアドレス」「➂パスワード」を入力すればOK!(GitHubアカウントでも登録可能…)


次に、任意のプロジェクト名を入力します。
stackpile-05 これにより、例えばWebサイト別に管理を分けたりすることが可能になります。


続いて、1行のコードが発行されるので、これをコピーします。
stackpile-06

そして、WebページのHTMLファイル内にある「head要素」の最後に貼り付けます!
stackpile-07

あとは、コードを貼り付けたWebサイトのURLを入力して「VERIFY」ボタンをクリックすることで、ちゃんと認識できているかを確認できます。
stackpile-08 これで導入は完了です!


「Yes, let’s do it!」というリンクをクリックしてみましょう。

すると、管理画面が表示されて利用可能なWebサービスの一覧がチェックできます!
stackpile-09 Webページの解析に特化したサービスや、チャット機能、エラーチェック、マーケティングサポート、ユーザー行動の分析…など、とても多彩なサービスと連携できるのが分かります。


Webサービスを連携してみよう!
それでは、試しにいくつかのWebサービスを連携してみたいと思います。


例えば、さまざまな「シェアボタン」を生成してWebページに埋め込むことが出来る「AddThis」を連携してみます。
stackpile-10 (ユーザー登録は先に済ませておきましょう…)


「StackPile」の管理画面から、「AddThis」をクリックします。
stackpile-11

あとは、自分の「AddThis」アカウントの「ID番号」を入力して「ENABLE」ボタンをクリックすれば準備完了というお手軽さ!
stackpile-12

ちなみに、「ID番号」はAddThisの「General」ページに記載されているモノになります。(「ra-」は省略…)
stackpile-13

たったこれだけの作業で、例えば以下のようなサンプルサイトで…
stackpile-14

簡単に「シェアボタン」が表示されるわけです!
stackpile-15

さらに、チャット機能を簡単に追加できる「Drift」も連携してみましょう!
stackpile-16

こちらもID番号が必要なので、あらかじめDriftにて生成されたコードの中にある「ID」をコピーしておきます。
stackpile-17

あとは、IDを貼り付けて同じように「ENABLE」ボタンをクリックするだけで完了です!
stackpile-18

すると、ユーザーと対話可能な「チャット機能」が追加されているのが分かります。
stackpile-19 (Driftについての詳細はコチラ!)


Webページの解析でお馴染みの「Googleアナリティクス」も、トラッキングIDを入力するだけで適用完了です!
stackpile-20 このように、さまざまな便利サービスを必要なだけ連携できるうえ、ソースコードは一切変更しなくても良いのが大きな特徴と言えるでしょう。


ちなみに、連携した機能はクリック1発でいつでも「解除」可能です!
stackpile-21
その他、便利なサービスたち!
「StackPile」は、まだ新しいサービスですが、連携できるWebサービスはすでに60種近く存在します。


いずれもWeb制作&運用を強力にサポートしてくれるサービスばかりで、例えばユーザーへの「メール配信」をサポートしてくれる【 Aboardly 】があります。
stackpile-22 これは、「ユーザーが30日間ログインしてなかったら…」とか「ユーザー登録を済ませたら…」のように、独自のルール決めを簡単に作り、それに従って自動的にメールを配信してくれるようになります。


また、Web解析用に【 Crazy Egg 】も利用できます。
stackpile-23 主に、「ユーザー行動」について分析できるサービスになっており、ユーザーがどのように画面をスクロールしているかや、クリックした箇所、ユーザー属性などをヒートマップ状に可視化できるようになります。


他にも、Webページで利用しているJavaScriptのエラー可視化サービスとして【 TrackJS 】があります。
stackpile-24 いつ、どのようなエラーがどこで発生したのかをしっかりと記録してくれ、それによってどのようなユーザーに影響が出ているのかを自動で明確化してくれるサービスです。

早急な原因究明にも繋がるので、導入しておくと便利かと思います。

まだまだ優秀なサービスがたくさん存在しており、簡単に「A/Bテスト」を行うモノや、セキュリティを高めてくれるものなど、連携できるサービスを眺めているだけでも勉強になりますよ。


まとめ
最近は、特定の機能に特化したサービスが増えいていることもあり、便利な機能を持ったサービスをどんどん追加していると、いつの間にかソースコードが複雑化したり管理が大変になっていきます。

そういう意味でも「StackPile」を利用する意味は少なくないのではないでしょうか。

また、連携できるサービスは随時増えていくことになるので、今後の動向にもチェックしておきたいところ。

Webサービスやサイトを最小限のコードでパワーアップしたい方は、ぜひ一度トライしてみることをオススメ致します!


<参考>
「StackPile」公式サイト


written by まさとらん(@0310lan

まさとらん

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

twitter:0310lan

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

ページトップへ戻る