管理画面上で作図や画像の加工ができるプラグイン「DrawIt (draw.io)」|Knowledge Base

公開日：2016(平成28)年8月6日／最終更新日： 2017(平成29)年10月29日

WordPressで画像やイラスト、図などを挿入するときどうしてますか？

撮りっぱなしの画像をアップロードするときはいいとして、加工したイラストや画像などを掲載する一般的な方法は、

パソコンで専用ソフトを使って加工する
サイトへアップロードして挿入する

という２つの手順を使う方法。慣れた方なら問題ないかもしれません。でもアップロードした後で再加工するときは？？面倒でそのままにしてしまったり、画像や図の挿入をしなくて済むようにしてしまったりすることありませんか？？。

図や画像などテキストでないコンテンツは一見するとあまりSEOとは関係ない印象もあるようですが、Googleの説明によればこれも重要なファクターとして認識して検索順位などを決定しているようです（確信的なことはGoogleのみぞ知るところです）。

ということは、見た目だけでなく、見やすさだけでなく、まず見てもらうための手段として図や画像を使ってより分かりやすいページの作成が必要ということですね。いくら書いても見てもらえなければ意味がないわけですから。

前置きはこのぐらいにして、今回紹介するDrawIt (draw.io)プラグインはこの作業が投稿編集画面の中でできてしまうとても便利なプラグインです。

このプラグインを使って作成した画像はいつでもWordPress上で再編集できますから、文章の編集とともにすべてが投稿編集画面でできてしまうようになります。

今までいろいろなプラグインをテストして紹介していますが、こういう動作をするプラグインは類を見ないと思います。まるで高度なペイントソフトがWordPressに備わったような感覚で簡単に画像の加工ができるようになります。

作成した画像はパソコンにダウンロードすることも可能（エクスポート機能）なので、他のサイトで使いまわすこともできます。

【DrawIt (draw.io)】プラグインの基本的な機能・できること

投稿編集画面からドローソフトが起動できる
作成した図や挿し絵、設計図などはメディアに保存されるので他のコンテンツやアイキャッチなどでも利用可能
このプラグインで作成したファイルはいつでも再加工可能
加工した図や画像はパソコンにエクスポート（保存）できる

作図するための機能として

たくさんのサンプル画像やイラストから自由に挿入できる
矢印やコネクタなど製図などに使う線が引ける
EXCELで言う「オートシェイプ」が使える
レイヤー機能がある
図形の拡大縮小や回転ができる
外部の図や写真を取り込んで使用できる

など、普通はパソコン上で使うようなソフトそのものがこのプラグイン１つで実装できます。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【DrawIt (draw.io)】プラグインの設定画面や表示の日本語化と翻訳

【DrawIt (draw.io)】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【DrawIt (draw.io)】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

このプラグインにはいくつかの設定項目がありますが、特に変更する箇所はありません。

【DrawIt (draw.io)】プラグインの基本的な使い方

テキストエディタでの説明をします

基本的な使い方

投稿編集画面で「DrawIt」というボタンをクリックすると別ウインドウが開きます

※最初に使う際、画面右側の地球マークをクリックすると言語が選択できますので日本語にします

あとはパソコン用のドロー（ペイント）ソフトと同様にいろいろと加工して保存します

編集画面に戻り、画像を表示するためのコードが挿入されていることを確認して完了です

加工に関しては使っていただくしか説明のしようがありませんので今回の説明では省略します。とにかく触っていると時間がどんどん過ぎてしまう位簡単に、しかもいろいろな加工ができます。

また、同一画面上で作成した画像をパソコンなどに保存できるエクスポート機能も使えます（インポートもできます）

保存した画像の取り扱い

投稿の「公開」または「更新」、「下書き保存」などをクリックして一旦投稿を保存します
１で保存された画像はメディアに保存されていますので、他の投稿などでも利用できるようになります

画像を再編集するには

投稿に挿入されている画像タグ全体をドラッグした後「DrawIt」ボタンをクリックしてください。「DrawIt」プラグインで加工した画像であれば別画面に加工可能な状態で表示されます。
※最初に加工して挿入されたタグでも、保存してメディアから挿入したタグでもきちんと判断されるようです

使用上の注意点

このプラグインを使って作った画像は再編集できるように一時ファイルが作成されます。その分だけ単純にサーバーの容量を使うことになります。
加工する画像には自由に名前を付けられますが以下のようになりますから留意してください
- マルチバイト文字に対応していないので日本語でタイトルを付けるとエンコードされ長くて見にくいタイトルになります
- 恐らくですが、メディア保存されたタイトルと一時ファイルのタイトルが同一の場合のみ再編集が可能になります
加工した画像を挿入後、投稿を保存することでメディアに保存されるのですが、保存される度に新たなファイルが作成されてしまうようです。
1. 一度だけ投稿を保存
2. 一旦作成したときにできた画像タグは削除して再度保存
3. メディアから画像を挿入

という手順で行うと無意味な画像が増えることを防げます

【DrawIt (draw.io)】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

一旦使い始めてしまうと、もう外部で画像を加工してアップしてみて「あれ？ここもうちょっと・・・」となって面倒なのでそのまま・・・ということがなくなりますから大変重宝しています。画像加工といってもウインドウズのペイントとは比べ物にならない位使いやすいですし、専用フリーソフトの「GIMP」などのように複雑で分からないということもありませんから、手軽に使用できます。

昔ポスターや掲示物などを作るときにＪｕｓｔｓｙｓｔｅｍの「ラベルマイティ」というソフトを使っていたのですが、使い方そのものはそれと変わりません。画像入れて→大きさ変えて→回転させて→次の画像をいれて重ねて→文字を入れて・・・みたいに見ながら画像イメージそのものが簡単に作れます。

いろいろなプラグインを試用してきましたが、今までの中で一番秀逸なプラグインだと思います。