freoはじめて物語(5) メディア機能を使いこなそう
- Post date：2014/07/01
- Category：freoはじめて物語
第4回までで記事投稿の仕方を紹介しました。今回は少し趣向を変えて、より便利にfreoを使えるかもしれない「メディア管理」を解説します。
- メディア管理ってなに？
- メディア管理をつかって画像を掲載してみよう
- 画像を削除＆サムネイル機能を使ってみよう
- ディレクトリを作ってみよう
- メディア管理を利用したさまざまな使い方の紹介
メディア管理ってなに？
第3回と第4回では画像を掲載するときには「添付ファイル」機能を使いました。
こちらは記事のひとつひとつにファイルを紐付けて画像掲載を行うので、とても簡単な操作で画像を掲載することができますが、一方でテンプレートで定められた場所から掲載位置を変更できなかったり、別のページで同じ画像を使うにはアップロードしなおさなければならなかったり、複数の画像をまとめて掲載することができません。
そこで使用するのが「メディア管理」です。
この「メディア管理」とはなんなのかをざっくり説明すると、freoのどこからでもその中身を呼び出せる共有ディレクトリ（フォルダ）とそれを管理する機能、というところでしょうか。
たとえばFTPソフトなどでfreoの設置ディレクトリを開くと、「files」ディレクトリ内に「media_」から始まるディレクトリ群をみることができます。これらがメディア管理を使ってファイルの出し入れができる共有ディレクトリです。
ここにアップロードされた画像はHTMLタグを使って呼び出すのはもちろん、のちのち説明する各種プラグインから便利に使うことができます。
記事投稿においても、
- 記事内に複数の画像を掲載できる
- 掲載位置を調整できる
- 一度アップすれば他の記事でも使いまわせる
といった特徴があり、使いこなせるようになるとよりfreoを便利に使えるようになります。
メディア管理をつかって画像を掲載してみよう
では早速管理画面からメディア管理を使って、投稿記事に画像を掲載してみましょう。
メディア管理で画像をアップロードする場合は、主に二つの経路があります。どちらも同じ「media」フォルダにアップロードされるので、使いやすいほうを選択しましょう。
- 左側の一覧から「メディア管理」をクリックし、表示された画面の「メディアを登録する」をクリックします。
- エントリーもしくはページの入力フォームを開き、本文フォームの上にある「＋」マークのついたアイコンをクリックします。
このあとの画面は1番と2番で多少見た目は異なりますが、名称や機能はまったく同じです。今回は1番を使ったときの画面で進めます。
表示された画面の「ファイル」ボタンをクリックすると、アップロード画像を選択できます。またメディア管理では複数ファイルを一度にアップロードできます。まとめてアップしたい場合は「ファイル選択欄を追加」をクリックすると、
クリックした数だけ入力フォームが増えるので、必要な数だけクリックして画像を指定しましょう。指定し終えたら「登録する」をクリックで完了です。
表示された画面で緑文字で「ファイルを新規に登録しました」と表示され、画面下の一覧にさきほど選択した画像のファイル名と縮小画像が表示されていたらアップロード成功です。
ではアップロードした画像を記事に掲載します。今回は以前登録したエントリー記事に編集して画像を追加します。
左側から「エントリー登録」をクリックし、画像を掲載したい記事の「編集」をクリックします。
まず編集画面の本文入力フォームにカーソルを移動し、画像を起きたい場所で一度クリックしましょう。のちのちその位置に画像が挿入されます。
次に、上部にあるアイコン（＋がないほう）をクリックします。
にゅるっとした動作でメディア管理ウィンドウが開きました。そして記事に掲載したい画像の「挿入」をクリックします。
画像が挿入されました。問題なければ「確認する」or「登録する」をクリックして完了です。
「エントリーを編集しました」が表示されたら成功です。記事を確認するときは一覧リストの「確認」というリンクをクリックすると、直接記事ページを開けるので活用しましょう。
挿入した画像が表示されました！ ですが、元画像が大きすぎてはみ出ていますね。
画像を適宜画像編集ツールで縮小して掲載しなおせば直せますが、ここではfreoの画像縮小機能を使って指定の大きさにしてみましょう。
画像を削除＆サムネイル機能を使ってみよう
添付ファイル記事に自動サムネイル作成機能やオリジナル画像の縮小機能があったように、メディア管理でアップロードした画像にも自動で画像を縮小してくれる機能があります。
そろそろおなじみになってきた「設定管理」のページを開きます。
今回は「メディアの設定」をクリックします。
表示された画面の「ファイル」欄まで画面をスクロールし、「サムネイル画像の自動作成機能」を「利用しない」から「利用する」に変更します。その下のフォームから縮小画像の最大縦横サイズを指定できます。
「オリジナル画像の自動縮小機能」は任意で利用するといいでしょう。
すべて記入したら「設定する」をクリックします。
「メディアの設定を編集しました」を表示されたら完了です。ではメディア管理画面に戻りましょう。
画面左から「メディア管理」を選択しメディア管理の画面を開きます。
ここで解説。アップロードした画像からサムネイル（＆縮小画像）が作成されるのは、入力フォームからアップロードしたタイミングのみです。そのため、すでにアップ済みの画像にサムネイルをつけるには、いったん削除し改めてアップロードしなおす必要があります。
画像の削除方法は、一覧の「削除」というリンクをクリックすれば完了です。
緑文字で「ファイルを削除しました。」という表示が出たら削除成功です。すべて削除したら今度は「メディアを登録する」から再アップロードを行いましょう。
サムネイル画像を「利用する」にしているとファイル登録画面にサムネイルの縦横サイズの入力フォームが表示されています。設定管理で入力した数値が初期値に入っていますが、ここで数値を変えることも可能です。
では先ほどと同じく「ファイル」から画像を選択し、「登録する」をクリックします。
「ファイルを新規に登録しました。」と表示されたらアップロード成功です。再びエントリー画面に戻ります。
おそらく本文にはさきほどの大きな画像が残っていると思われるので、その場合は画像をクリック→Deleteキーで削除できます。
工程はさくっと省略し、目的の画像の「挿入」をクリックします。
画像が挿入されました！ 入力フォーム内でも指定したサムネイルサイズに縮小されていますね。
同じように複数の画像を挿入してみました。このようにメディア管理では任意の場所に画像を設置できます。準備ができたら「登録する」をクリックしましょう。
記事の編集が完了しました。では実際に記事ページを見てみましょう。
どの画像がその機能で掲載されているのかをまとめてみました。
初期デザインや多くのテンプレートでは「添付ファイル」を使った画像は記事の一番上に表示されます。一方、メディア機能で掲載した画像は、投稿者の任意で掲載位置を調整できるのがわかるかと思います。
ここでワンポイント。添付ファイルは位置が調整できない代わりに記事そのもののアイコン/サムネイル画像として一覧ページなどでも使われますが、メディア機能で挿入した画像は基本的にそういった引用は行われません。使用しているテンプレートがどのようなレイアウトになっているか、事前に確認しておくといいでしょう。
ディレクトリを作ってみよう
メディア管理は複数のファイルを一度でアップロードできたり、記事内にいくつも掲載できるため、気がつけばたくさんの画像をアップロードしてしまいがちです。その画像を整頓するために、メディア管理にはファイルを収める「ディレクトリ（フォルダ）」を作成する機能があります。ぜひ便利に使いこなしましょう。
ではディレクトリの作成方法の解説です。
メディア管理を開き「ディレクトリを作成する」をクリックします。
表示された画面の「ディレクトリ名」に半角英数字で任意の文字を入力します。
入力し終えたら「作成する」をクリックします。
ディレクトリが作成されました！ では作成したディレクトリ内にファイルをアップロードするため「開く」をクリックしましょう。
表示された画面の「この階層にメディアを登録する」をクリックすると、これまでと同じアップロード画面が出てくるので、さくっとファイルをアップロードしましょう。
ディレクトリ内へのアップロード完了です！ もちろんこれらはエントリーやページ記事内で使用することもできます。
通常通りエントリーまたはページの編集画面をひらき、本文フォーム上にあるメディア管理アイコンをクリックします。
表示された画面にさきほど作成したディレクトリが追加されているので「開く」をクリックします。
あとはこれまでと同じように「挿入」をクリックすると本文フォームに画像を掲載できます。
画像の挿入が完了したら「登録する」で記事登録をします。
おつかれさまです！ 画像掲載できました！
メディア管理を利用したさまざまな使い方の紹介
メディア管理でアップロードした画像は、記事掲載する以外にもさまざまな形で使用することができます。ここではそういった応用例を紹介します。
ディレクトリ内の画像を一覧表示しよう
エントリーやページ記事内に掲載しなくても、特定ディレクトリ内の画像を一括で表示できます。実装にはプラグインの導入が必要です。
このプラグインを使えば、たとえば画像投稿のために毎回記事をたてなくてもディレクトリ内に画像をアップロードするだけで公開することができます。
スライドショーを実装する
時間が経過すると掲載画像が入れ替わる「スライドショー」機能を、メディア管理でアップロードした画像を使って掲載できます（要メディア表示プラグイン＆jQuery）
ウェブサイトのワンポイントに使うと画面が華やかになる世間でも人気の高い機能ですね。
Pixivの漫画機能のようなコミックビューワーを使う
Pixivの漫画投稿作品（例：チョビマンガ）のように、メディア管理で特定ディレクトリにアップロードした連作画像を、クリックするたびに次ページに遷移できるコミックビューワーに掲載することができます。
また当サイトのテンプレート紹介ページで、複数舞にわたってスクリーンショットを掲載しているページではこちらのプラグインを使っています。
テキスト（TXT）ファイルを掲載しよう
実はメディア管理では画像ファイル以外のファイル形式もアップロードできます。その代表的な使用例として、テキストファイルをアップロードするとテキスト内容を自動でfreo上に掲載してくれるプラグインがあります。
今回は記事内容が煩雑になるため紹介にとどめています。詳しい設置のやり方や使い方は、紹介したリンク先の記事をご確認ください。
ただ紹介文の中で多用した「プラグイン」については改めて解説記事を書きますので、よろしければお付き合いください。
予告
今回までの内容で記事を投稿したり、ファイルをアップロードするといったfreoの基本的な機能を使えるようになりました。次回ではこれらの基本機能を拡張し、さらにfreoを便利にする「プラグイン」の使い方をご紹介します。