まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ:calendar

本ブログエントリは IBM Cloud アドベントカレンダー 2021 に参加しています。12/3 ぶんのネタです。

2021 年になった IBM Cloud 関連の変更の中でもインパクトの多かったものの1つがアカウント作成に関することだったと感じています。Bluemix 時代からの特徴でもあった新規に作成したアカウントでの Cloud Foundry ランタイム無料枠がなくなったことに加え、新規アカウント登録時にクレジットカードの登録が必要となりました。経緯など詳しくはソリューションブログを参照ください:

新規アカウント登録時にクレジット・カード情報の入力が必須になりました | IBM ソリューション ブログ


ちょっとわかりにくいのが「新規アカウント登録時」と同時にクレジットカードを登録する必要がある、という表現です。「IBM Cloud を使うにはアカウント(以前の言い方だと「組織」)が必要」であることはその通りなのですが、2021/11/08 時点では「クレジットカードを登録しないと使えない」というわけではありません。「自分のアカウントを登録せずに(ログインアカウントだけ作って)使う」ことができるのでした。これは上記 URL でも紹介されている方法で、例えば IBM Cloud を使ったハンズオンセミナーなどを開催したい場合に、主催者が利用者の使用料金を肩代わりする形で支払い、利用者はアカウントだけ作って無料で(クレジットカード登録も不要で)利用する、といったケースを想定しています。

ただ上記 URL ではその具体的なアカウント作成手順などが紹介されているわけではないため、ちょっとわかりにくい部分もあると感じました。というわけで、本ブログエントリではこのような使い方をする場合の(利用者の)アカウント作成手順を紹介します。なおスクリーンショットを含めた情報は 2021/12/03 時点のものであることをご了承ください。


【クレジットカード登録なしで IBM Cloud アカウントを作成できる条件】
クレジットカード登録せずに IBM Cloud アカウントを作成するには条件があります。そもそも 2021/12/03 時点で普通にここからアカウントを作成しようとすると、途中でクレジットカードの登録が求められます。スタート地点からして違う方法が必要だったりします。

その条件がこちら:
既存のベーシックアカウント(またはエンタープライズアカウント。要はクレジットカードを登録済みか請求書登録など、支払いの準備が済んでいるアカウント)からの招待を受けたメールアドレスで作成すること

やみくもにアカウントを新規に作成しようとすると、普通の方法でアカウントを登録することになり、この場合はクレジットカード登録が必要です。その方法ではなく、既にベーシックアカウントを所有している人からの招待を受けてアカウントを作成する場合のみクレジットカード登録を回避できる、というものです。なお、この方法で招待された人がアカウントを作成した場合、その人の利用によって料金が発生した場合は招待した人に支払いが請求される点に注意してください。あくまで「クレジットカード登録が不要」なだけで、無料で使えるわけではありません(使った分は招待した人が支払うことになるので、そこまで理解した上で招待してください)。


【既存アカウントからユーザーを招待する方法】
上述の点を注意した上で、では具体的に既存 IBM Cloud アカウントからユーザーを招待する方法を紹介します。繰り返しになりますが、この方法で招待されたユーザーが IBM Cloud の有償サービスを利用した場合は招待した人に請求される点に注意してください(無料で参加できるハンズオンセミナーの主催などを想定しています)。

まず招待する人が IBM Cloud にログインします。招待する人はクレジットカード登録が済んでいて、有償アカウント契約済みであると想定します。

ログイン後、画面上部のメニューに ID と一緒に自分の名前(組織)が表示されていることを確認します。多くのケースでここは1つしか選択肢がないので問題ないと思いますが、もし自分の名前とは異なる組織が表示されている場合は、赤枠部分をクリックして表示される選択肢から自分の名称を選択します(この後招待するユーザーが有償サービスを使った場合、最初にここで選択したユーザー組織に請求されることになります):
2021110901


自分の組織が選択されていることを確認した上で、その左横にあるメニューから 管理→アクセス(IAM) を選択します:
2021110902


アクセス権付与を行う画面に移動します。ここで画面左のメニューから ユーザー を選択すると、選択した組織を利用することができるユーザーの一覧が表示されます(初めてこの機能を使う場合は自分だけが表示されているはずです)。この組織を使うことができるユーザーを招待する形で登録します。画面右の ユーザーの招待 ボタンをクリックします:
2021110903


以下のようなユーザーを招待する画面が表示されます。ここから招待するユーザーのメールアドレスと、それぞれのユーザーに与える権限を指定して招待していきます。以下、順に説明していきます:
2021110904


まずは招待するユーザーのメールアドレスを入力します。複数の場合はカンマか改行で区切ります(1回で指定できる最大ユーザー数は 100 です)。入力したメールアドレスの数が画面右側にユーザー数として表示されるので、数が間違っていないことをここで確認します。このままだと権限の指定がまだなので(利用権限のない状態で招待されてしまうので)、まだ招待ボタンを押さずに作業を続けます:
2021110905


招待するユーザーへ与える権限を設定するため ユーザーへの追加のアクセス権限の割り当て と書かれた箇所をクリックして展開します:
2021110906


以下のような画面が表示されるので、アクセス権を与えたい内容にそって指定します。大きく(1)Cloud Foundry ランタイム (2)クラシック・インフラストラクチャー(IaaS) (3)IAM サービス (4)アカウント管理 の4つのカテゴリに分かれていて、それぞれ個別に指定します。デフォルトはいずれも「なし」なので、権限を与える必要のあるものだけを指定して設定していきます(例えば「アカウント管理」の設定をしない場合、招待されたユーザーはアカウント情報を設定することも見ることもできない、ということになります):
2021110907


単に「ハンズオンセミナーなどで使ってもらう」だけであれば、(4)アカウント管理 については設定不要です。後は使ってもらう有償サービスの内容に沿って権限を与えていきます。以下は(アプリケーションサーバーとなる) Cloud Foundry ランタイムと(マネージド・データベースなどの) IAM サービスだけを使ってもらう想定(IaaS サービスを使わせない想定)の例を紹介します。

まず(1)Cloud Foundry 利用権限を設定します。ここでは「ハンズオンセミナーで Cloud Foundry ランタイムを作って動かす」ことを想定して、ランタイムを作る権限まで含めて指定することにします。

画面から "Cloud Foundry" と書かれた四角を選択します:
2021110908


最初に Cloud Foundry を使う組織を選択します(端的に言うと「招待されたユーザーが使った分を誰が払うか」を指定します)。今回は(この作業を行っている)自分の組織に請求させるため、選択肢の中から自分のメールアドレスを指定します。

次に(招待するユーザーの)組織内での役割を指定します。ここではリソースの表示はできるが変更権限のない「監査員」を選択しています(実際の作業目的に合わせて指定します)。

更に「どのリージョン/スペースで、どのような権限を与えるか」を指定します。全てのリージョン/全てのスペースに、全ての権限を与えることも可能ですが、目的が明確になっている場合は、その目的のための最小限の権限を与えるのが安全です。以下の例では「シドニー」リージョンの「dev」スペースのみに「開発者」としての権限を与えています。 権限の指定ができたら最後に右下の 追加 ボタンをクリックします:
2021110909


追加ボタンをクリックすると、指定した権限が「割り当て」に追加されます。招待前であれば追加した内容を削除したり、編集することができます:
2021110910


今回は IAM サービスも利用できるような権限を付与します。ここも実際に作業する上で必要な権限を与えていくのですが、今回は特定のサービスだけを使わせるのではなく、全てのサービスを作成できるような内容で招待する例を紹介します。指定が完了したら 招待 ボタンをクリックします:
2021110911


追加ボタンをクリックすると、指定した権限が「割り当て」に追加されます。この作業を招待されたユーザーの権限として必要なだけ繰り返しますが、今回はここまでの権限を与えた状態でユーザーを招待することにします。画面右下の 招待 ボタンをクリックします:
2021110912


ユーザーを招待する側の作業はこれで終わりです。


【招待を受けたユーザーの登録方法】
続いて上記作業によって招待を受けたユーザー側の手順を説明します。

まずメールアドレスを指定されて招待されたユーザーには以下のようなメールが IBM Cloud から届きます。このメール本文内にある Join now と書かれたリンク部分をクリックします:
2021110901


IBM Cloud のユーザー登録ページに遷移します。

この時、該当ユーザー(メールアドレス)が既に IBM Cloud のアカウントに登録済みであった場合はメールアドレス、氏名とも既に既存の登録情報が入力されている状態で開き、「アカウントに追加」というボタンだけが押せる状態でページが開きます。この場合は アカウントに追加 ボタンをクリックすることで招待された組織が使えるようになります。

該当ユーザーがまだ IBM Cloud に未登録であった場合はメールアドレスのみ入力済みの状態でページが開き、氏名部分は入力可能なテキストフィールドになっています。ここに氏名を入力し、最後に アカウントに追加 ボタンをクリックし、次の画面でパスワードを指定します:
2021110902


※たまーに、ここでこの状態のままになるんですよね。。その場合はログイン画面に移動しちゃってください:
2021110903


IBM Cloud に未登録だったユーザーがこの手順で登録した場合のみ、IBM Cloud の使用許諾画面に遷移するので、内容を確認して続行してください。これで IBM Cloud に登録完了です:
2021110904


この方法で招待されたユーザーが IBM Cloud にログインすると、画面上部の組織アカウント一覧には招待してくれた人の名前が表示され、他の選択肢を選ぶことはできません。そしてこの状態でしか使うことができないため、このユーザーが有償サービスを利用した場合は組織アカウントのオーナー(つまり招待した人)に請求される、という仕組みとなります:
2021110905


普通にアカウントを登録するとクレジットカード登録が必須となってしまったので、企業内で社員向けのハンズオンセミナーを実施しようとしても各ユーザーがクレジットカード登録をしないといけないのでは面倒ですが、この方法であれば(一括でまとめて払う人の有償アカウント登録のみ必須ですが)アカウント作成時のハードルは以前通りの簡単な手順で登録できます。


※本ブログ記事は IBM Cloud アドベントカレンダー 2020 の 12/3 分にエントリーしています。


IBM Cloud のダッシュボードでユーザー権限周りの調べ物をしていると、見慣れないメニューに目が止まりました:
2020110601


「IP アドレスのアクセス制御」、と書かれています。現在の設定値は「無効」で「すべての IP アドレスからのアクセスを許可します」との説明が表示されています。 ということは、ここを「有効」にすると「アクセスできる IP アドレスに制約をかけることができる」と読めます。こんな機能があったことに気付いてなかった(苦笑)ので、この機会に実際の挙動を確認することにしてみました。

まずは準備として自分の環境での外部 IP アドレスを確認します。例えば確認くんあたりで自分の IP アドレスがどのように見えているかを調べます:
2020111601

(↑「あなたの IP アドレス」として表示されている内容を確認します)


自分の IP アドレスが分かったら、この値を使って IBM Cloud の「IP アドレスアクセス制御」を有効にしてみます。IBM Cloud にログイン後、メニューから「管理」→「アクセス(IAM)」を選択します:
2020111602


そして「アクセス(IAM)」画面の左ペインで「設定」を選ぶと「IP アドレスのアクセス制御」が変更できるようになります:
2020110601


ここの「無効」と表示されている部分をクリックすると、「IP アドレスのアクセス制御」ダイアログが表示されます。ダイアログ内では「有効」にチェックがついています。この「許可された IP アドレス」欄に先程確認した自分の IP アドレス(※)を入力し、最後に「保存」ボタンをクリックします:
2020111603


※単一の IP アドレスであればそのまま入力できます。これ以外にサブネットを指定して 192.168.0.0/16 形式で指定することもできますし、あるいは IP アドレスの範囲を指定して 192.168.0.1 - 192.168.0.100 と指定することもできます。


すると下図のように変更されました。これで IP アドレスによるダッシュボードへのアクセスが制御される状態になっているはずです(現在はアクセスが許可されている IP アドレスなので、このままダッシュボード内を操作することができます):
2020111604


確認するため一旦ログアウトします。そしてこれまで自宅の契約ネットワークから使っていた無線 LAN を、スマホのテザリング回線に切り替えます(IP アドレスが変わります)。そして、改めて IBM Cloud にログインしようとすると・・・
2020111605


無事に(?)アクセスを断られ、ログアウトするしか選択肢がない状態になりました。期待通りの挙動でした。

IBM Cloud と契約した後に、ダッシュボードを利用する人やそのネットワーク環境が限られているのであれば、その情報をここで有効にしておくことで想定していない利用者に勝手にダッシュボードを使われる、というリスクを軽減することができるようになります。会社のオフィスや固定回線の自宅からしか使わせないのであればそのネットワーク情報を登録するだけです。モバイル機器からのテザリングを許可させたいのであれば、(ネットワークの範囲を調べるのが大変そうですが)該当する IP アドレス範囲を指定できるのでダッシュボードへの不正なログインのリスクを軽減することができそうです。


詳しくは公式ドキュメントも参照ください:
https://cloud.ibm.com/docs/account?topic=account-ips#ips_account


このブログは Node-RED Advent Calendar 2019 に参加しています。12/22 ぶんとしてエントリーしています。


今年 2019 年に新たな試みとして挑戦したことの1つに「ボランティアで IT 勉強会を開催する」がありました。それまでにも社内外の技術者向けコミュニティで講演したり、参加した先のイベント内でゲリラ的に活動するなどは行っていました。ただ前提として IT 技術者を対象としていたり、そういった知識を持った人を対象とすることがほとんどでした。一方で IT や AI 、プログラミングが少しずつ世の中で広まっている実感もあって、そんな乖離について疑問とまでは言いませんが、より多くの人に広める活動はできないだろうか、と考えることはありました。そんな中で女性向けコミュニティや、以下で紹介する子供向け勉強会を開催させていただく機会がありました。その活動についての報告を兼ねてブログにまとめてみました。


【IT勉強会について】
この手の IT 勉強会を開催する上で会場の確保は1つの壁になります。加えてパソコンそのものは持ってきてもらうとして、その電源やプロジェクターの確保、無線 LAN の有無、机や椅子の用意、そして会場を借りる上でのコスト、加えて集客方法や会場を利用する上での制約事項等を総合的に考慮する必要があります。以下で紹介する勉強会では 2016 年に千葉県市川市にできたシェアスペース「にわにわ」をお借りして開催しました:
2019121001


簡単に説明すると無線 LAN や電源の利用可能なレンタルスペースです。トップページを見ていただくとわかるのですが、普段から地域コミュニケーションを中心とした(IT に限らない)活動をされていて、親子向けワークショップも多く開催されています(画像はトップページより)。価格も非常にリーズナブル!:
800


この会場をお借りし、今年は5月に開催したのを皮切りに計5回のIT勉強会を行いました。「IT勉強会」と銘打ってますが、基本的には IBM Cloud を使った勉強会という位置づけで、IBM Cloud コミュニティのメンバーにお手伝いをいただいています。なお(*)印がついているものは Node-RED を使ったハンズオンです:
日付タイトル内容
5/19【子連れも】BMXUG市川IT勉強会「LINEでお絵描きメッセージを送ってみよう♪」【学生も歓迎】LINE LIFF を使ったお絵描きスタンプを作る
7/13【こどもも】BMXUG市川IT勉強会「テトリスを作ってスマホで振って遊ぼう!」【おとなも】(*)IBM Watson IoT サービスを使ってゲームをリモートコントロール
8/24【こどもも】BMXUG市川IT勉強会 AI先生と外国語で会話しよう!【おとなも】IBM Watson Translator, Speech to Text, Text to Speech を使って外国語会話レッスンアプリを作る
10/19BMXUG市川IT勉強会「レースゲームを作って、鈴鹿サーキットを走ってみよう!」(*)OpenStreetMap と IBM Watson IoT サービスを使った地図ゲーム、二人協力プレイ可
12/7BMXUG 市川IT勉強会番外編 【おとなも】『スクラッチ』でゲームを作ろう!【こどもも】スクラッチを使ったおにごっこゲーム開発(コピペ一切なし)


つまり今年は5回の勉強会を開催して、そのうち2回で Node-RED を使いました。また全てのタイトルに【おとなも】【こどもも】と含まれているように、対象者の前提は設けていません。もともとこの会場で行われるイベントは両親がお子さんと一緒に参加されたり、お年寄りの方が参加されたりすることが多かったこともあって、その一環で参加していただけたら・・という思いもありました。結果的に「普段キーボード入力を使う機会が少ない(コピペして、すらそのままでは通じない)」ようなお子さんや大人の方に多く参加いただけたと思っています。この点では当初の目的がある程度達成できたと感じています。


なお勉強会ではないのですが、7/13 開催の内容については 7/18 に開催された Node-RED Con Tokyo 2019 の中でもレポートする形で紹介しています:
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現(*)


※個人的にはこれら以外でも IT 関連のボランティア活動は行っていましたが、このブログでは上記イベントに限ったレポートとさせていただきます。


【勉強会で大変だったこと】
大変だったこと、というか大変なこと。結論を最初に言うと「時間との戦い」です。

参加者は「お子さんと、その親」が大半でした。ここでの「お子さん」とは、下は小学校低学年から、上は高校生がいたかなあ・・・中学生はいました、といった感じ。おそらくスマホは僕以上に使いこなせるのでしょうが、PC を普段から使っているわけではありません。ブラインドタッチなど以ての外、「コピペ」が「Ctrl+C して Ctrl+V」と理解できるわけでもありません。「選んで、右クリックして、コピーして、・・・」と教える必要があるレベルです。PC 操作には普段の勉強会やハンズオンとは比較にならないほどの時間を要します。

加えて、全ての勉強会がハンズオン形式となっていて最終的にアプリを1つ作りあげる(!)のですが、だいたい2時間弱で作れるものを用意する必要があります。時間をかければ細かい説明もできるし、作ったものを自分の好みに合わせて改良できたりもするんですが、一方で時間が長くなって「途中で飽きられちゃう」と勉強会としては致命傷です。もうPCの前に戻ってきてくれなくなります(苦笑)。コツとしては最初にアプリのデモを見せて(つまり完成形を見せて)、ある程度興味を持ってもらって、「頑張ればあのゲームができる!」と思わせて(笑)、なんとか集中力を2時間キープしてもらう、加えて神様に祈るw! そして目的のアプリを最短コースで作り上げる!! という持久走のような2時間になります(あ、でも苦痛ではなく楽しいですw)。

勉強会で扱うハンズオンのコンテンツはベースとなるものがあったりなかったりですが、ベースがあってもこの勉強会向けの改良を行っています。理由は「そのままでは理解できない」と思われる内容があったり、キーボード入力が多すぎて着いてこれないと思われたからです。基本プログラミングなので、プログラミングの入力は必要なのですが、その内容が多すぎると集中力が途切れてしまう懸念があります。かと言ってコピペのオンパレードだと「いま自分は何をコピペしてるのか」「そもそもこれはどの部分を作っているのか」がわからず惰性の作業になってしまう(要するに勉強会にならない)恐れもあります。一方で「ある程度プログラミングっぽいことが体験できるようにしたい」とか「苦労するから完成すると嬉しい」というユーザー体験的な観点からはやっぱりプログラミングが体験できるようにもしたくて・・・ このあたりのバランスが非常に難しいのでした。実際、今も改良を続けながらコンテンツを準備しています。

コンテンツのアイデア出しやコンテンツ作りにも時間は必要だし、2時間で一通りの解説と動作確認ができるように仕上げないといけないし、毎回が色んな意味で時間との戦いになっています。


【Node-RED を使った感想】
上述のように、5回の勉強会のうち2回で Node-RED を使ったハンズオン開発を行いました。ちなみに他の2回は Node.js (のコードを github からコピーして使用)、1回は Scratch を使いました。また Node-RED を使う場合も HTML ページを記述するテンプレートノードの内容についてだけは(時間の都合もあって)コピー&ペーストで逃げました。今にして思えば Node.js の2回は Node-RED で作れるようにしておけばよかったと感じています。

プログラミング教育のハンズオンで Node-RED を使う場合のメリットは、なんといっても「少しずつ作りながら&動かしながら進めていける」ことだと思っています。ノードの説明をして、それらを組み合わせて1つのフローを作っては、作ったフローを実際に動かして動作を確認する、これを繰り返すことで機能単位で少しずつ動作を確認しながら作ろうとしているものが完成体に近づいていく様子を体験できるようになります。この「少しずつ完成に近づいていく」のがプログラミングの醍醐味であり、楽しい部分でもあると思っています。

また Node.js を使う場合と比較すると、「コマンドプロンプトやターミナルからコマンドを実行する」に相当する作業がなく、開発作業に集中できるという点も大きなメリットであると感じています。プログラミングといいつつ、最終的にサーバー上で動かすため各種 Linux コマンドを使わずに進めていくのは困難なのですが、Node-RED だとそのあたりはよく作られていて Node-RED の画面内だけでアプリを開発し、サーバー上にデプロイすることまでができます。Windows / Mac の環境依存になる部分も少ないため、教える側としては非常に楽になる、といった、副作用的な効果もありました。特に今回のように教わる側の知識があまり高くない場合では大きなメリットのあるハンズオン環境といえると思います。

似たような GUI プログラミング環境として Scratch もあります。こちらははじめからウェブサービスとして提供されている点と、画面を確認しながら作れるという点で視覚的に非常にわかりやすい環境といえます。一方で外部とのデータやりとりについてはどうしても弱い点があるようにも思えます(逆にそういうやりとりが必要なければ気にすることもないと思ってます)。この外部とのデータのやりとりについては Node-RED が得意としている分野でもあるので、このあたりが今後の使い分けの基準にもなっていくんだろうなあ、と感じています。


【今後の話】
今年の5回の勉強会を経て、比較的 IT 知識のない人(普段、ワードやエクセルさえ使う機会のないレベルの人)向けの学習環境としての Node-RED の優位性を改めて感じることができました。一応、この活動は来年以降も続けるつもりでいて、2月初旬に予定している年明け一回目のコンテンツでも使う想定をしています。

ただし、来年は「Node-RED を使う前提でコンテンツを考える」のではなく、「参加者が興味を持ちそうな(エンターテイメント性のある)コンテンツを作って」&「それを Node-RED で実現できるように改良する」という準備をしていこうと思っています。ぶっちゃけ手間がかかるといえばかかるのですが、この準備自体が自分の勉強にもなるし、そういうことが実現できる Node-RED のポテンシャルの高さを証明することにもなるのではないか、と思っています。



(この記事は IBM Cloud アドベントカレンダー 2018 に参加しています。2日目の記事です)

先日、以下のブログエントリを公開しました。本エントリはその技術的な補足と、試験的な意味も含めてアプリ URL を一般公開する内容になっています。
お絵かき LIFF アプリを作ってみた

2018112200


技術的な説明の前に、まずは一度使ってみていただきたく、このアプリを(一時的に?)公開することにしました。少し面倒ではありますが、以下の手順で実行できるようにしたので、まずは一度使ってみてください。

①スマホに LINE アプリをインストール(お絵かきアプリは PC 版 LINE からは使えません)

②LINE を開いて誰かとのメッセージ画面(グループ LINE 可)の中に以下の文字を入力してリンクメッセージとして送信する(この作業だけは PC の LINE アプリから行ってもよい)
line://app/1624220123-mbERyVgb

2018120101


③スマホの LINE 画面内から②で送信したリンクメッセージをタップ
2018120102


④LINE 内でお絵かきアプリが起動します。ペンの色と太さを変えながら指でお絵かきします。
2018120103


⑤間違えたら reset か、一度終了してから再度リンクメッセージをタップしてやり直し。
2018120104



⑥描き終わったら post でお絵かきが画像として LINE にメッセージ送信されます(右上の×を押してアプリを終了する)
2018120105


・・・というものです。LINE はスタンプ文化が有名ですが、スタンプを持っていなくてもその場でお絵かきして送るとか、他には地図を書いて送るとか、いろいろな使い方が考えられると思っています。現状、上記のリンクを LINE のメッセージとして一度送っておく必要があり、そのリンクをタップした時に起動する、という使い方になってしまいます。技術的に興味がある人もない人も是非お試しいただきたいと思っています。


以下、このアプリの技術的な解説になります。

このアプリは LINE の新しい開発フレームワークである LIFF(LIne Front-end Framework) を使って開発しています:
https://developers.line.biz/ja/docs/liff/overview/


LIFF は LINE 内で動作するウェブアプリケーションのプラットフォームです。「LINE 内で動作する」という点と「ウェブアプリケーション」であることがキーワードです。上記のように LINE 内で特定リンクをタップすることで起動し、その中身は HTML5 と JavaScript で記述されたウェブアプリケーションです。LIFF の詳しい仕様等は上記の開発者向けページを参照いただきたいのですが、要するにパブリックインターネット上に HTML5 ベースのウェブアプリを作って、そこを参照するような LINE リンクを作っておくことで LINE アプリ内でその HTML5 ページを起動することができます。また LIFF SDK の JavaScript API を使うことで、その HTML5 アプリの情報を起動元である LINE 側に(メッセージとして)送信することも可能です。

今回作ったアプリの場合は HTML5 の Canvas を使ってお絵かきアプリを作成し、その中に描かれた絵を動的に画像に変換して、画像を貼り付ける形でメッセージを送ったことにしています。その結果、HTML5 Canvas 内に描かれた絵を LINE 上で画像添付したかのように送信させることを実現しています。

この仕組の HTML5 ウェブアプリケーション部分と、画像添付部分を IBM Cloud 上の Node.js ランタイムと IBM Cloudant を使って実現しています。HTML5 Canvas 内に描いた画像を動的に PNG 画像へ変換し、Node.js ランタイム上の REST API を使って取得し、(LIFF の場合、画像はオリジナル以外にサムネイルが必要なので)サムネイル画像を生成して IBM Cloudant データベース内に添付ファイルとして保存します:

2018120106


画像が添付できたら、今度はその画像を外部から参照できる URL を用意します。具体的には Node.js ランタイム内に Cloudant 内に格納した画像ファイルを参照できるような URL(REST API) を用意します。そして HTML5 内の LIFF SDK を使って、画像ファイルの URL をメッセージとして送信して、添付画像を付与したメッセージ送信と同じ処理を行います。これでお絵かきで作成した画像が添付されたかのような振る舞いを実現できます:
2018120107


という形で現在は実現しています。 つまり現在はこのアプリを使って作成した画像は IBM Cloudant 内に保存されるように実装されています。現在の運用環境では、このデータベースの容量にも制約があるので、しばらくはデータベースをリセットしながら運用することになります。もしうまく送信できない場合は僕がデータベースのメンテナンスを忘れていて、容量オーバーになっている可能性があることをお伝えしておきます(気付いたタイミングでリセットするようにします)。

また、この公開アプリのソースコードはこちらで(MIT ライセンスで)公開しています。IBM Cloud を使う前提で記述されたコードですが、自分なりに改良したい人がいればうまく活用してください:
https://github.com/dotnsf/line_liff_doodle


これまで LINE の API といえば Messaging API で、bot のようなバックエンド側を操作するアプリを作るには有用だったのですが、やっとフロントエンド側を操作できる API(というかフレームワーク)が出てきてくれました。公開ページ上で HTML5 アプリを置いて運用することになるので、実質的にクラウドを活用する形態が多くなると思います。そんな時に IBM Cloud の上記構成程度であれば無料のライトアカウントでも運用できるので、公開したソースコードを是非色んな人に使ってみたり改良してみてほしいです。

久しぶりのノーツネタです。


ノーツ9のクライアントでカレンダーを開くと、左下にこのようなセレクターが表示されます:
2015051501

ここで選択した形式でカレンダーが表示されます。自分は1週間単位で見ることが多いので、「1週間(勤務日)」で使っていることが多いです。なお「1週間(勤務日)」は月曜から金曜までの5日間を表示(土日は表示しない)、「1週間」だと月曜から日曜までの7日間が表示されます。

最近、自分の勤務が土日も含まれることが多くなってきました。というわけで、勤務用の5日表示では大事な仕事を忘れてしまいかねません。かといって「1週間(勤務日)」を残したまま「1週間」を選ぶのもわかりにくいというか・・・

こんなときこそカスタマイズです!さっそくドミノデザイナーでメールテンプレートを開いて、共有要素 - アウトライン内の NotesCalendarOutline を選択します:
2015051504


その中の「1週間」を書かれたラベルを選択して、ラベルの値を「1週間」から(例えば)「オレの1週間」に変更して保存します:
2015051502


これでノーツカレンダーを開き直すと、「オレの1週間」が選択できるようになり、選択すると7日間分のカレンダーが表示されます。これで安心して週末にも仕事のスケジュール入れられます(涙)。
2015051503




 

このページのトップヘ