20分で無料ホームページを作る方法(IBM Cloudライトアカウント&Node-RED利用編)

はじめに

IBM Cloud(ちょっと前までBluemixとか言っていたのに、いつの間に)のライトアカウントが無料になったらしい1。

しかも12月になって、しれーーーーーっと、Node-REDが使えるようになっていた。
(俺はアナウンス聞いてないぞ、と)

ちょうど、「若手サミット@名古屋」の運営で名古屋行く新幹線の間、ヒマ(*1)だったので、Gmail作成からIBM Cloudライトアカウント登録を行って、Node-REDで簡単なWebページを作ってみた。

IBM Cloudライトアカウントの登録と環境設定、Node-REDでWebページを作るところまでをやった中で詰まったところがあったので、ここにまとめる。

タイトルは自分が初めてASPを使ってホームページを出した、1990年代の「無料!ホームページ作成」の現代版を懐かしむ気持ちで作った。
あの頃はすごーい時間と労力をかけたのに、今や20分かよ。

IBM Cloudライトアカウント

一言で言うと「メールアドレスさえあれば、クレジットカード登録なしに、全部無料でホームページが作れます。しかも、IBM Watsonとか言うAIとか使ってハイテク()なアレなやつとか、コレなやつとかとかもビジネスでも利用できちゃいます」です。

全然一言じゃなかった。。

アカウントの作り方

はじめに登録が必要です。
今回、メールアドレス一つで作れるとのことだったので、Google大先生にフリーアドレスと作っていただき、それを片手にやって見ました。

サイトはこちら。
https://www.ibm.com/cloud-computing/jp/ja/bluemix/lite-account/

困ったら、Google先生に聞くんだ!
スクリーンショット 2017-12-02 7.01.46.png

で、「今すぐ登録」的なボタンを押す。
スクリーンショット 2017-12-02 7.03.09.png

押したら、こんな感じの画面が出るので適当に入れる。

スクリーンショット 2017-12-02 6.15.12.png

すると、メールに情報が届く。下記のような本文があるはず。
謎言語(=英語)のメールで驚くかもだが、「confirm account」と言う明らかなボタンを押せば、開発サイトに飛べます。
ボタン1個しかないから、とりあえず押せばいいよ。

スクリーンショット 2017-12-02 6.18.37.png

うまくいけば、ブラウザ上にいい感じのサイトが出てくるはず。
スクリーンショット 2017-12-02 6.18.47.png

ログインしてレッツまぜまぜ!(*2)

IBM Cloudで環境を作ってみる

まずはログイン。
これは、今後もやるので、覚えておいてね!

スクリーンショット 2017-12-02 6.19.07.png

サーバールーム(バーチャル)に入った。(感無量)
スクリーンショット 2017-12-02 6.19.54.png

どーでもいーコマーシャルは×ボタンか次へ連打。
奇特な人は読んでもいいですよ。

読み飛ばして言った結果、こんな画面が出ます。
スクリーンショット 2017-12-02 6.20.19.png

ここにハマりポイントがあって、一番上のひっそりとしているグループ系のところはセッティングしないといけないらしい(詳細未確認だが、とりあえず設定したらうまくいった)。

こんな感じで入力すること。
スクリーンショット 2017-12-02 6.32.24.png

ここがわからなくて非常にハマった。。
でも、よくよくみると説明書には「スペース」を作れとの記述が。。知らんがな。。
IBMに限らず、どうしてクラウド系はこう言うトラップをところどころに敷くのかねぇ。。
スクリーンショット 2017-12-02 6.31.18.png

サイトはここら辺(なぜか画像)
スクリーンショット 2017-12-02 6.31.27.png

Node-REDボイラーテンプレートを使って環境構築

これが一番手っ取り早そうかつ、ハッカソンとかでも便利そうだったのでNode-REDの紹介も兼ねて、これを使う。
要望が多かったせいか、Node-REDを5分で使えるボイラーテンプレートが追加されています。

無料枠は役立たず・・・と思いきや、しれっと良いことやりやがって。
ヤンキーがいいことしたような好感度Upを感じた。
(そこは企業なんだから、CMとかアピールしてほしい)

さて、サイトの右上にある Node-RED Starterをクリック。

スクリーンショット 2017-12-02 6.22.42.png

なんか出た。
スクリーンショット 2017-12-02 6.34.03.png

画面をスクロールすると、何を使うかといくらかかるかがわかる。
無料! 無料!!!  やっぱり無料ですぞー!
スクリーンショット 2017-12-02 6.34.16.png

無料なので、画面の一番下にあるためらいなく「作成」ボタンを押しましょう。

そうすると以下のサイトになるはずです。
「構築中」とあるので、きっとサーバーエンジニアを探したり、雇ったり、ネットワーク引いたり、契約したり、契約で揉めたりしているのでしょう。
大変そうなので、お弁当でも食べながら、気長に待ちます。
スクリーンショット 2017-12-02 6.35.09.png

5分で終わった。弁当食べ終わってねぇ。。。
スクリーンショット 2017-12-02 6.39.51.png

この画面の「アクセスURLにアクセス」をおしてみると、以下のサイトに移動できます。

Node-REDの初回ログイン

この画面はNode-REDと言うオープンソースの開発環境の設定&開発画面の初期登録画面です。

スクリーンショット 2017-12-02 6.40.06.png

NEXTを押します。それしかボタンないし。
スクリーンショット 2017-12-02 6.40.14.png

次からログインするときに使うユーザー名とパスワードを設定します。
あたいはなんでもいいです。書式に合っていれば。
スクリーンショット 2017-12-02 6.40.36.png

なんかCM見たいのが出てきますが、気にせず「NEXT」ボタンを押します。
スクリーンショット 2017-12-02 6.40.53.png

もう説明めんどくさいので、「NEXT」を連打してください。
スクリーンショット 2017-12-02 6.41.08.png

設定・開発画面のログインまできました。
「Go to your Node RED flow Editor」を選びましょう。それしかできないけど。
スクリーンショット 2017-12-02 6.41.31.png

ボタン押して以下のエラーが出たら、少したって実行して見てください。自分の新幹線の電波によるものか、サーバー初期構築時に出るのかわからないので、一応メモしておきます。
スクリーンショット 2017-12-02 6.41.44.png

Node-REDで開発する

Node-REDでホームページ作るだけなら、開発すると言うのもおこがましい感じ。
5歳児でもできるよ、きっと。

ログイン画面が出てきます。パスワード忘れてないですよね!
スクリーンショット 2017-12-02 6.43.00.png

ログインできました。
プログラム開発っぽくない画面が出てきました。
スクリーンショット 2017-12-02 6.43.29.png

とりあえずホームページ作りますか。
左側の中で、入力の中にあるhttpと言うボタン的なやつをドラッグ&ドロップで右にぐいっとやります。そしてガバンに貼る感じで。

スクリーンショット 2017-12-02 6.43.44.png

できました。
スクリーンショット 2017-12-02 6.44.09.png

次! 出力のところにある、「http resoponce」をぐいっとやります。
スクリーンショット 2017-12-02 6.44.24.png

できました。
スクリーンショット 2017-12-02 6.44.39.png

次!これで最後です(早っ!)
機能のなかにある「template」をぐいっとやります。
スクリーンショット 2017-12-02 6.44.50.png

できました。
スクリーンショット 2017-12-02 6.45.04.png

これらのボタン的なやつの端の左のhttpの右にあるポチを選択して、選択したままぐいっと真ん中の名無しボタンの左のポチに繋ぎます。
そうすると線が繋がります。こんな感じ。
スクリーンショット 2017-12-02 6.45.14.png

上手にできましたー!
スクリーンショット 2017-12-02 6.45.57.png

次に左のhttpボタン的なやつをダブルクリックして、こんな感じで入力しましょう。
この値が、ホームページのURLアドレスの最後にくっつきます。
できたら「完了」ボタンを押しましょう。
スクリーンショット 2017-12-02 6.46.31.png

次に、ホームページの内容を作ります。
名無しのオレンジボタンをダブルクリックすると、画面に下の画面が出てきます。
なので、試しに画面と同じように書きましょう。
HTMLを知っている人ならおなじみのやつですね。
スクリーンショット 2017-12-02 7.47.32.png

書き終わったら、完了ボタンを押してください。

そして、画面右上のデプロイボタンを押します。
スクリーンショット 2017-12-02 6.45.57.png

稼動確認

さぁ運命の瞬間です!(アナウンサー風)

例えば、こんな感じでNode-RED EditorのあるURLの中に、先ほど入力したアドレス(ここではhellowebpage)や、試しに入れたパラメータ(?hello=world)を入れたURLをブラウザに入れて、画面を開いて見ます。
スクリーンショット 2017-12-02 6.51.13.png

スクリーンショット 2017-12-02 6.51.07.png

ブラウザにこんな画面が出るはずです。
そう、さっき入力した内容が表示されました!
スクリーンショット 2017-12-02 6.51.22.png

ちなみにソースコードを入れると、もっと入力したあたいに近い内容が出ていますね!

Node-REDのプログラムの仕方は情報サイトが多いので、適当に探して、適当に勉強してください。

おまけ。Node-REDの特性?について

Node-REDはプログラムっぽい内容を記載する量が非常に少ないので、慣れてくると30分ぐらいでIBM Watsonを使ったホームページができたります。

一方、Node-REDで大規模なシステムを作ろうとすると、ボタン的なやつとか線とかがぐちゃぐちゃになって超大変なので、他の開発言語の方がいいかもしれません。

そんなわけで、クイックに何か作るときは、IBM Cloudライトアカウントでサクッと環境構築して、Node-REDでサクッとデモサイトを作る方法がおすすめです!
特にハッカソンやデモを作る時とか!
(あー、私だけでもハッカソン受賞歴あるのでパワフルなのは保証済み!)

それでは!

*1) 決してヒマなどではないです。でも、若手サミットというイベントむけに作らなければならないと思っただけで、決してヒマではないです。タイトルと文章の関係的にそう言ったほうが気軽かな、と・・・。hogehoge。
毎年やってるこの記事のとおり、若手サミットは毎年名古屋で、初心者がデザインシンキングやIBM Cloudを学べるボランティアによるイベントになっています。参加者が多くて、最近はひっそりと募集していたりします。
興味がある人はFacebookに「いいね」しておくと情報が来ます。
*2) 子供がプリキュアを見ている都合上、「レッツ」というと「まぜまぜ」と出てくるように自分の頭の辞書が更新されてしまい、無意識に記述してみたもの。消すこともアレだったので残したが、「大人のおともだち」ではないことを強く主張する。