【Bubble】HTMLエレメントでTwitterの埋め込みやボタンを設置しよう
こんにちは。NoCode Ninjaです。
今回はHTMLエレメントでTwitterの埋め込みやボタンを設置する方法を紹介します。
色々な種類がTwitter側であらかじめ用意されているので、それらをほぼ同じ段取りで設置する形です。
難しいようで意外と簡単です。しかも、効果は高いのでおすすめですよ！
それでは、いってみましょう。
設置方法
まず、下記のサイトにアクセス。
すると、この画面が出てきます。
下にスクロールすると・・・各メニューが出てきます。
左から「ツイートの埋め込み」「タイムラインの埋め込み」「各種ボタン」です。
「ツイートの埋め込み」「タイムラインの埋め込み」
この二つについてはクリックするとこのような表示が出てきます。
そしてBubbleのページへ行き、左のVisual Elementの「HTML」を選んで任意の場所に置きます。
あらかじめ<i></i>タグが置かれていますので、コピーしたコードを下記のように間に貼り付けます。
<i>ここに貼り付け</i>
Previewしてみましょう。
うまくいきましたね♪
「Display as iframe」はチェックを入れるとスクロールバーが付きますのでタイムラインにはオススメです。
「ボタン」
クリックするとこの画面が出てきます。
左から「シェアボタン」「フォローボタン」「メンションボタン」「ハッシュタグボタン」「メッセージボタン」の順に並んでいます。
段取りはタイムラインの時と同じです。各種ボタンを選び必要なページを入力するとURLが生成されますのでコピー、BubbleのHTMLエレメントに同じやり方で貼り付けで完了です。
「Display as iframe」はチェックを外しましょう。
設置完了です。
便利なボタンやタイムラインが、簡単に設置できますね♪
様々な活用ができるので是非取り入れることをお勧めします。
実際に筆者のサイトNoCodeBankにて埋め込みやShareボタンは設置しているのですが、今回を機に各種ボタンを追加で設置してみました。
その際に応用したやり方も思いついたので、次回ご紹介します。
最後に、筆者のサイトNoCodeBankです。NoCoderの方々、投稿何卒よろしくお願いいたします・・・！
それでは、また！
No Codeプロダクトを紹介する新サイト、立ち上げました！
こんにちは。NoCode Ninjaです。
Twitterでもお伝えさせていただきましたが、今回NoCodeツール【Bubble】を使って作った「NoCodeBank」というサイトを立ち上げました。
https://nocodebank.bubbleapps.io
三方良し
- No Coderの方々が作ったプロダクトを紹介＆宣伝
- No Codeを知らない方々にも認知度を高める
- 投稿されたプロダクトにも、NoCodeBankにもアクセスが増える
- アクセスしてくれるユーザーにとっても新しい発見や知見が得られる
- そうして盛り上がってきてプロダクトに興味を持った企業などが、企画した（企画を考えている）内容を各No Coderに発注することでビジネスの機会も生まれ、企業側もコスト削減＆No Coder側も仕事が増える
- イベント企画などで業界活性化
- その他可能性盛りだくさん
こんな流れになればいいなと思っていまして、関わった方々三方良しのサイトになることを目指しています。
まだまだ未熟で至らないところが多いですが、是非ご活用ください。
こんなことが出来る、このツールのこういうところはこうだった、など情報交換の場所にもしたいと考えておりまして、徐々にブラッシュアップしていく予定です。
機能
プロダクト投稿
これから様々なNo Codeプロダクトは出来ていくと思いますので、それらを投稿して色んな方々に見てもらえるようにしました。
もちろんずっと残りますので、量が増えてくればカテゴリ分けをしたりアクセス数ランキングを作ってみたり充実させていきます。
たくさん載せてもらって、アクセス数が増えて盛り上がっていけば何よりです。
ログイン／ログアウト（Twitter連携）
複数プロダクトを投稿するときも出来るだけ入力を重複しない仕様にしました。
またプロフィールやアイコンなどもTwitter連携でそのまま載せられるようにし、No Coderとして認知されることで広がる可能性を作れるのではないかと思います。
求人
今のやり方を一度見直したい、新しい企画をNo Codeで試してみたい。
そう思っていただける企業さまが投稿でき、それを見た全国のNo Coderの方々とマッチングする。No Codeに挑戦する人口も増え、活性化のきっかけとなる。
No Codeを使ったビジネス参画のチャンスになりますし、お互いにとってメリットがあることを考えましたので是非ご活用いただければと思います。
その他、色々と機能を増やしていく予定ですので使ってみた感想など聞かせていただければ大変喜びます。
サイトを作ってみて
先述しましたがこのサイト自体もNo Codeツール、当ブログで毎回紹介している「Bubble」を使って作りました。
他のサイトを色々参考にしながら３週間ほどかかりましたが、前回のようにミラーサイトではないので分かりきったことではあったものの、正直言って試行錯誤の連続でした（笑）
今も修正しないといけないことが沢山ありますし、それはこれからも続くのですが
デザインのセンス、UI構成能力、確かな要件定義、全体をまとめ上げる俯瞰力、など色々な能力が必要であるというのは作ってみて改めて感じるところです。
No Codeについては「コードを書かなくてもいいところをうまく効率化してまとめ上げる」という一つの概念も間違いではないと思いますし、やはり可能性が広がるツールです。
僕自身もまだまだ色んなプロダクト製作を通じて成長したい思いしかありません。
また今回製作を通じて様々な機能を実験し実装し、色々と学ぶことができましたのでこれからブログを通じてアウトプットしていく予定です。
情報が少ないのもあって何回もハマってしまいましたので（笑）
同じ経験をする人が出来るだけ少なくなりますように、情報を残していきたいなと思っています。
是非ご活用いただけましたら幸いです。
それでは、また！
【Bubble】英語を身につけるために有効な「睡眠学習」について
こんにちは。NoCode Ninjaです。
今回はいつもと少し趣向を変えて、英語を身につけるために有効かもしれない「睡眠学習」についてお話してみたいと思います。
Bubbleをはじめ現在あるNo Codeツールがほとんど全て英語のためこの題目は避けて通れませんし、興味を持つ方も多いかなと思いまして取り上げてみました。
例えば結構昔の記事ですが、こちら。
https://wired.jp/2014/08/15/learn-languages-while-sleeping/
実際Bubbleを学習していてほぼ全編英語だったり、Twitter Developerは全部英語で申請しなきゃならなかったりでむちゃくちゃ大事ですよね。
学習方法も勿論大事な中で、こういう視点も面白いと思います。
また、こんな記事もあったりします。
https://gigazine.net/news/20190205-vocabulary-sleep/
昔から体感として
「寝る直前と起きた直後のむにゃむにゃした状態が一番理解出来るし理解が進むなぁ」
と思うことがあったのですが、上記２記事のように研究結果があったので参考にできるかなと思います。
「余計なことを考えずに直感をうまく混ぜながら頭を動かせる」
＝良い意味で左脳が邪魔をしない？
というのは、自分の感覚としてあります（科学的根拠なし）。
ちなみによく言われている説で、「お酒を飲むと英会話が上達する」というのもあります。
参考記事はこちら
これらは脳が通常の状態と違うということにやはり共通点があると言えるのではないでしょうか。
真正面から見て「学習する」という感覚よりは、広い目線から見て「英会話＝音ゲーを楽しむ」くらいに思っていると良い・・かもしれません。笑
筆者は文章に対しても一つ一つ真面目に読むというよりは一回ザーっと読んで全体を掴んでから、わからないことを一つ一つ詰めていく、というスタイルにしています。
あまりわからない段階で最初から一つ一つ順番に詰めていくと、文脈を忘れていってしまう傾向があるのかなと感じていまして（あるレベルを超えるとこの限りではないかも）、書き手や言い手の伝えたいことを追いかけつつも感覚での理解を忘れずに、上手に咀嚼したいものです。
今回はいつもと少し趣向が違う内容にしてみましたが、Bubbleはじめ今あるNo Codeツールはほぼ英語のみですので英語学習は必須ですし、そもそもNo Codeの入り口としてそれで悩む方も多いと思います。
でも結局人が身に着けて人が喋るものなのだから諦めなきゃ出来るっしょ！と、根拠のない自信を持ちながら何とかやれているところがあるので（笑）
有益になれば幸いです。
それでは、また！
【NoCode】Bubbleを1か月真剣にやってみて今思うこと その３「Bubbleの良いところ、悪いところ」
こんにちは。NoCodeNinjaです。
前回に引き続き、Bubbleを始めて１か月経った今この時点で感じたことをお伝えします。
これから他のNo CodeツールだったりBubbleを始めようと思っている方の参考になれば幸いです。
前回はこちら↓
今回は、「Bubbleの簡単なところ、難しいところ」についてです。
それでは、いってみます。
良いところは？
完成までが早い
- フットワークの軽さが魅力的
やはりここに大きなメリットがあります。
作り込む必要のあるプロダクトとなると話は違うのですが、世の中にあるすべてのプロダクトに対してNo Codeで置き換えられそうな分野が結構あるのではと推測してみます。
その分野で従来よりも圧倒的に早いスピード感で量産できると考えると・・これは大きなメリットであり、大きな可能性を感じることが出来ますよね。
専門性のコーディングと、汎用性のノーコーディングを使い分けられる時代が来る・・かもしれません。（その間を取り持つローコードの概念も良いですね）
設定できる幅が増え続けている
- 沢山ある機能と豊富なプラグイン
上記の早さはどちらかというとNo Code全般に言えることですが、Bubbleはそこからプラグインなどを入れてそれなりに作り込んでいける点は大きいです。
そしてこれを書いている今も進化を続けており、日々新しく改良されていっています。
例えば有名なGoogleのreCAPTCHA（スパム防止ツール）が使えたり
最近だと通知機能が新たに追加されたり、ビットコイン決済なんてのも設定できたりします。
筆者自身、これからBubbleがどうなっていくのか非常に楽しみです。
学習コストが比較的多くない
- コーディングに比べると新規参入しやすい
前回までと重複する部分はありますが、何かプロダクト作ってみたいなと思っている人は潜在的に結構多いのではないでしょうか。
でも一から学習しないといけない・・というのはやはりハードルが高い。
そこにNo Codeの良さがありますよね。
延長して考えると、エンジニアを本業としない方であっても触れることで製作とはどういうものなのかを肌で感じることが出来ます。
その視点を一つ持っておくと、色々なことに対して良いバランスを持つことが出来るのではないでしょうか。
使い方次第で有用出来る良いケースになり得ます。
例えるなら、ギターをやってみたいけど難しそうだしハードルが高い→
- ウクレレなら出来るかもしれない
- ウクレレを通じて音楽の楽しさを知れた！そしたら普段何気なく聴いていた音楽がまた違って聴こえる！やべー楽しい！！
- ウクレレで皆を楽しませることができるようになり、真剣に打ち込んでやがて本格的に仕事に・・
最後のパターンは稀ですが（笑）
ウクレレ（汎用性）とギター（専門性）、こういう流れに似ているかもしれませんね。
ツールの使い方として良いですよね。
コミュニケーションにも便利
- 打ち合わせやプロトタイプ
「こういうサービスを作りたいんだけど」「こういう構想ってどうすれば良いんだろう」「こういう事って出来るんだろうか」
このように考えている方は結構多いのではないでしょうか。
それに対して、No Code持ち前のスピーディさで実際にプロトタイプを作ってから（作りながらでも）コミュケーション出来るので、打ち合わせが非常にスムーズで生産性の高いものとなります。
「ここは良いけどそっちはこういう風に」など、具体性を高められますよね。
そのプロトタイプがイメージと合致しているなら、なおさら話は早くなりますし。
お互いに気軽に提案＆実行が出来て、とってもやりやすくなること間違いなしなのです。
このように開発の初段階のコミュニケーションがより細分化されるという形は思った以上にメリットが大きいとなり得ます。
もし結果的にコーディングすべき案件だと分かった場合でも、それを無駄なく導ける手段であるという解釈が出来ますよね。
広く考えると、ここがきちんと出来るという強さは大きいのではないでしょうか。
悪いところ
日本語フォントのバリエーションが少ない
- 英語前提であることの一例
Bubbleがほぼ全て英語であることは前回までで述べていたので、その一つの例についてです。
他国語のバリエーションはめちゃくちゃ多く、悩むほどの中から選ぶことが出来るのですが、日本語は数種類くらいしか？ありません。
ここは正直差を感じてしまうところですし、将来バリエーションが増えるかは今の流れだと非常に不透明ですので、う～んといったところです。
画像やアイコンを上手に使ったり工夫が必要となるかもしれません。
→ただ、その流れでテキストに頼らない技術がメキメキ上達していくかもしれませんので、結果的に良かったとなるかも。
解釈次第ということにしましょう（笑）
人によっては中途半端に感じる
- 良い意味で期待しすぎない
Bubbleで全て出来るのだ！と思わなければ良い話なのですが、確かに足りないところもあります。
筆者もまだ1か月ですので、これから足りない部分を感じだすタイミングであることも付け加えておきます。
ただ今の時点で思うのは、機能をきちんと見極めることが大事です。
ここまでは出来て、これ以降は出来ない。これを整理すれば、逆に良いところを生かせますよね。
家の包丁で100キロ越えの本マグロは捌けません。。
でも新鮮なおいしいサンマを捌くことは出来ますし、刺身にしてふるまって皆を喜ばせることは出来ます。
ツールは、上手に使っていきたいですね。
以上３回に渡ってお送りしましたシリーズですが、表題の通りまだ1か月の時点ですのでこれから見えてくるものがあるでしょうし、発見や失敗もたくさんすると思います。
そこから得たものを、これからも随時発信していきたいと思います。
Bubbleは最初はそれなりに大変ですが、一か月もあれば大部分を触れるようになれますし、色々出来るようになりますので是非触ってみてください♪
最後にBubbleのページを貼っておきますね！
それでは、また！
【NoCode】Bubbleを1か月真剣にやってみて今思うこと その２「Bubbleの簡単なところ、難しいところ」
こんにちは。NoCodeNinjaです。
前回に引き続き、Bubbleを始めて１か月経った今この時点で感じたことをお伝えします。
これから他のNo CodeツールだったりBubbleを始めようと思っている方の参考になれば幸いです。
前回はこちら↓
今回は、「Bubbleの簡単なところ、難しいところ」についてです。
それでは、いってみます。
簡単なところは？
感覚的、直感的に作っていけます
- 自分がこうしたいとイメージしていることを実現しやすい
なんだか抽象的な言葉ですが、BubbleもといNo Codeのいいところです。
というのは、各種パーツがサイト側に既に用意されているので、あとはそれを切ったり貼ったり組み合わせたりなんですね。
それでも足りないものはプラグイン（拡張機能）で追加出来たりしますし、この辺り結構充実しています。
地図を貼り付けよう！と思うと左側の「Map」という項目を選び
結構これだけで「お～っ！」とテンションが上がりますね（笑）
基本的にはこういう事の繰り返しなんです。
一つ一つ取り組んでいくハードルはそこまで高くない
- 機能は沢山あるので、順番に理解していくとうまくいく
プログラミングにも共通して言えるのだと思いますが、やることは「一つ一つを重ねていくこと」
- コードを一行一行書き進めて順番に指示を与えるように、No Codeも一つ一つ作っていくという点で変わりません。
前回このように書きましたが、全体で見ると何かわからなくても一つ一つをきちんと理解していくとやがて全体が繋がる瞬間がやってきます。
その時まで根気よく続けられるかが大事なのはどんな事でもそうなのですが、Bubbleは比較的一つ一つのハードルがそこまで高くないところがあります。
で、全体に繋がる瞬間がやがて来た時に・・気が付いたら出来ることがそれなりにあって楽しい！となるわけです。
じっくり一歩一歩階段を上がっていく感じですね。
難しいところは？
やはり英語がとっつきにくい・・
- 日本語設定が出来る箇所もあるにはあるのですが限定的
加えてめちゃくちゃ不自然です。笑
Bubbleは日本語には力を入れていないのか、ほぼ期待しないほうが良いです。
とにかく慣れるまでひたすら英語に触れることがポイントです。
Chromeや各種ブラウザにある翻訳系プラグイン、Google翻訳などを総動員して一つ一つ調べていきましょう。
「Mouse Dictionary」高速でとっても便利です。
こちら↓
分からなくなった時は、「今何をしているのか」「Bubble側が伝えたいことは何か」
つまり現在地点がどうなっているかをしっかり把握するようにしてください。
自分の場所がどこかわからないのに突き進んでもガチ迷子になってしまって泣きそうになります。。
細かく設定できるので難しく感じるかも
- 簡単だと出来ることに限りあり、出来ることが多いと難易度あり
表裏一体になってしまいますよね。
BubbleはNo Codeツールの中では比較的細かいところまで詰められるタイプですので後者が当てはまることになります。
難しい部分があるというのはそれだけBubbleが良いツールであるとも言えます。
それでもコーディングに比べたら学習コストはグッと低いはずですので、今頑張れば早めに習得出来て良いところ取り出来るかも！という解釈をしてみましょう。笑
Workflow、DatabaseなどのBubble各種機能
- 感覚的に作れるようになってからぶち当たる、技術的ハードル
Bubbleではある程度まで感覚的に触って作って進むことが出来ます。
コツさえ掴めば早い段階で世の中に既にあるサイトやアプリに見た目がかなり近いものが出来ますので、「うぉー楽しい！」とNo Codeの楽しさを覚えてくるのですが・・その時は突然やってきます。
WorkflowやDatabaseなどの技術的なハードルです。
これらを実際に動かす為に（入力して設定、保存）上記２つが必要不可欠です。
ある意味Bubbleで最重要項目と言っても過言ではないのですが、、これらがとても難しく感じまして、一つ一つを理解しながら進めていってもなかなか進んでいる感覚が持てません。
他を参考にしながら進めて、実際に出来た！となってもまた同じことが出来るかというと、反復しないと身についた感覚が残らなかったりもします。筆者はそうでした・・。
ですが成果物を作るのにこれら避けては通れない部分です。
アタマ煮えそうになっても、丁寧に進めていきましょう。。
理解できれば、更に世界が広がって楽しくなりますよー！
これから始める方でしたら、筆者で良ければご質問もお受けしますので是非どうぞ♪
以上、「Bubbleの簡単なところ＆難しいところ」でした。
次回は、Bubbleを一か月真剣にやってみて今思うこと「Bubbleの良いところ、悪いところ」について取り上げる予定です。
それでは、また！
【NoCode】Bubbleを1か月真剣にやってみて今思うこと その１「はじめてのBubble」
こんにちは、NoCode Ninjaです。
Bubbleをはじめてちょうど1か月が経ちました。
真剣に覚えたくて真剣に取り組みましたが、１か月経った今この時点で感じたことをお伝えします。
これから他のNo CodeツールだったりBubbleを始めようと思っている方の参考になれば幸いです。
Bubble、簡単なの？難しいの？
まず結論をお伝えします。
決して簡単ではありません・・・！
- コーディング（プログラミング）と違ってNo Codeだし簡単に出来そうだからやってみよう、と思うと泣きそうになります。いや、泣きそうになりました。笑
- 何と言っても全て英語です。やっぱり大きなハードル。。
でも一つずつちゃんとやれば決して難しくはないです・・！！
-
プログラミングにも共通して言えるのだと思いますが、やることは「一つ一つを重ねていくこと」
- コードを一行一行書き進めて順番に指示を与えるように、No Codeも一つ一つ作っていくという点で変わりません。
学習コストはどれくらい？
どこまでやるか、だったり個人差はありますが・・・
だいたい５０～１００時間
- 一つのプロダクトを作って、「次も同じ感じで作れそうだな～」と思えるまでの時間がこれくらい
筆者はTwitterでちょくちょく発信しながら１つのミラーサイトのようなものを作りました。
以前のブログで紹介したようにすぐわかるくらいあからさまな某サイト（笑）
普通に動くくらいまでに仕上げるのに大体７０時間くらいかかりました。
振り返ってみると、５０時間くらいで作るのも可能かな？と感じていますし、１００時間くらいかけてじっくり理解していくのも後々に変な回り道をせずに済むかもです。
一度慣れたらあとが楽
- ２回目以降になると格段に速くなる
今だと見た目だけなら５時間くらいで近いものを作れるのでは？という印象です。
要領が分かればサクサクと進められるようになります。
それまでは根気が要ります。。負けるな負けるな。
アタマ何回も煮えそうになりました。
Bubbleはじめるなら何からやればいい？
これはBubbleには「Lessons」という機能があります。
ガイドに沿って決められたテーマのものを作りましょう、というやつです。
こんなやつです。赤い矢印と右の英語がやるべき事をガイドしてくれます。
が・・・
何やってるのかさっぱりわからない状態になる
- ガイドに沿ってもただただやらされるだけになり、アウトプットが無い
- 英語なのも追い風ですが、「あれこれ今何やってるの？」状態になること間違いなし
やはり直感的に自分で触って作って流れを把握していくのが一番です。
実際に作る感覚はアウトプットしないとやはり得られないのです。。
ただしLessons完全すっ飛ばしもさっぱりわからない状態になる
- どないやねん
です（笑）
ただいきなり入っても本当に何をしたらいいかわからないと思いますので、
「最初はLessonsで今何をやってるのか？をちゃんと確認しながら流れを掴み、My appで自分も作ってやってみる」
ひとまずこれが鉄板だと思います。並行して進められたら効率良いです。
まずはこの形でやってみて、気が付いたら作るのが楽しくなってる～！が理想です。
どうでしょうか、やってみたくなりましたでしょうか。笑
以上、入り口としてはこんなところになると思います。
次回、Bubbleの難しいところ＆簡単なところなどを具体的に取り上げたいと思います。
それでは～！
【Bubble】Bubbleの有料プランをまとめてみた その２ Agency Subscription編
前回の続きです。
Bubbleの有料プラン3種類を紹介しました。
今回は、これらとはまた違う枠の有料プランがありますのでご紹介します。
Agency Subscriptionとは
クライアントへの納品をビジネスとする組織へ向けたプランのこと
The Agency subscription
The agency subscription lets you subscribe on a per-user basis to unlock features that make the process of building apps for clients smoother. Recommended for teams that work on projects for multiple clients and need access to paid functionality on an affordable basis.
ビジネスでプロダクトを作ってスムーズに納品、やり取りをする為のプラン
になります。
クライアントと情報などの共有を目的とした機能が多い事が特徴です。
他の有料プランは開発目線、こちらはクライアント目線です。
料金
Bubble引用：
【月額78ドル→(年間）月額71ドル】
出来ること
Bubbleのページには色々書かれているんですが、正直抽象的な表現が多いので
ざっとまとめると以下になります。
- 開発中から独自ドメインが使える
- 開発中からあらゆる有料プランの機能が使える
-
納品予定先のクライアントがこちらの開発状況や開発経過を常にチェックできる
- 納品後も複数人でメンテナンス可能
- パスワードの保護
以下、一つずつ詳細です。
１．開発中から独自ドメインが使える
Domain and branding
You can use a custom domain while developing the application. The Bubble banner will not be displayed in the development version of your application so that you can demo it to your customers with white-labeling
クライアントに見せるのに独自ドメインを最初から使えると便利です。
２．開発中からあらゆる有料プランの機能が使える
Development
While developing an app, you have access to the free "Agency app" plan that gives you access to all paid Bubble features.
書き方が抽象的ですが、Bubbleの多くの有料機能が使えるようです。
３、納品予定先のクライアントが開発状況や開発経過を常にチェックできる
Visibility
Organizations using the Agency Subscription can opt-in to be visible in our Agencies page and automatically receive submitted requests for proposal.
クライアントからすると、常に視覚的に確認できるメリットがあります。
４、クライアントへ納品後も複数人でメンテナンス可能
Collaboration
Bubble users on your Agency Subscription do not count as collaborators on apps: you can invite as many as you need as editors on apps you are working on, even after the app has been delivered to the customer. You can keep maintaining the app this way without requiring your clients to upgrade their plan.
引用が長くなるので割愛しますが、納品がスムーズに出来ることや
納品後のメンテナンスもし易くなっています。
５、パスワードの保護
Password protection
Applications on an Agency plan are protected by a password in run mode. Share the credentials with your client and have them explore the application before delivering it to them.
３とも関係しますが、セキュリティを強化しています。
注意点
Terms
Note that the Agency plan should only be used on apps that are built for customers. Violation of this rule can lead to the cancellation of your Agency subscription or the termination of your Bubble account.
このプランは納品向けの目的以外の使用は禁止されていて、違反が発覚次第プランのキャンセルやアカウント剥奪の可能性もあります。
まとめ
正直Bubble側の説明自体が抽象的に書かれていて、実際使ってみないとわからない部分が多い印象でした。
ビジネスとコミュニケーションに特化したプランというところですね。
先に紹介した3つの有料プランとはコンセプトが違いますので
用途によって選ぶのが良いでしょう。
それでは、また。
ありがとうございました！
