JavaScript
Titanium
iOS

Titanium™ Advent Calendar 2013 1日目 / Ti.UI.iOS.DocumentViewer を使ってみる

More than 5 years have passed since last update.


Titanium™ Advent Calendar 2013 1日目

はじまりました、Titanium™ Advent Calendar 2013!

今年も Titanium には色んな意味で大変お世話になりました。

あ、まだ空きがあるので、軽いネタでもなんでもいいのでぜひぜひ参加してください!

http://www.adventar.org/calendars/78


Ti.UI.iOS.DocumentViewer を使ってみる

実は、恥ずかしながら DocumentViewer という API が存在することを知りませんでした ///

DocumentViewer は iOS の UIDocumentInteractionController にあたります。

Ti.UI.iOS.DocumentViewer - API Docs

何に使うかというと、利用方法は2つ。


  • Quicklook でファイルを開くとき

  • ファイルを別のアプリに渡すとき

です。

documentviewer_sample_1.png


1. Quicklook でファイルを開くとき

1つ目の方法ですが、以下のように button のクリックイベントなどで、DocumentViewer を生成して url プロパティにファイルのパスを指定した後、show() を実行することで Quicklook でファイルを開くことが出来ます。

button.addEventListener('click', function () {

var viewer = Ti.UI.iOS.createDocumentViewer({
url: 'hoge.pdf'
});
viewer.show();
});


2. ファイルを別のアプリに渡すとき

2つ目ですが、Quicklook では開かずに、直接ファイルを他のアプリに渡すためのダイアログを表示する方法です。1つ目とほぼ同じですが、show() の実行時に引数 view を指定します。

button.addEventListener('click', function () {

var viewer = Ti.UI.iOS.createDocumentViewer({
url: 'hoge.pdf'
});
viewer.show({
view: button
});
});


Undocumented なイベント

DocumentViewer には公式の Docs には書かれていないイベントが2つほどあります。


  • load

  • unload

の2つです。

簡単に想像できますが、load は DocumentViewer で show() した時に 正常に Quicklook でプレビューできた場合 に発火します。

unload は Quicklook を閉じた時に発火されます。


Quicklook に対応したファイル

Quicklook はどんなファイルでもプレビュー可能な機能ではありません。対応するファイルは Apple 公式の「iOSドキュメントインタラクションプログラミングトピックス」に書かれてあります。

iOSドキュメントインタラクションプログラミングトピックス


  • iWork文書

  • Microsoft Office文書(Office 97以降)

  • Rich Text Format(RTF)文書

  • PDFファイル

  • 画像

  • public.textタイプに準拠したUTI(Uniform Type Identifier)を持つテキストファイル(『UniformType Identifiers Reference』を参照)。

  • カンマ区切り(CSV)ファイル

documentviewer_sample_2.png


DocumentViewer で Quicklook を使うときの注意点

ここで注意していただきたいのは、 Quicklook に対応していないファイルを開こうとしてもエラーが発生しない といことです。

先ほど紹介した load イベントなども発火されないため、 Quicklook で表示可能なファイルかどうかが判定不可能 ということです…orz

なので確実に表示可能なファイルのみ使うようにしましょう…。


別アプリにファイルを渡す

他のアプリに渡すためのダイアログを出す場合、そのファイルがどのアプリで扱うことができるかは iOS が勝手に判断してくれるので何も考える必要が有りません。

documentviewer_sample_3.png


サンプルアプリのソース(app.js)

// ファイルのパス

var file_path = 'files/appcelerator_titanium_up_and_running.pdf';

// ウィンドウを作る
var win = Ti.UI.createWindow({
title: 'DocumentViewer',
backgroundColor: '#fff'
});

// クイックルックで開くボタン
var button_quicklook = Ti.UI.createButton({
height: 40,
width: 150,
title: 'Open in Quicklook'
});
button_quicklook.addEventListener('click', function () {
var viewer = Ti.UI.iOS.createDocumentViewer({
url: file_path
});
viewer.show();
});

// アクションボタン
var button_action = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.ACTION
});
button_action.addEventListener('click', function () {
var viewer = Ti.UI.iOS.createDocumentViewer({
url: file_path
});

});

// タブ周りを作る
var tab = Ti.UI.createTab({
icon: 'KS_nav_views.png',
title: 'Tab',
window: win
});
var tab_group = Ti.UI.createTabGroup();
tab_group.addTab(tab);

// 表示
win.rightNavButton = button_action;
win.add(button_quicklook);
tab_group.open();

github にもサンプルを上げておきます。

astronaughts / documentviewer_sample


2日目のひと

2日目は、今では同じ会社、チームで働いている @ryugoo_ さんです。

1年前まではそんなこと夢にも思わなかったぜ!

じゃあ後のことは頼んだぞ…!