画像 iPhone

画像はストーリーを伝える助けになります。Presenter では、ローカルからでも Web からでも画像を追加できます。さらに、思いどおりに表示させるための細かな設定も数多く用意されています。

画像を追加する

画像を追加するには、Media menu、Unsplash 連携、あるいは単純なコピー＆ペーストやドラッグ＆ドロップを使います。iOS 版 Presenter では、ローカル画像の追加にも、インターネット上の画像への直接リンクにも対応しています。

Media menu は最初は半画面で開きます。上にスワイプするとメニュー全体が表示されます。

Presenter は複数の画像フォーマットに対応しています。

形式	拡張子
PNG	.apng, .png
GIF	.gif
WebP	.webp
JPEG	.jpg, .jpeg
TIFF	.tif, .tiff
SVG	.svg
PDF	.pdf

💡 Presenter でローカル画像を使うには、まず Media Manager に追加する必要があります。これで iA Presenter にそのファイルへのアクセス権が与えられます。Media menu から Add Media を選んでください。

構文

Presenter は画像用の Markdown 構文に対応しており、次のように入力できます。

![](image-name.png)

ただ、もっと簡単なのは Content Blocks Syntax を使う方法です。画像のパスや URL を追加するには、Media menu で Add Media を開き、Library、Files、Unsplash、YouTube のいずれかを選びます。すでに Media Manager にある画像をタップして挿入することもできます。最後に、画像をドラッグ＆ドロップするか、URL をコピー＆ペーストで直接 Presenter に入れることもできます。たとえば次のようにします。

/assets/image-name.png

https://source.net/image-name.jpeg

.iapresenter ファイルは、Markdown のプレゼンファイルと、追加した画像をまとめた .zip です。そのため、画像をプレゼンとは別に保管する必要はありません。ただし、URL でリンクした画像は含まれません。リンク先から読み込まれるため、オンラインで公開されたままにしておく必要があります。画像は Media menu から管理できます。

💡 同じ画像を複数のプレゼンでよく使うなら、custom theme に入れておくと手間を減らせます。

Presenter では画像用に 2 つの仮想フォルダを使います。

• assets: プレゼンに追加したグラフィック用。例 /assets/image-name.png
• theme: テーマに同梱された参照グラフィック用。例 /Theme/image.jpg

プレゼン内でグラフィック（画像や動画）を扱うときは asset フォルダを使います。レイアウトテーマ側のグラフィックを差し替えるときは theme フォルダを使います。

Media Menu

ツールバー左下の Media ボタンから Media menu を開けます。ここでは次のことができます。

• すべてのアセットを一覧で見る
• 画像を削除する（画像をタップして Delete を選ぶ）
• 画像名を変更したりプレビューしたりする（画像をタップして Rename または Quick Look を選ぶ）
• YouTube 動画リンクを追加する
• Unsplash 経由で画像を追加する

💡 Unsplash を使えば、無料で高品質な写真をすばやく見つけてスライドに挿入できます。Presenter は元画像にあるキャプションやクレジットも自動で追加します。Unsplash integration の記事や video もご覧ください。

画像オプション

Content Blocks Syntax を使っている場合は、metadata を使って画像のいくつかの表示設定を調整できます（この方法は Markdown 構文では使えません）。

Editor で画像ブロックをタップすると、上部にさまざまなオプションを含むフローティングメニューが表示されます。追加・削除した設定は、たとえば次のように Editor 上に表示されます。

/Theme/image1.jpg

size: contain

x: right

キーボード操作を続けたい場合は、代わりに画像コマンドを直接入力することもできます。たとえば次のようにします。

• size: contain
• x: left
• y: bottom
• background: true
• filter: lighten
• opacity: 50%

サイズを設定する

画像サイズは Cover か Contain のどちらかに設定できます。

Cover: アスペクト比を保ったまま、利用可能な空間を画像で完全に埋めます。画像の比率がコンテナと合わない場合は、一部が切り取られます。

Contain: アスペクト比を保ちながら、利用可能な空間に収まるよう表示します。画像の比率がコンテナと合わない場合は、上下または左右に余白ができます。

配置を選ぶ

選べる配置は次のとおりです。

• 横方向: Center（初期値）、Left、Right
• 縦方向: Center（初期値）、Top、Bottom

Presenter では画像は container の中に配置されます。container はスライド全体の場合もあれば、カラムやグリッド内の 1 セルの場合もあります。実際の縦横の位置は、画像と container のアスペクト比によって変わります。

初期状態では、画像は foreground 要素として扱われます。つまり、タイトルのような他の要素と同じ空間を共有します。必要なら、ほかの要素の背後に置く background に切り替えることもできます。

順序

画像の順序は Content（初期値）または Background から選べます。Background にすると、タイトルやほかの要素がその上に表示されます。画像が明るすぎたり複雑すぎたりして文字が読みにくい場合は、フィルターや不透明度を調整すると改善しやすくなります。

スタイル

画像には Lighten、Darken、Grayscale、Sepia、Blur の各フィルターをかけられ、不透明度も変更できます。画像を background として使い、その上に別の要素を重ねるときに特に便利です。

CSS に慣れている場合は、Custom Theme の中で CSS Class を作成し、画像のような content block に適用できます。

Editor から Custom Theme の CSS Class を呼び出すときは、Class: your css class name という簡単な書式を使ってください。

💡 iA Presenter で画像をレスポンシブに表示する仕組みはかなり複雑です。画像位置を無理に固定するための CSS Class や追加調整は、視聴側のデバイスによって予期しない結果を招くことがあるため、基本的にはおすすめしません。

説明

アクセシビリティ向上のため、画像にはタイトルと代替テキストを付けるのが望ましい方法です。

キャプションを追加する

キャプションを表示したい場合は、画像と一緒に #### を付けた H4 見出しとして入力します。

キャプションがどこに出るかは、画像とテキストをどの順で置くかによって決まります。どちらの順でも、文字サイズは変わりません。

H4 見出しを先に置く と、下の画像を紹介したり短く説明したりする形になります。逆に 画像を先に置く と、画像そのものが主役になり、その下のキャプションが補足説明になります。

画像