画像 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 を、たとえば次のように追加します。

/assets/image-name.png

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

画像を挿入するには、Media menu で Add Media を開き、Files、Photo Library、Stock Photos、YouTube のいずれかを選びます。すでに Media Manager にある画像をタップして挿入することもできます。また、画像をドラッグ＆ドロップするか、URL をコピー＆ペーストで直接 Presenter に入れることもできます。

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

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

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

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

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

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

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

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

画像オプション

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

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

/Theme/image1.jpg

size: contain

x: right

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

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

サイズを設定する

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

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

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

画像における Cover と Contain の違い

配置を選ぶ

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

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

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

順序

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