「こどもとスマホ」プロジェクトでのコンテンツの作成に際して、MS OfficeやAdobe CSなどのアプリケーションで苦労したことを記します。
お品書きは、・ふりがな付きコンテンツの作成、・イラスト入りPDFファイルの作成、・凝ったアニメ入りスライドの作成、の3点です。
はじめに
「こどもとスマホ」プロジェクトでは、2015年9月22日現在、以下の３つのコンテンツを無料配信しています。
- 児童・生徒向けの「インターネットで気をつける12のこと」というまんが冊子（以降「まんが版」）。
- 高校生以上保護者向けの「インターネットとの関わり方を考えるためのハンドブック」という冊子（以降「総合版」）。
- 先生やボランティアの講師の利用を想定した「スライド」（以降「スライド」）。
これらのコンテンツは、Windows PCとMS OfficeおよびAdobe CS5を利用して作成しました。
本稿では、これらのコンテンツの作成で苦労した以下の事項の試行錯誤を記しています。
- 子供が読めるようふりがなを振る。
- 印刷を視野に入れ、高解像度のイラストを元ファイルに貼り付ける。
- まんがの雰囲気が出せるアニメをスライドに貼り付ける。
試行錯誤であり、ベストプラクティスではありません。
しかし同じようなコンテンツを作成しようとしている人（ごく少数？）が同じことで悩まないように、また自身の忘備録として記しておきます。
ふりがなを付きコンテンツの作成
まんが版は小学校4年生でも読めるようにと、ふりがなを入れることが必須要件でした。
手書きのまんがの部分は、漫画家の方にお願いしてふりがなを手書きで入れて頂きましたが、解説の部分はワープロでふりがなを入れる必要がありました。
まず、ふりがな入りコンテンツ作成に際しての試行錯誤と、アプリの機能をご紹介します。
結論
結論から書きますと、総合版、まんが版ともAdobe InDesign CS5で作成しました。
しかしそれらのドラフトでは、MS Word 2013を利用していました。MS Office 2013でルビ（ふりがな）の機能があるのはWordだけです。
まんが版などはPowerPointのほうがレイアウトしやすいのですが、ふりがなのためだけにWordで試作していました。（以降、漢字に振りたいと意図するものを「ふりがな」、アプリの機能を「ルビ」と使い分けます。）
しかし、Word文書をPDFに出力すると、何かとずれてしまいます。総合版の表組では、罫線の太さが途中で変わったり、縦書きの見出しがセンターに来なかったりしました。
将来、印刷物として出版する可能性も考えると、ちゃんと組版した方がよいだろう、ということでリリース版はAdobe InDesignで作成することにしました。
Adobe CS5を持っていた、ということも大きいのですが。（ひとつ宝の持ち腐れにせずに済みました。）
各アプリのルビ機能
ここで、各アプリのルビ機能を簡単に見てみましょう。
MS Word 2013
MS Word 2013では、「ホーム」リボンの「フォント」カテゴリの中にルビ機能があります。
ルビを振りたい部分を選択してから、ルビのアイコンをクリックすると、下のようなダイアログが開きます。
ふりがなは自動で提案してくれます。「すべて適用」で同じ文字列には同じルビを振ってくれますので、文書が書き終わってからの作業にするとよいと思います。
MS PowerPoint 2013
PowerPoint 2013にはルビ機能がありません。苦肉の策として「Word Objectを貼る。」
「挿入」リボンの「テキスト」カテゴリにある、右下のアイコン（オブジェクト）をクリックします。
すると「オブジェクトの挿入」ダイアログが開くので、「Microsoft Word Document」を選択します。
Wordオブジェクトが開きます。リボンもWordのものに変わりますので、MS Word 2013の時と同様にふりがなを振ります。
しかしこの方法、レイアウトが直感的にできず、ストレスが溜まります。普通のスライドなら、別のテキストボックスにふりがなを書いて文字間隔を調整してルビにしたほうがよいかもしれません。
この方法は、スライド（pptmファイル）の「Thinking Time」の部分で使っています。
Adobe InDesign CS5
InDesignについてはCS5と古いこと、私が使い慣れていないということ、世の中にはもっと便利でキレイな方法があるだろうこと、から雰囲気だけご紹介です。
ルビを振りたい単語を選択した後「Ctrl+Alt+R」を押します。すると「ルビ」ダイアログが開きますので、ルビを入力します。
デフォルトの原稿用紙の設定ですとルビを入れるには行間が狭いです。ですので、最初に試しにルビ入りの文章を入力しながら、原稿用紙の設定をすることをお勧めします。
InDesignでは、さすがにWordよりきれいな組版が可能です。しか次章に書くような落とし穴もありました。
イラスト入りPDFファイルの作成
続いては、まんが版・総合版ともに行ったイラストの挿入に関する試行錯誤を書きたいと思います。
まんが・イラストの原稿は、手書きのA4サイズです。
デジタル化
最初に原稿のスキャンを、キンコーズのセルフの複合機で行いました。
600dpiで取り込めますし、スキャン前にガラスを拭いてくださいましたので、大分きれいにスキャンできました。
スキャン後のファイル形式はTIFです。複数の画像が一つのTIFファイルになっていましたので、バラす作業が必要でした。（Irfan Viewでやったような…覚えてません。）
そしてTIFをPhotoshopに貼り付け、白を塗ってゴミを取っていきました。根気のいる作業です。傾き補正もこの段階で行っています。
そして、A4一枚ごと600dpiのpsdファイルになりました。
InDesignへの貼りこみ
ここからの方法は試行錯誤です。以下の記述はベストではありません。もしかしたらメモリをいっぱい積んでいるPCなら余裕かもしれませんが、8GBでは苦しかったです。
まずIllustratorにpsdファイルをリンク貼り付けし、まんがやイラストごとに、アートボードに切り分けました。jpegなどに出力するときに一気に出力できますし、InDesignにもアートボードごとに挿入できます。
ここで横着して、一つのaiファイルに複数（3-4枚）のpsdファイルをリンクしたことが失敗だったかもしれません。
InDesignの原稿には、aiファイルの該当するイラスト（まんが）のアートボードを選択してリンク貼り付けしていきました。
トラブル発生
まんが版では、表紙、本文、巻末と、３つのinddファイル（InDesignのファイル形式）を作成し、それをブック（indbファイル）にまとめています。
まんが版がおおよそ形になった時にPDFに出力してみました。すると途中でエラーが発生して、中止してしまいます。
PCを再起動して、InDesignのみ起動した状態でPDFに出力すると、無事PDFができました。
その後修正をしていくと、Illustratorのaiファイルも、いろいろなアプリを立ち上げた後では開けなくなってしまいました。
最終的なPDFの出力
最終的にまんが版では、再起動直後でもブックからまとめてPDFに出力することができません。３つのファイルそれぞれをPDFに出力してから、それらをCubePDF Utilityという無料で使えるアプリで結合しています。
尚、InDesignからのPDF出力では、Web配信用に画像の解像度をおとしたものを出力しています。CubePDF Utilityを使ったところ、さらにサイズが小さくなりました。
PDF作成のまとめ
600dpiの画像をpsd→ai→inddとリンク貼り付けで持ちまわすのには無理があったかなあ、という感想です。どこかで中間出力をしておけば（例えばIllustratorで画像ファイルに出力しておくとか）もっと軽かったのでしょう。
しかしもう編集し直す気になれません。
Windows10にアップデートしてからは作業をしておりませんが、もしかしたらもう出力できないかもしれませんね～。逆に軽くなってる可能性もありますが。
（「Adobe CCのライセンスを買え、」というご意見はごもっともですが、CS5で十分です。）
凝ったアニメ入りスライドの作成
このプロジェクトでは、学校の先生やボランティアで啓発活動を行っている方々も利用できるようにと、PowerPointのスライドも作成しました。
まんがの各コマがクローズアップし、クリックすると次のコマへスクロールするアニメが入っています。
最後に、この凝ったアニメ入りのスライド作成にまつわる試行錯誤を書きたいと思います。
最初に結論
結局のところ、Adobe Flash ProffesionalでFlashのアニメを作成し、それをPowerPoint 2013にFlashオブジェクトとして挿入しています。pptmファイルですので、使い勝手は良くありません。（セキュリティ設定によっては、オブジェクトが無効になってしまいます。）
ファイルのサイズも43MByteと巨大で、ファイルが開くまでに時間がかかります。しかし、まんがのコマをクローズアップしてもきれいに見える元画像のサイズを検討した結果が、このサイズです。
PowerPointの利用
スライドの構想時に、そのユーザーとして学校の先生やボランティアの講師を想定していました。ですので、利用するアプリはターゲットが一番使っているであろうPowerPointに自ずと決定しました。
もしかしたらPowerPointのアニメ機能を駆使しても、想定したコマのクローズアップとスクロールはできるのかもしれません。しかし効率化と再利用を考え、専用のツールで作成することにしました。
Flashの回避
Flashは、Safariがもうサポートしていませんし、Chromeでもコンテンツ以外での表示をやめるというニュースがありました。さらに、Adobe Flash Playerのインストーラーをダウンロードするときに、気をつけないとMcAfee入りのインストーラーがダウンロードされてしまいます。（2015年9月22日現在では、McAfeeではなくChromeのようですね。）
次回に書きますが、McAfeeは「こどもとスマホ」のサイトを「悪質なサイト」と認定しています。そのようなツールを、ユーザーが意識しないでインストールしてしまうことは、正直なところ避けたいという思いもありました。（ユーザーがアンチウィルスソフトを入れている前提で、です。）
ということで、アニメーションの作成にはHTML5が第一選択になりました。
HTML5アニメの作成と貼り付け
HTML5アニメの試作には「Google Web Designer」を使いました。
デフォルトのイージングでは設定したコマに停止しない、という不具合はありましたが、イージングをいじって想定通りのアニメーションを作成することができました。
しかし 試作した HTMLを貼るため、PowerPoint 2013に MS Web Browserオブジェクトを挿入しようとすると、エラーが出てできません。
Google先生に聞くと、2013ではセキュリティのために挿入できなくなくなったとか、レジストリをいじるとできるようになるとかの記事がありました。
一方Flashは、 Shockwave Flashオブジエクトを貼ることで割と簡単に挿入できそうです。昔は Flashを貼るためにまわりの HTMLを書いて、それを Web Browserオブジェクトで挿入した記憶があるのですが。
セキュリティのための措置かもしれませんが、何か時代に逆行している感がある PowerPointです。
Flashの選択
という経緯で、スライドは（不本意ながら）PowerPoint 2013＋Flashという形になりました。
Shockwave Flashオブジエクトの貼り付けは、「開発」リボン（デフォルトの設定では表示されていません）から、コントロールとして貼り付けるので、ファイル形式もpptmになってしまいました。
今後は…
そんなこんなでスライドを作っていると、「Flashに深刻な脆弱性」のニュースが2回ほどありました。
また今後アプリ化することも視野に入れると、やはりアニメはHTML5で作成した方が良いとも思っています。
プレゼンのツールとしても、今後は逆行してるっぽいPowerPointを常に第一選択とする必要はないでしょう。
先生や講師などの想定ユーザーはメインではPowerPointを使うかもしれません。ですが、（Windowsでは）「ウィンドウズキー＋Tab」あるいは「Alt＋Tab」のショートカットで、プレゼンとまんがアプリを切り替えて使うことを提案したいと思っています。
2015年10月12日追記
このPowerPointのファイルを久々に編集しようとしたところ、保存しただけで次に開いた時に「壊れています。修復しますか？」というダイアログが表示され、修復してもFlashオブジェクトが全て消えてしまう、という状態になりました。Windows 10にアップデートしてから、初めての編集です。
べつのPC（Windows 10）でも現象が再現します。また数式3.0オブジェクトを貼り付けたファイルでも同様の現象が発生しました。ですので、PowerPoint2013かWindows 10の欠陥ではないかと推測しています。
ということで、PowerPointでのスライド開発は強制終了となりました。（回復方法が見つからない限りは。）
現状のファイルは、上書き保存して壊してしまうと取り返しが付きませんので、Read Onlyに設定しています。
まとめ
「こどもとスマホ」プロジェクトでのコンテンツの作成に際しての、アプリケーション上での試行錯誤を書きました。
ちょっと凝ったことをやろうとすると、ちょっとした不都合・不具合が現れます。
HTML5のオーサリングツールは、ただいま絶賛調査中です。フリーで良いものがあるとよいのですが。
次回は、「こどもとスマホ」サイトになされた「フィッシングサイト認定」との闘いを書きたいと思います。