WatchKitでTwitterの画像を一覧表示してみた【AppleWatch】

はじめに

 

 

ついにSpring forwardにて、Apple Watchの発売日、価格等が発表されましたね!

そんなわけで今回は、AppleWatchのWatchkitを使用し、Twitterから画像を取ってきて、一覧表示してみたいと思います。 ※画像のキャッシュもするよ!

前回:Apple Watchの開発が出来るようになったので「Watchkit」でアナログ時計を作ってみた

 WatchKit開発準備

 iOSアプリのプロジェクトを作って、Watchkitを追加するのですが、詳細は下記が詳しいので、前回に引き続き省略します。

1分でつくれるAppleWatch対応アプリ & WatchKit 全API解説

一覧表示のためのWKInterfaceTable

iPhoneで一覧表示といえば、UITableViewだったりUICollectionViewですね。

WatchkitではWKInterfaceTableという一覧表示用のテーブルインタフェースがあります、まずはこちらを準備しましょう。

まず、Interface.storyboardで「Interface Controller Scene」を開き、「Table」をドラッグ&ドロップで追加します、すると下記のようになります。

今回は画像を一覧で出すので、一つの行には画像だけのインタフェースが必要です、なのでカスタムインタフェースを用意します。

NSObjectを継承した、Cellクラスを追加します。(名前はCellでなくてもOK)

 クラスを作成したら、Interface.storyboardに戻り、「Interface Controller Scene」の「Table Row Controller」を選択して、CustomClassを「Cell」にします。

さらにCellの下の「Group」にImageを追加し、横いっぱいに出て欲しいのでwidthをRelative to Containerにします。

そしてCellクラスとImageをOutletで繋げます、CellクラスはNSObjectなので#import <WatchKit/WatchKit.h>を追記します。

 

 最後にInterface ControllerクラスにTableをOutletで繋げます。

 

これで準備が整いました。

ちなみにWKInterfaceTableは下記を参考にしました。

WatchKit で Table を表示する

Twitterから画像ツイートを取得

Social.frameworkを利用します、取得の方法はiOSと同じですので省略します。参考は下記です、iPhoneに入っているTwitterアカウントを利用して、APIを使うことができます。※設定アプリでTwitterアカウントを一つ以上存在する状態にして下さい。

iOSアプリでTwitterのタイムライン取得・ツイート投稿を行う(Accounts.frameworkとSocial.rameworkを使って)

URLは下記

 パラメータは下記にしています、人気があって画像入りのリツイート無し、言語は日本で10件

 

取得そして、表示

これがツイートを取得して、キャッシュを使い分けながら画像テーブルに表示する全コードです。(雑)

 実行すると下記のように表示されます!

 

 

キャッシュ

WatchではiPhone側から画像が送られてきて、初めて表示されます、それを待っていると時間がかかってしょうがないのでキャッシュができるようになっています。

 

詳細表示 

いまのままではサムネイルが並ぶだけなので、選択したら一画面で表示するようにします。 新規にWKInterfaceControllerクラスを作成し、名前はDetailInterfaceControllerとします。

Interface.storyboardでInterfaceControllerを追加し、Custom ClassとIdentiferをDetailInterfaceControllerとして Imageも追加しておきます、Imageは画面いっぱいに表示したいのでwidthもheightもRelative to Containerにします。

次にImageとDetailInterfaceControllerにOutletを繋げます。

 そしてInterfaceController.mに下記を追加します。行を選択した際にDetailInterfaceControllerを呼びつつ、表示画像名を渡します。

 最後にDetailInterfaceControllerで、画像を表示します。

 これで行選択すると詳細に飛ぶようになり、下記のように表示されます。

 メニューの追加

さらにさらに、メニューを追加してリロードできるようにします、そんなに難しくないです。 Interface.storyboardで、下記画像のようにInterface Controller SceneにMenuとMenuItemを追加して、Reload用のMenuItemとInterfaceControllerをActionで繋げます。

 

 ここまでやっておくと下記のように、画面を長押しした際にメニューがでるようになります。(アイコンはちょっといじりました)

最後に

長くなりましたが以上になります。

iOSのFrameworkは大体使えますし、Tableの操作などはiOSに比べればやれることが少ない分簡単なので、色々他にもやってみたくなりました。

●この記事を書いた人