iOS8のCustomKeyboardで簡単勤怠連絡キーボードを作ってみた

iOS8のCustomKeyboardで簡単勤怠連絡キーボードを作ってみた

私が以前利用していた電車では、それはもう頻繁に電車の遅延がありました。
都度会社にメールを打つのですが、これもまためんどくさい!!

さらに私は腹痛持ちでもありますので、両方が重なるとそれはもう地獄です。
いちいちメールなんて入力してられません。社会人というのは日々大変なものですね。

iOS8から独自にキーボードをカスタマイズできる機能が提供されるようになりましたので、「会社員の皆様の朝の時短に!!」という気持ちで勤怠専用キーボードを作りました。

たったの3タップで入力が完了です。

今回用意したもの

・iPhone6Plus(iOS8)
・キーボード表示用ウェブページ
・Xcode(iOS用開発キット)

たぶん、アプリ開発している人には当たり前でも、非プログラマには「キーボード表示用ウェブページ」「Xcode」の敷居が高いかもしれませんね。というか、Xcodeを実行できる環境自体が敷居が高いかもしれません。iOS Developer Programが$99/yearですしね。

完成画面

image08
使い方は↓のとおり、3w(when,why,what?)を3回タップすれば入力完了です!
image06

特徴

メッセージ、メール、SNS(Twitter,FaceBook,Line,etc)、ブラウザ(safariなど)なんでも適用されます。(アプリ側が拒否していない限り)
マイカスタムキーボードです。ここでは勤怠を例に挙げてますが用途は無限大かと思います。

また、WEBページをキーボード画面として表示しておりますので、簡単にキーボード内容を修正&追加などが可能です。

機能の概要

Custom Keyboardとは

iOS8にて追加された、App Extensionの1つです。

App Extensionとは

アプリケーションを超えて独自の機能とコンテンツを拡張でき、ユーザが他のアプリケーションやシステムを利用している場合でも、それらを利用することができます。
 —App Extensions プログラミングガイドより引用

 つまり自分で作ったアプリ以外で、自作コンテンツを利用できるようになります。

他にどんなExtensionがあるのか

 1:Action Extension(safariの画面をいじれるようになります)
 2:Document Provider(あまり触れていないので説明は省きます)
 3:Photo Editing Extension(名前から予想はできますが、触れてないので説明省きます)
 4:Share Extension(リンクをshareする)
 5:Today Extension(画面上から引っ張って「今日」ってところに表示されます)

iOS8では他にも様々な機能が追加されていることで話題ですが、個人的にもいろいろできるようになったなぁと感じているところです。

制作開始

・Xcodeを開いて、projectを作成しましょう。
image07
テンプレートはなんでもいいです(私はよくSingle View ・・・を選択してます)

・適当に名前をつけてアプリを作りましょう(今回は例としてShowcasekeyboardとしました)

・開いたあとに下の画像の通り①②とクリックしてください
image01
・Customkeyboardを選択してください
image09
・適当に名前をつけて保存

・「E」というマークがでたら追加完了です
 画面の左ペインに先ほどつけた名前のフォルダ名がつくられています。

アプリ側実装部分(objective-c)

 ・ -(void)viewDidLoadの中にUIWebViewをつくってaddSubViewをします。

 ※注意
 このUIWebViewのframeをself.viewの/2とか/3とかよくやる方は注意です!
 Custom Keyboardで取得できるviewのframeは全て0になります。
 その場合、数値を直接入力することも考えられますが、いろんなアプリで横に回転するして使うアプリもありますので気をつけてください。
 解消方法は色々とありますが、NSLayoutConstraintを使うといい感じです。(説明は省略)

 ・アプリとWEBの繋ぎこみを行います。
 

 ここでWEBからのイベントを取れるようにします(後述)

WEB側実装部分

適当にHTMLを作ります。今回はそれぞれ<button>属性のボタンを配置しました。
 

このHTMLをどこかのサーバーにおいてください。

つなぎこみについて

a hrefのリンクをタップすると先ほどの-(BOOL)webViewが呼び出されます。

アプリ側で

として「今日」ボタンをタップしてログを出力してみますと、keyboard://today の前方「keyboard」が取得できます。

つぎはhostを見てましょう。
requesut.URL.hostで「today」が取得できます。
やりかたは複数ありますが、今回はa要素のidにもtodayをいれておいてあります。
 
アプリ側からjsを実行して対象idの内部の文字を取得しましょう。
以下は参考例

ここで取得できた文字列をsafariやlineなど開いている文字入力エリアにそのまま挿入します。

これでタップしたボタンの文字を入力することができると思います。

注意点

WEBを利用したり、キーボードの入力文字を何かしら通信を行う場合、custom keyboardでは標準では通信ができないようになっております。
これは悪意のあるキーボードアプリ開発者がいた場合、入力した文字を取得して悪さをすることが考えられる為です。

通信を行えるようにする場合、RequestsOpenAccessをYESに変更し(info.plist内)設定アプリのキーボードにて「フルアクセスを許可」をオンにする必要があります。

最後に

もともとAndroidにはこのようなキーボードを作ることができる機能がありましたが、iOSにも搭載がされて続々と参入が始まっております。
「Yahoo キーボード」「Simeji」「Atok」など。

皆様も良いアイデアでインターネットにおもてなしの心を取り入れてみてはいかがでしょうか?

コメント