【NoCode】Bubbleでの日時の表示を設置してみよう
こんにちは。NoCode Ninjaです。
今回は、「時刻の表示」について紹介したいと思います。
弊サイト、NoCodeBankには「求人募集」のベージがあります。
こちらの実装にあたって考えたのは、投稿の際の日時の表示が必要だということでした。
そして、「何か良い日時表示のプラグインは無いかな～」と探したのですが、あまりイメージに合うものが無く・・
元々Bubbleに標準で搭載されている「Date/Time Picker」も試してみました。
が、何か合わない・・デザインの問題なのか根本的に違うな、と感じまして。
プラグインも引き続き探しますがこれ！というものは見つかりません。
悩みました。。
そこで、ふと思いつきました。
「Text」が使えるんじゃないか？と。
「Text」をあれしてこれして・・と考えて、実行しました。
すると、すごくしっくりはまったのです！
皆さん、日時を表示させる時は「Text」がオススメです！
と結論からいってしまいましたが、今回はこちらを紹介します。
それでは、いってみましょう。
日時を設定する
現在の日時
現在の日時をTextで設置する場合は・・
まず「Text」エレメントを選択。
任意の場所に貼り付けます。
「Edit me...」のところで「Insert Dynamic Data」をクリック。
ここに
「Current date/time」がありますのでこれを選択。
なんと！これだけなのです。
あとはStyleをお好みで調整。
シンプルですが、かっこいいですよね。
ちなみにこちらの表示のバリエーションは無いようです。
あくまで「Current date/time」という設定しか出来ないですのであしからず。。
投稿日時を掲載
今度は、投稿した日時の掲載です。
DBから値を取り出す流れになります。
「Text」を置いて設定は以下です。
Groupの上にTextを置いているので「Parent group」となっています。
「CustomerForRecruit」というのはデータベースでのType名です。
ちなみに「Creation Date」は「Modified Date」とすると、更新日時になりますのでこちらもオススメです。
では、このGroupの「Parent group」はどうなっているでしょうか。
こちらも実は、「Repeating Group」の上に乗せているのでこのような表記になります。
Repeating Groupの設定を見てみます。
データベースからの呼び出しをシンプルに設定しています。
親から子への順番的には
「CustomerForRecruit」というTypeを設定→Typeの中の値を取り出す→具体的な値を指定し（Creation Date）、「Text」として設置。
という流れになっています。
こんな感じで、弊サイトNoCodeBankは運営できております。
是非、投稿よろしくお願いします！
ということで、締まりました。（？）
まとめ
いかがだったでしょうか。
日時の設定に「Text」を使うというのは何とも意外だったと思いますが、
シンプルイズベストの力を思い知らされます。
投稿日時（Repeating Group）の部分は少し複雑だったかもしれませんので、またの機会に詳しく取り上げる予定です。
お楽しみに！
それでは、また！
【Bubble】AddToAnyプラグイン＋LINE公式でシェアボタンを設置しよう
こんにちは。NoCode Ninjaです。
今回は、実装するととても便利な「AddToAny」（シェアボタン）について紹介します。
AddToAnyは１００種類以上ものシェアボタンを網羅した強力なPluginです。
上手に使うと非常に便利です。
少し＋αも加えつつ、より便利な設定にしてみましょう、
それでは、いってみましょう。
AddToAnyシェアボタンを実装する
Pluginを追加する
まずBubbleのAppを開き、左側の「Plugin」タブから「AddToAny」Pluginをインストール。
このPluginを使って、シェアボタンを実装していきます。
設置する
「Design」タブに戻ると左側に「Share button」Element
が追加されていることが確認できます。
それを右側の任意の場所に設置しましょう。
チェックを入れたところのButtonが設置されるという極めてシンプルな仕組みです。
この画面では「Email」「Facebook」「Twitter」がそれぞれ設置されています。
その他チェックマークを入れられるところは同じ要領で追加できます。
では、それ以外はどうするのでしょうか。
画像のEdit画面で「Add a generic button for more services」にチェックが入っていることに注目してください。
そして、並んだButtonの一番右に「＋」マークの入った青色Buttonが設置されています。
こちらをクリックしますと、沢山のButtonが出てきます。
日本では超メジャーなLINEですが、海外だと沢山あるうちの一つになってしまうのですね・・同じ画面にMixiもあります。
こちらの設定をしておけばかなりの数のシェアボタンを網羅出来ます。
設定する
それでは、もう一度こちらの画面を表示。
設定しましょう。
「URL to share」で直接シェア希望のURLを入力するか、「Insert dynamic data」でデータベースの値を直接入れられます。
「Page name」も同様です。
「Overwrite icon colors」で任意の色に変えられます。
が、その際は一色のみ統一のようです。
これで設定は以上です。非常にシンプルで優れていますね。
アレンジ
これで終了でも良いのですが、少しだけ問題があるとしたら。
先ほどの「Add a generic button for more services」の中にあるButton群は表に取り出すことはできません。
ということは、毎回一覧を表示して選択が必要です。
この中にLINEのスタンプがあります。
日本向けのサービスを作るのなら、LINEのシェアボタンは欠かせないところですので・・
少し応用してみましょう。
こちらは、別ルートで設置して並べる仕様にしましょう。
LINEシェアボタン作成
下記サイトにアクセス。
こちらで、サイトのURLを入力し、お好みの仕様を選択します。
注意するべきポイントですが、開発段階での「?debug_mode=true」を除いたURLを入力します。
本番環境になったらURLをまた変更しないといけないので、注意です。
中のURLを変えてあげればOKです。
ボタンサイズは「小」のほうがAddToAnyのものと相性がいいです。
すると、コードが表示されますのでコピー。
Bubbleのサイトへ戻ります。
LINEシェアボタン設置
設置には、HTML Elementを使用します。
AddToAny群の右に寄り添うように設置し・・
画像のように、<i></i>の間に貼り付けます。
成功しました！
ややサイズが違いますがボタンそのもののサイズは変えられないのでこれが精一杯でしょうか。
一番端に持って行くとまだ目立ちにくいです。
ちなみにPreviewの時LINEボタンは何故か不安定で、表示されない時がありますが時間を置いたりPreviewを二回押したりすると表示が復活します。謎です。笑
そして、AddToAnyとLINEの二つをGroup化してあげましょう。
上記のような感じになった最終的なUI設置はこうなりました。
条件によって異なると思いますが、一つの参考にしてみてください。
ともかく、これで設置完了です！
まとめ
いかがだったでしょうか。TwitterやFacebookなど既に独立して共有ボタンは作れるものの、網羅してあるAddToAnyも上手に使えば役に立ちます。
是非、試してみてくださいね！
それでは、また！
【Bubble】「上に戻る」動きをするScroll Iconを設置してみよう（Only when～について）
こんにちは。NoCode Ninjaです。
今回は、「上に戻るボタン」の設置方法を紹介します。
弊サイトNoCodeBankにて新しく設置いたしました。
是非ご覧になってください。
必ずどこかのサイトで目にしたことがあるかと思われる、ワンクリックで一番上まで戻れるこちらのIconです。
こちらですが、ページにアクセスした時（一番上に戻った時）では必要がないのである程度下に進んだ以降で表示させたいなと思い、ちょっと条件を付けて設置してみました。
結果、やや細かい設定が必要になりましたのでこちらのブログにて紹介します。
それでは、いってみましょう。
要件定義
右下にそれっぽいアイコンを設置→アイコンはある程度下に行くまで（上に戻った時も）表示させない→表示させたら常に固定→アイコンをクリックすると一番上にスクロールさせる
このように設定するとうまくいきそうです。
Elementを設置
Floating Groupを作成
まずこれらを実現するには、スクロールさせても常に同じ位置に表示させる「Floating Group」を使います。
画面右下に設置します。
ここで大事なポイントですが、「This element is visible on page load」のチェックを外しましょう。
あとは特別難しいことはありません。
Floating Group内にIconを作成
次に、Floating Group内にIconを作成します。Floating Groupに乗せる感じですね。
うまく乗せるコツは、Iconをどこかで作ってドラッグしてFloating Groupに乗せようとするときに「Floating Group」の枠が赤く表示されますので要確認です。（仕様の為スクショが上手く撮れませんのでTextにて）
上手く乗りましたら、左上のElement treeにて下記のような表示になります。
ご確認ください♪
そして、IconのEdit画面です。
Iconは種類がたくさんありますので、お気に入りのものを選びます。
Colorはそれぞれ合ったものを選びましょう。
あとはそこまで特別な設定はありませんが、
こちらは「This element is visible on page load」にチェックをいれます。
つまり、Iconそのものは常に表示させておくが最終的な目に見える表示はFloating Groupのほうでコントロールするというわけです。
これでElementの設定は終了しました。
続いて、Workflowに移ります。
Workflowを設定
続いて、Workflowの設定です。
上に戻る
この設定ですが、「単純にindexにscrollする」という設定で大丈夫です。
Iconの「Start/Edit Workflow」から「Element Actions」「Scroll to」で以下のように設定しましょう。シンプルにこれでOKです。
Do when condition is true（> 100）
「100px以上の時にFadeInを実行する」の設定です。
「Click here to add an event」をクリック。
「Do when condition is true」を選択します。
Only whenにて「スクロールが100px以上の時に」と設定します。
そして、以下Step1です。
「スクロールが100px以上の時に」→「FadeInを実行します」というようにつながりますね。
Animateは、Element Actionsにて選択できます。
これで1つ完了。
Do when condition is true（< 100）
続いてもう一つ、「100px以下の時にFadeOutを実行する」の設定です。
同じように「Click here to add an event」をクリック。
「Do when condition is true」を選択します。
そして、値を以下のように設定します。
Only whenにて「スクロールが100px以下の時に」と設定しました。
そして、以下Step1です。
「スクロールが100px以下の時に」→「FadeOutを実行します」というようにつながりますね。
Animateは、Element Actionsにて選択できます。
これで、Workflow完成です。
プレビュー
それでは実際に見てみましょう。
しっかり動きましたね！
大成功です♪
まとめ
以上、「上に戻る」Iconの設置方法でした。
設置方法はシンプルですが、Only whenなどの設定が初めての方には馴染みがなく戸惑ったかもしれません。
ですがここまで細かく設定できるのもまたBubbleの魅力の一つです。
慣れればどうってことはないので、是非ご自身でも試してみてくださいね♪
それでは、また！
【Bubble】Twitterログイン機能の設定をしてみよう ４、コールバックURLについて
こんにちは。NoCode Ninjaです。
今回も前回に引き続き、「Twitterログイン機能の設定をしてみよう」です。
前回まではこちら
前回でTwitterログインに成功しましたので、最低限の機能面は前回まででOKだと思います。
ただ設置方法として、「ヘッダーにログイン機能を設ける」パターンは実際のところ多いので、こういう時どうすればいいのか・・で悩むと思います。
何故かというと前回の通り、「ログインする可能性のあるページ（コールバックURL）は全て申請せよ」というのがTwitterの方針です。
ほぼ全ページで表示されているであろうヘッダーにログイン機能を置くと、当然すべてのページに適用されてしまうのです。
ヘッダー単体そのものにURLが存在すれば一発解決なのですが、当然そんなはずもなく。。
そして、そのコールバックURLの設定数は１０個まで・・仮に１０個以上OKだったとしても、全て書くのは非効率ですし気の遠くなるような単純作業です。
じゃぁ、どうするか。今回はここに焦点を絞って紹介します。
なお、この記事はノーコードラボさんの記事を参考にしています。
（元々筆者がノーコードラボさんに相談を持ち掛けたところから話が始まりました。）
今回許可を得て掲載していますので、是非ノーコードラボさんの記事も読んだ上で当ブログも読むとより確実でお勧めです。
それでは、いってみましょう。
コールバックURLとは
ログインする可能性のあるページのこと
Twitterに対して情報を「コール（送る）」して「バック（返してもらう）」してログイン完了。という流れなので、コールバック。それを行うページ（URL）のことです。
そのURLをあらかじめ申請しないといけません。
では、ヘッダーなどの複数ページに適用される場合はどうするか。
Twitterログイン専用のページを１か所作ると、うまくいきます。
ログインする時は、全てそこのページに一度ジャンプする構造を作ればその専用ページが１つの受け皿となってログイン処理を実行するという仕組みです。
実装する
要件定義
ログインボタンを押す→ログイン専用のページにジャンプ→ページにアクセスするとすぐにTwitterログインを実行→ログインしたらText「ログインしました。しばらくするとトップへ自動的に戻ります。」という文言を表示させる→しばらくするとトップページに戻る
このように定義するとうまくいきそうです。
では、進めてみましょう。
ログイン専用ページを作る
それでは、ページを作ります。
まずは前回試したこのページがあります。
こちらのページをそのままコピーしちゃいましょう。
ページの何もないところを右クリック。「Clone this page」をクリックして、ページをコピーします。
Page nameは何でもOKなのですが、「Twitterlogin」とでもしておきます。
そのままCREATEを押しましょう。
するとコピー後のページが表示されます。
Element
Twitterアイコンを選択しDeleteで消します。
完全な空白ページになりましたね。
そして、元々のページのコピーなのでこのTextがありました。
「あれ？ない！？」と思ったそこのアナタ。左上の「Elements tree」にちゃんと隠れていますよ♪
この「Text ログインしました。し...」をクリックするとちゃんと出てきます。
無くてビックリしましたよね（笑）
この文言を書き換えましょう。
「ログインしました。しばらくするとトップへ自動的に戻ります。」
とします。
ドラッグして、サイズも広げます。
良い感じですね。
それでは、もう一度コピー前のページ（index）に戻ります。
Workflowの変更をしましょう。
Workflow（index）
indexのWorkflowから・・
黒の「When～」の右下のごみ箱ボタンをクリックし、思い切って全削除です。
進化の為には、気持ちよく消してゆきましょう。
さあそのまま、「Click here to add an event...」をクリック。
「Elements」「An element is clicked」で進みます。
このパターンは初めてかもしれませんが、各ElementのEdit欄から「Start/Edit Workflow」で進むのと同じ意味になります。
Workflow画面から設定するのか、ElementのEdit欄から設定するのかの違いだけになります。どちらも良く使うので覚えておくと便利です。
そして、以下の画面のように設定します。
これで「When～」は設定完了です。iconをクリックすると～ということです。
そして、「Click here～」をクリックし、「Navigation」「Go to page...」をクリックします。
設定を以下の画面のようにしましょう。
iconをクリックすると、twitterloginに行くというWorkflowでひとまず完成です。
Workflow（twitterlogin）
それでは続いて、左上の「page」で「twitterlogin」へ移動します。
Workflowを開き、「Click here～」から
「General」「Page is loaded」をクリック。
そして下の「Click here to add an action」をクリックし、「Signup/login with a social network」をクリック。
「Twitter」を選択しましょう。
そして、Step2を設定します。
すぐ右の「Click here to add an action」で、「Element Actions」「Animate」を選択しましょう。
設定は以下の画面の通りです。
前回とほぼ一緒です。
そして、Step3。
最後に、Step4。indexへ戻る動作です。
前回の内容とほとんど同じですね。
さあ、これで完了しました。
あと忘れてはいけないのが一点、今回の目玉です。
Twitter側でコールバックURLを指定しましょう。
コールバックURLを指定する
Twitter Developer
コールバックURL設定ページへジャンプします。
DeveloperトップからAppを開き、Detailまで進みます。
右側青色Button「Edit」を押し、下に進むとCallback URLsがあります。
「＋add another」をクリック。
一つURLを入れられるinputが出てきますので、先ほどの「twitterlogin」と名付けたページのURLをそのままコピペします。
ただし、ここで重要な注意点。
クエリ文字列「?debug_mode=true」は抜いてください。
クエリ文字列は読み取ってくれません。
これで下の青色Button「Save」を押し、完了です！
プレビュー
確認してみましょう。
うまくいっています！
ページを一つ経由するので重い時があるかもしれませんが、今のところ軽快です♪
まとめ
以上、コールバックURLについて紹介しました。
Twitterログインシリーズはこれにて最終回となりますが、全体を通して結構複雑に感じられたのではないでしょうか。
それだけセキュリティを強化しているTwitterの姿勢の現れとも言えるかもしれません。
またコールバックURLは2018年6月以前は汎用１つで大丈夫だったようで、それ以降はこのように厳密に設定が必要になったとのこと。
この時期に突如色んなサイトでTwitterログインのエラーが頻発していたことを覚えている方がいらっしゃるかもしれませんが、どうやらこちらが原因だったようです。
当時混乱したでしょうね・・。
ただ、しっかり理解していれば怖くないのできっちり設定をしておきましょう。
それでは、また！
【Bubble】Twitterログイン機能の設定をしてみよう ３、Twitterログインを実装しよう
こんにちは。NoCodeNinjaです。
今回も前回に引き続き、「Twitterログイン機能の設定をしてみよう」です。
前回まではこちら
今回はいよいよ「３、Twitterログインを実装しよう」です。
ここまで来ていたら難関は突破出来ているので、自信を持って進めていきましょう！
設定面で少し細々としていますが、概念を確認しながらやってみれば大丈夫です。
それでは、いってみましょう。
APIを入力してログイン連携を完成させる
取得したAPIの確認
実は前回までの時点で、APIの取得は完了しています。
確認してみましょう。
まずはDeveloper登録完了後からのTopページです。
前回と同じく右上に登録した名前と、Menuボタンがありますのでhovor（ポインタを乗せる）すると項目が出てきます。
「Apps」をクリックしましょう。
前回と違って、登録したAppが表示されていることと思います。
その右側の「Details」をクリック。
すると、「App detaiils」が上部のタブと共に表示されるので、上部タブ「Key and tokens」をクリック。
以下の画面へと進みます。
API key：
API secret key：
それぞれ値が表示されていますでしょうか。
確認しましたら、こちらをBubbleと連携していきましょう。
Bubble側の設定
Pluginをダウンロード
BubbleのAppを開きましょう。
左側「Plugin」タブで進み、右上青色Button「＋ Add plugins」をクリック。
「Twitter」を検索すると出てきますので、Installしましょう。
下の青色Buttonを押し、「Done」を押します。
Installed Plugin（自分のインストールしたプラグイン一覧）に戻り、「Twitter」を見てみましょう。
こちらに先の
API key：＝Consumer key
API secret key：＝Consumer secret
を入力します。
「- dev」は開発段階でのバージョンを記入できる欄になっていますので、Consumer keyと- dev、Consumer secret keyと-devは同じものを記入します。
これで、連携が完了となりました。
実際に、ログイン機能を使ってみましょう。
実装する
それでは、実際にTwitterログインを使っていきましょう。
要件定義
最低限でいきます。
ただ、せっかくなんで
という仕様にしてみます。
各Elementを設置
設置するElementは２つ。「icon」と「text」です。
Twitterアイコンについては、今回はiconエレメントを使います。
左側の「Visual elements」から「icon」を選択し、右側の任意の位置に貼り付けます。
値は以下のように設定しましょう。
iconは「Choose an icon」をクリックすると検索できるので「twitter」と入力すると選べます。
二種類ありますので、お好みで。
続いてTextを設置。
値は以下のように設定します。
ポイントは「This element is visible on page load」のチェックを外すことです。
ログイン後に表示させたいので、最初からあっては困りますよね。
Elementはこれで完了です。
Workflowを設定
続いて、icon elementから「Start/Edit workflow」を選択します。
「Account」から「Signup/login with a social network」を選択。
「Oauth provider」で「Twitter」を選択。
これでicon完了です。
続いて、Step2は「Element Action」「Animate」
値は以下のように設定。
「Define a custom duration」にチェックを入れると表示までの時間を設定できるので
Duration（ms）「3000」に設定。
続いて、Step3は「Navigation」「Add a pause before next action」
こちらは次のFadeoutまでにしばらく表示させておくのに設定します。
値は以下のように設定。
Pause length(ms)（止める長さ）は「3000」くらいがちょうどいいのではと思います。
続いて、Step4は「Element Actions」「Animate」
値は以下のように設定します。
これで、「ログインしました」がフェードアウトします。
以上でWorkfllowも完成しました！
こうなっていればOKです。
それでは、確認してみましょう。
プレビュー
Previewを押すと画面が表示されるので、iconをクリック。
バッチリいってます！
これでTwitterログイン設置完了ですね♪
まとめ
長くにわたって紹介しましたTwitterログインでしたが、とうとう実装まで紹介出来ました。
一から何も見ずにやるのは結構大変なので、是非参考にしながらやってみてください。
それでは、また！
【Bubble】Twitterログイン機能の設定をしてみよう ２、App登録をしてAPIを取得する
こんにちは。NoCode Ninjaです。
今回は前回に引き続き「Twitterログイン機能の設定をしてみよう」です。
前回はこちら
今回は二回目「２、App登録をしてAPIを取得する」です。
前回は全て英語で記述などハードルが高く感じる方も多かったのではないでしょうか。
今回も、英語での読解＆記述はあります。
ただ前回と比べてさほど多くないのと前回である程度の感じは掴めたと思いますので、良いイメージのまま臨めるのではないでしょうか。
そうでない方も引き続きこのブログを見ながら、一緒にやっていきましょう。
それでは、いってみましょう。
app登録をする
まずは前回のDeveloper登録完了後からのTopページです。
この画面が見えていますね。
右上に登録した名前と、Menuボタンがありますのでhovor（ポインタを乗せる）すると項目が出てきます。
「Apps」をクリックしましょう。
すると、以下の画面へ進みます。
右側青色Buttonの「Create an app」をクリック。
以下の画面に進みます。
こちらを順番に記入していきます。
App name
Webサイトやアプリの名前を入れましょう。（例：NoCodeBank）
Application description
Webサイトやアプリについての説明が必要です。
ログイン時の認証画面に表示されますので、日本語（英語）で自分のプロダクトの説明を入れましょう。
Website URL
こちらはそのままです。URLを入力します。
下にあるチェックボックスはTwitterログインの可否になりますので、必ずチェックを入れましょう。
Callback URLs
こちらはコールバックURLといって、ざっくり言うとTwitterログインを行うページを記入します。
但しここは結構厳しく、可能性のある全てのページを記入しなければいけません。
例えば汎用性のある場所（ヘッダーフッターなど）にTwitterログインを置いてしまうと、ヘッダーフッターのある全てのページ（ようするにサイト内ほぼ全部）を書かなくてはいけません。
しかもURLは最大１０までなので、超える場合は別の方法を考えなくてはいけません。
（NoCodeでは出来ない方法も含まれるので、またの機会に紹介します）
Terms of Service URL
いわゆる利用規約のURLです。
そのまま貼り付けましょう。
Privacy policy URL
いわゆるプライバシーポリシーのURLです。
そのまま貼り付けましょう。
Organization name
いわゆる組織（会社）で作ったプロダクトの場合、その名前を記入しましょう。
個人の場合は空欄で大丈夫です。
Organization website URL
上と同じで、組織（会社）で作ったプロダクトの場合、そのURLを記入しましょう。
個人の場合は空欄で大丈夫です。
Tell us how this app will be used
登録しようとしているWebサイトやアプリをどのように使い、利用者に何をもたらすのかをTwitter側に説明する欄です。こちらは公開されません。
100文字以上の記述が必要です。こちらは英語が必須だと思いますが、もしかしたら日本語でも大丈夫かもしれません。
色々調べているとTwitterにはなんだかんだ日本語が理解できるスタッフがいる可能性が高いのですが、その辺りは自己責任でお願いします。
出来る限りのアピールをしましょう（笑）
記入は以上になります。
下の青色Button「create」を押しましょう。
すると、以下の画面へ進みます。
- 政治、宗教、性的な表現などをデータに使用しないこと
- 政治利用や監視目的にしないこと
- スパム行為やオートメーションを使用しないこと
が書いてあります。
普通に利用する分には問題ないので、「Create」を押します。
さあ、これでapp登録は完了です！
確認する
それでは、出来上がったページを見てみましょう。
最初のようにAppから、画像のようなページ（写真は上部のみ）に進みます。
App Iconはクリックして設定しましょう。
その下に記入したapp登録の内容が記載されていることが確認できます。
そして「Keys and tokens」タブをクリックすると、API関連の表示がされていることが確認できます。
これらの値を使って、次回以降Twitterログインを設定していきます。
ここまで来たら、もうすぐですよ。
それでは、また！
【Bubble】Twitterログイン機能の設定をしてみよう １、Twitter Developerに登録する
こんにちは。NoCode Ninjaです。
今回は、Twitterログインについて紹介します。
今や多くのサイトが採用しているTwitterログインですが、
当サイトNoCodeBankでも採用しています。
Twitterログインはいわゆる他のソーシャルログインに比べると少し複雑で厄介です。
APIを取得してBubble側と連携しなければならないのは他のソーシャルログインと変わらず同じなのですが、Twitterの場合は申請は全て英語で行わなければならず、自分のサイトの説明や申請理由などを一定の文字数以上で説明し、審査に通らなければいけないからです。
そしてもちろんその手続き用のサイトも全て英語。ハッ、ハードル・・・。
しかし、このサイトを見ながら是非一緒にTwitterログイン機能を設定、実装までやってみましょう。
諦めなければ、必ず出来ます！
まずは一回目、「Twitter Developerに登録する」です。
それでは、いってみましょう。
Twitter Developer登録
サイトにアクセス
まずは、こちらのページへアクセスしましょう。
こちらのページで申請を行います。
画面右上の「Apply」をクリック。
すると以下の画面に進みますので、紫色のButton「Apply for a developer account」をクリックします。
設定
以下の画面に進みます。
各自に合わせた目的を選択しましょう。
筆者は上の「Professional」から「Building consumer products」を選択しています。
選択後、右下の青色「Next」Buttonを押すと、次は以下のアカウント確認画面へ進みます。
上から順番に
- 申請アカウント情報です。青色文字「Switch@username」「Create new@username」で申請アカウントを選択できます。電話番号を登録していないアカウントでしたら登録が必要ですので、「ここで登録してください」と赤色で文字が出てきます。そしてTwitterの電話番号設定のリンクも出てきますので、そちらから設定しましょう。
- 個人アカウントかチームアカウントかを選択できます。画像では「Indivisual developer account（個人アカウント）」となっており、青色文字「Switch～」から変更できます。
- アカウント用のEmailアドレス設定です。変更する場合はアドレス下の「Change email address」から変更しましょう。
- 「国名」を選択します。日本でしたら「Japan」。続いて「名前」を指定します。ここはアカウント名で問題ないです。すぐ下は、TwitterAPI関連のメールニュースを受け取るかのチェックです。欲しければチェック、不要ならそのままで進めます。
入力したら、右下青色Buttonの「Next」で進みます。
各種入力フォーム
さあ、ここからが難関です。
各種入力フォームにて、Twitter側の質問に対して全て英語で記述しなくてはなりません（最低文字数も指定があります）。
フォームの内容はここでテンプレートを用意するわけにもいかないのでご自身で作っていただくかGoogle翻訳などを上手にお使いください。
それでは、上から順番にいきます。
- TwitterデータやAPIをどのように使うか？という質問です。200文字以上で記入します。（例：サイトへのアクセスをより便利にして～云々）
- Twitterデータアナライズを使うか否かのチェックです。「Yes」の場合にはどのようにアナライズを使うのかの詳細を100文字以上で記入します。（例：アナライズを使うことでよりサイトの品質向上に役立てたい～云々）
- ツイート、リツイート、いいね、フォロー、ダイレクトメッセージなどを使うか否かのチェックです。「Yes」の場合にはどういう風にこれらを使っていくかの詳細を100文字以上で記入します。（例：これらの機能を備えることでよりサイトが使いやすくなり、ユーザー目線でサイトを作る～云々）
- Twitter以外のところでTweetやデータ関連を表示させるか否かのチェックです。「Yes」の場合にはどこでどのように表示させるかの詳細を100文字以上で記入します。（例：自分のサイトでツイートやアップロードしたファイルを発信することで多くの人に楽しんでもらいたい～云々）
- 使用するプロダクトで政府関係機関に関連するところが情報を得るか否かのチェックです（学校など教育機関は除く）。「Yes」の場合には100文字以上で政府関係機関のリストの詳細を記入します。（ここは筆者はNoを選択しましたので具体例は不明。官公庁など？）
以上、記入しましたら右下の青色Buttonで「Next」をクリックします。
確認
すると、以下の画面へ進みます。
Twitter Developerの同意書面となります。
結構長いです・・。
チェックボックスにチェックを入れ、右下の青色「Submit Application」をクリックします。
すると、以下の画面へ進みます。
ここで、指定のメールアドレスへ確認メールを送ったという記述があるので、メールを確認しましょう。
以下のようなメールが来ています。
「Confirm your email」をクリックしましょう。
すると、以下の画面へ進みます。
これでようやくTwitter Developerへの登録が完了しました！
Twitter Developerの各種ページが使えるようになりました。
全て英語での読解や記述だったので、慣れないとなかなか難しいですね。
次回から、API取得のための設定を進めていきます。
それでは、また！
