Adobe Spark 「ビジュアル・コンテンツ」を作成するためのアプリ、 を作り出し、これを「 Spark page 」でひとつの「完 成品」にまとめあげることもできます。 ・・・・ 0 d0C0n10 LTE く My pages 11 : 41 ・ 56 % ・ ) A 朝い 5 しこ : 第 「 Spark Page 」の Ul(iPhone) ・・・・・ d000E0 LTE 00 11 : 43 Preview 35 % つ ・ネ 35 % 第 : ) 今回のアップデートでアプリ名称が変更された 唯一のアプリが、「 Spark page 」です。 これは単一の「 Web ページ」を作り出すことを 目的としています。 単なる「フォトギャラリー」などではなく、「写 真」や「動画」「テキスト」を駆使して、ひとつのス ーリーを作り出すことを目的としており、ある 意味、「 Adobe spark 」の中核をなすサービスのひ とっとも言えます。 「 Spark post 」や「 spark voice 」でコンテンツ 録可能です。 対して、「 Spark page 」は、「画像」も「動画」も収 ツのひとつにすぎない " という点です。 「 ice 」で作られた動画は、あくまでも。コンテン その理由は、「 SparkP 。 st 」で作られた画像や、 ・・・・・ d000 宿し正 石、 p 洋 3 引 on A W 田 0 ⅱ 1 物 0 WO 興ー 11 : 43 lnspiraüon 7Wa 、 SuC いぎい ℃ 5 惓「第 !. 5 い第いををドゞ蹶 0 4 円 0 , T いを , ト卩を第 0 441 み ! , 気”新第 50 - ”新 0 ヨ物青をし y です。 従来のスライドショーと異なるのは、マイクを 使って自分でナレーションをすること。 これは、名前の「 Voice 」の由来でもあります。 写真やテキストを見せながら、自分の声で解 説するというのは、これまでになかった発想です。 「 Spark Page 」で作成した例 Spark Voice 「 SparkVoice 」は、スライドショーを作るアプリ

「ライプラリ」 第 30 回「 JavaSc 「 ipt 」制御できるこ画面なしプラウザ " 「 PhantomJS 」 [ 前編 ] 'http://www. kohgakusha. co. jp/' function (status) { 完了したときの処理・・ コールバック関数の引数「 status 」が「 success 」 であれば、そのページの読み込みは成功です。 このとき、「 render 」メソッドを呼び出すと、 画面キャプチャを撮影できます。 リスト 1 では、画面全体のうち、「 ( 0 , 0 ) ~ ( 1024 , 768 ) 」の範囲だけをキャプチャするため、 clipRect プロバティを設定しています。 この設定をしないと、「全画面キャプチャ」と なります。 ここでは、「 PNG 形式」として保存しました が、「 PDF 形式」で保存することもできます。 page . clipRect {top : 0 , 1 eft : 0 , width: 1024 , height : 768 } ; page. render (' kohgakusha. png ・ ) ; 0 プラウザ内の JavaScript にも対応 なお、リスト 1 では、「 window. setTimeout 」を 用いて、 200 ミリ秒待ってから、画面キャプチャ するようにしています。 ※「 200 」という値は、参考値です。ときにはもう少し大きくした ほうがいいこともあります。 これは、ページに JavaScript などが含まれて いるときに、「その実行結果を待った後の画面」 がほしいからです。 最近では、「 Ajax 」を用いて、動的にページを 作っていく Web サイトが増えました。 そのようなサイトでは、 reJavaScript 」が動か ないプラウザだと、正しく表示されません。 しかし「 PhantomJS 」は、「 WebKit 」べースの プラウザであり、「 JavaScript 」も動きます。 ですから、「 JavaScript 」の DOM 操作で動的 に作られるべージも、正しく画面キャプチャで きます。 リスト 1 画面キャプチャの例 / / webpage オブジェクトを作る var page requi re ('webpage') . create ( ) ; / / ブラウザのウインドウを 1024X768 に設定 page . viewportsize {width: 1024 , height: 768 } ; / / URL を開き、完了したらキャプチャする page. open (' http://www.kohgakusha.( 0. jp 尸 function (status) { if (status 'success") { window. setTimeout (function ( ) { / / キャプチャサイズを 1024X768 に設定 page . clipRect {top: 0 , left width: 1024 , height : 768 } ; page. render ( ・ kohgakusha. png') ; phantom. exit ( ) ; 「 Web スクレイビンク」する いま採り上げた「画面キャプチャ」は、「 Phan tomJS 」の代表的な使い方です。 たとえば、 (a) 「画面キャプチャしたい URL を CSV 形式などで用意しておいて、まとめてキャ プチャする」とか、 ( b ) 「開発中に CSS を修正す る際、修正前と修正後のキャプチャを自動的に 比較して、予期しない場所のレイアウトの崩れ がないかを確認する」などの操作に便利です。 「 PhantomJS 」は、それ以外にも、さまざまな 使い途があります。 たとえば、「 Web スクレイピング」は、その方 法のひとつです。 「 Web スクレイピング」は、本連載の第 12 回で も、「 PHP Simple HTML DOM parser 」を使っ て操作しました。 115

「ライプラリ」 第 30 回「 JavaSc ⅱ pt 」で制御できる、 " 画面なし 7 ラウザ " 「 PhantomJS 」・ [ 前編 ] つまり、「 window 」オプジェクトや「 document 」 このときと同様に、気象庁の東京都の天気を オプジェクトなどを使った操作が可能です反面、 示している Web サイト 「 Pha 。 to 」の「、 ebpage 」オプジクトなは利 http://www.jma.go.jp/jp/Y0hO/319. html から、「今日の天気」のテキストを抜き出す処理 用できません。 は、リスト 2 のようになります ( 図 2 ) 。 リスト 2 では、「 jQuery 」の CSS セレクタ構文 の象庁 を使って要素を抜き出すプログラムを注人する 各種データ・資料 1 こ第卩勢み′チ予 ことで、特定の要素を取得しています。 その他 天気予報 : 東京都 の情報 , 府県京都 図 2 に示したように、天気の情報は、「 forecas 28 日 5 時第庁子報部発表の天気子会日 28 日から明日 30 日まて ) 東京地方 ー異第第物第響ヨ降水確率 ttablefont 」という「 id 」が指定されている「 table 」 北の風後南の風くも 0 ) 新 今日 28 日 り時々れ 1 外東京 波 0. 5 メ - トル 要素の下の 2 番目の「 th 」の「 img 」要素に含まれ 南の風後北の風 23 区西部では南の風や 0 ) 1 佩東京 や弓 ( もり夜晴れ 明日 29 日 ているので、 所により前からタ $ ('table#forecasttablefont tr') ; var tr tr. find( ・ th . weather img'); var lmg のようにして取得しています。 「 PhantomJS 」では、「入力フォーム」にデータ を入力したり、ページの「進む」「戻る」などの操 作をしたりすることもできます。 次回は、それらの操作を説明します。 リスト 2 スクレイピングの例 page. open ( 'http://www.jma ・ go. jp/jP/Y0h0/319• html' , function (status) { / / jQuery を使う page. includeJs ('https://ajax ・ googleap is.com/ajax/libs/jquery/l.12.4/jquery. min. js', function() { page. eval uate (func var result tion ( ) { / / この中身はブラウザ内で実行される $ ('table#forecasttable var tr font tr'); / / 2 番目の tr の下の img を得る t r. fi nd ( var 1 mg 'th.weather img'); / / その tit ] e 属性を取得 return img. attr('title'); キーっ - ドをユし・一 / を物下、た、 . 案内・中講 気象庁について 再読込ボタ : ノかブラウザの更新ボタン をクリッ先・て最新の情報を村虹だ ・も引 I 水予報 第奓第意報 知識・解説 防災情悩 気予報 日中の最高 都の最気日中の最高 図 2 気象庁のサイトの構造 リスト 2 に示すように、「 PhantomJS 」では、 読み込んだページに対して、「 JavaScript 」のプ ログラムを注入できます。 リスト 2 で注目すべきは、次の 2 点です。 ①「 jQuery 」の読み込み 「 includeJs 」メソッドを呼び出すと、その Web/X—ジに、外部の「 JavaScript 」を注入で きます。 page. includeJs ( 'https://ajax.googleapis.com/ajax/libs/ function jquery/1.12 .4/jquery. min ・ ]受 ・・注入完了したときの処理・・・ ②「 JavaScript 」の実行 「 evaluate 」メソッドを使うと、 Web ブラウ ザの内部で、任意の「 JavaScript 」を実行でき ます。 page. eval uate (function ( ) { ・・任意の〕 avascript コード・・ console. 10g (result) ; phantom. exit ( ) ; ここで指定した「 JavaScript 」のコードは、 ( Phantom 側ではなく ) 、 web ブラウザの内部 で実行されます。 116

フィブラリ」 ー大澤文孝 図 1 「 PhantomJS 」で画面キャプチャした例 ■「見えないプラウザ」を操作する 「 PhantomJS 」では、「見えないプラウザ」を起 動して、実際に、操作していくようにプログラ ミングします。 [ 1 ] まずは、「 webpage 」のインスタンスを作ります。 これが「見えないプラウザ」に相当し、各種メ ソッドを使って、操作していきます。 var page requi re ('webpage')c. create ( ) ; [ 2 ] インスタンスを作ったら、「ウインドウ・サイ ズ」を調整します。 必須ではありませんが、 HTML がレンダリン グされる際の、「折り返し幅」などに影響します。 page.viewportsize {width: 1024 , height: 768 } ; [ 3 ] URL を開くには、「叩 en 」メソッドを呼び出 します。 完了するとコールバック関数が呼び出されます。 page. open ( G 画面 ないフ " ラうサ 第 30 回「 JavaScript 」で制御できる、 " 画面なしプラウサ " 「 PhantomJS 」 0 0 前置て面キプチ とクレイビング」 「 PhantomJS 」は、「 WebKit 」 ( 「 Chrome 」や 「 Safari 」の元となっている「ブラウサ・エンジン」 ) を内蔵した、「画面なしのブラウザ」です。 「 JavaScript 」を使った Web 操作の自動化を実 現します。 同様の方法として、連載第 7 回で説明した「 Sele nium 」がありますが、「 PhantomJS 」は、それ 自体がブラウサであり、ブラウザを別途インストー ルする必要がないので、 G 団環境を含まないサー バ環境でも実行できるのが特徴です。 増創小・第を もトし 月川 被国物ソリト 出版情報 0 昿ロ 、い鑿ト 第子工 ーーツしな ; 北 いいト辞第 【今月紹介するツール】 PhantomJS http://phantomjs.org/ 開発者 Ariya Hidayat ライセンス BSD ライセンス 「 PhantomJSJ をインストールする 「 PhantomJS 」は、実行形式のプログラムです。 ダウンロード・ページから、 OS ごとにビルド された「バイナリ・ファイル」を入手できます。 http: 〃phantomjs.org/download.html 本稿では、「 Windows 版」を使います。 「 phantomjs-2.1. l-windows. zip 」をダウンロー ドして、展開してください。 展開したファイルの中には、「 bin/phantomjs. exe 」というプログラムがあります。これが「 Ph antomJS 」本体です。 プラウサを起動して「画面キャプチャ」する さっそく、実例を見てみましよう。 リスト 1 は、「 http://www.kohgakusha.co.jp/」 を PNG 形式で画面キャプチャする例です ( 図 1 ) 。 114

Adobe Spark 「ビジュアル・コンテンツ」を作成するためのアプリ 「 Adobe Spa 「 k 」は、「ソーシャル・メディア」向け 「ビジュアル・コンテンツ」作成用のアプリです。 「ビジュアル・コンテンツ」・・・と、ひとことで言って も分かりづらい要素です。 SNS などで公開するための「投稿用画像 (Po (t) 」「 Web ページ (Page) 」「動画 (Video) 」を簡 単に作ることができるサービスです。 「 Adobe Spark 」は、 3 種類の「 iOS 用モノヾイル アプリ」と「 Web アプリ」で構成されており、単独 アプリは「 iOS 版」のみのサポートですが、「 Web 版」を使えば、プラットフォームを問わず、 Windo ws や Mac からも利用できます。 なお、それぞれの「 iOS 用アプリ」は、これまで、 「 Adobe post 」「 Adobe SIate 」「 Adobe Voice 」と、個 別のアプリとして公開されていたものでした。 今回、 Web アプリ「 Adobe Spark 」の公開に合わ せて、それぞれ「 Spark Post 」「 Spark Page 」「 Spa rk ice 」と名称を変更し、一連のファミリーとし て統合されました。 コンと UI で構成されているため、英語力はそれ 英語版のみのサポートですが、シンプルなアイ ほど必要ありません。 0 Hey ん「 0 、ん ! W ト“ 00 旧 Y00 0 を 0 “。・ ? 0 0 Ad0be Spark 公式サイトより ■タナカヒロシ Spark POSt 「 post 」 ( 投稿 ) という名前から分かるとおり、投 稿用の画像を作るアプリです。 「 lnstagram 」「 Facebook 」 [T\vitter 」といった 「 SNS 用の画像」、あるいは「デスクトップヒ。ク チャ」 ( 壁紙 ) や「 Web バナー」などが作れます。 実際にさわってみて分かるのは、「投稿」するも のは「掲示物」 (poster) だ、ということです。 「 Web 版」と「 iOS 版」では、ほば同等の機能を 搭載しているものの、機能にいくつか差がありま す。 基本的に「 Web 版」のほうが高機能ですが、 部の機能 ( アニメーション作成 ) などは「 iOS 版」 専用のものもあります。 実際に使ってみて感じるのは、やはり「英語で こそ実力を発揮する」アプリだということです。 それは、ひとえに「フォント」のカです。 このアプリでは日本語入力にも対応していま すが、日本語で使えるフォントは、「ゴシック系」の みで、ウェイトをいくぶん変えられるのみです。 対して、英語であれば 40 種類以上のオリジナリ ティあふれるフォントが選べます。 73

最新バーツ図解 このコーナーでは、編集部が「これだ ! 」と思←ツ類を紹介していきます。 JAPANNEXT JN-IPS3200FHD 広視野角に優れた日 PS 液晶バネル」搭載の、低価格ディスプレイ 31.5 型旧 S - A ロ S 液晶ディスプレイ ( 1920X1080 ドット ) ■ arutanga 0 cm 薄型フレーム V 形スタンド く付属品 > ・ VGA ケープル ・ロⅥケープル ・ H ロ M ーケープル ・電源コード十 AC アタブタ ( AC100 ~ 240V 50 ~ 60Hz ) 外形寸法 - 720.5X171-0X50 ス Omm く端子バネル > く裏面 > 電源ボート ( ロ C 19V 3A) ・ ALJ 0 出力 XI ( H ロ使用時のみ ) ・ VGA X 1 ・ H ロ MII .4X1 ・ロ VI X 1 、、 (75mm x75mm) VESA マウント 【型名】 JN-lPS3200FHD 【発売元】 ( 株 )JAPANNEXT 重量 : 約 6kg 【販売価格】 29 , 970 円 ( 税抜 ) 【 URL 】 http://www.japannext.jp.net/?page—id=3583

Adobe Spark 「ビジュアル・コンテンツ」を作成するためのアプリ = 日本人の感覚でいうと、自分の声で解説する のは少し気恥ずかしいようにも思いますが、たと えば旅行先の写真を説明しながら、それを保存 しておけたら、ひとつの思い出になりそうです。 「 SparkPage 」が「静的なヴィジュアルストー ー」だとしたら、「 Spark Voice 」は「動的」と言え るでしよう。 “・・ 0d00002 LTE く 11 : 43 ・ 34 % をつ lntroducewho'sorganizÉngtheevent. 0 Ho に【 eco 「 d Spark VOice の Ul(iPhone) ・・・・ 0 d000n9 LTE 0 500 呂測 d 旧 gT ・Ⅱ Wandering Guitar 0 使ん ( 0n0 THEMATIC 日朝明 T Bringing Change ROUSING Cup 研釦「 Music の第 34 、・ : つ Done 音楽も選べる 流行るにはカリスマ的なコンテンツが必要 「 Ad0be Spark 」は、現在のソーシャル時代、か つモバイルファースト時代において、新しい価値 観を生み出しました。 「投稿とはこうあるもの」といったような従来の 価値観を破るポテンシャルを秘めています。 「 SNS 」は、「テキスト」で、「写真」で、そして「動 画」でつながっていました。 「 Ad0beSpark 」は、これに新たに「グラフィック」 「 web ページ」「ナレーション」を加えようという試 みです。 実際のところ、 Adobe のモバイルアプリとして ははじめての出世作と言うべき存在でしよう。 Adobe は「 iPad 」の登場以降、 2011 年に「 Ad0be Touch Apps 」、 2015 年には「 Creative Cloud 」連 携のアプリなど、機会あるごとに新しいアプリを リリースしてきましたが、正直な話、決して「成 功した」とは言い難いものばかりです。 過去のアプリでアップデートを繰り返して着実 に成長を続けたアプリは、「 AdobeIdeas 」などの 一部だけです。 対して、今回の「 Adobe Spark 」は、 ない動きです。 Adobe の本気が伺えます。 これまでに 現在、「 Adobe Spark 」はすべて無料サービスで すが、今後は有料サービスも検討している、との ことです。 たとえば、「 Adobe SIate 」は簡単に Web ページ を作り出すことができますが、ヘッダの左には 「 Adobe Spark 」のアイコンが表示され、フッタに は大きく「 Made with Adobe Spark page 」の文字 が表示されます。 もしも「有料サービス化」して、独自ドメインで 利用できたり、 Adobe の広告表示を外すことがで きたら、これまで以上に ーズが生まれるかもし れません。 ただし、この Adobe の動きに、決して追い風が 吹いているとは言い難い状況です。 「 Twitter 」や「 Facebook 」 [lnstagram 」を愛好する ユーザーに求められるのは、スピードです。 「 Adobe Spark 」もアプリとしての速度は充分で すが、コンテンツを公開しようと考えたとき、 Adobe のサービスを介さなくてはならないのは、 意外と大きなハードルです。 このハードルを越えさせることができるかどう そのためには、この「 Adobe Spark 」を活用でき るカリスマ的な存在が必要だと、私は考えます。 75