レスポンシブデザインやフラットデザインが Web の主流となったことで、JPEG や PNG などのビットマップ画像を使った装飾よりも、変形に向く CSS(スタイルシート) のみで装飾を行うケースが増えてきました。
ウェブデザイナーであればスタイルシートで可能な表現についてはよく知っていると思いますが、ウェブが専門でないデザイナーさんはスタイルシートでどの程度のことができるのかよく知らない場合が多いです。
そこで、なるべく技術的な内容を排したデザイナー向けの見本を作りました。何かの参考になればと思います。
TinyMCE(4.x)ではリンク挿入ボタンや画像選択ボタンを押すとダイアログがポップアップ表示されますが、レスポンシブに非対応なため、iPhone や Android などのスマートフォンでは見切れてしまい全体を表示できません。
そこで、TinyMCE に用意されたポップアップウィンドウを利用せず、Bootstrap(v3) などで作った独自のモーダルダイアログを表示するプラグインを作ってみます。
プラグイン名は「myplugin」で、ボタンを押すとダイアログが表示され、決定ボタンで「Hello, World!」という文字が挿入されます。
まずは tinymce/plugins/myplugin/plugin.min.js となるようにプラグインフォルダと JS ファイルを作成します。
plugin.min.js の内容は下記のとおりです。
tinymce.PluginManager.add('myplugin', function( editor ) {
editor.addCommand('MyCommand', function() {
window.myObj.open(editor);
});
editor.addButton('myplugin', {
text: 'My Plugin',
icon: false,
tooltip: 'This is my plugin.',
cmd: 'MyCommand',
});
editor.addMenuItem('myplugin', {
text: 'My Plugin',
cmd: 'MyCommand',
context: 'insert',
prependToContext: true
});
});
editor.addCommand() でボタンやメニューを押した時の動作を登録します。コマンド名は「MyCommand」としましたが自由に一意な名前をつけて下さい。editor.addButton() でボタンが追加され、editor.addMenuItem() でメニューが追加されます。cmd には先ほどのコマンド名を指定します。
addCommand() を使わずにメニューやボタンに直接 onclick を持たせる書き方もあります。この場合コマンドは登録されないので execCommand() では呼び出せなくなります。
tinymce.PluginManager.add('myplugin', function( editor ) {
editor.addButton('myplugin', {
text: 'My Plugin',
icon: false,
tooltip: 'This is my plugin.',
onclick: function(){ window.myObj.open(editor); }
});
editor.addMenuItem('myplugin', {
text: 'My Plugin',
onclick: function(){ window.myObj.open(editor); },
context: 'insert',
prependToContext: true
});
});
TinyMCE を表示するフォームは次のようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/tinymce/tinymce.min.js"></script>
<script>
var myObj;
$(function(){
var editor;
myObj = {
init: function(){
$('#mySubmit').on('click', myObj.insert);
},
open: function(ed){
editor = ed;
$('#myModal').modal('show');
},
insert: function(){
editor.execCommand('mceInsertContent', false, "Hello, World!");
$('#myModal').modal('hide');
}
};
$(document).ready(function(){
myObj.init();
});
});
</script>
<script>
tinymce.init({
selector: '#wysiwyg',
plugins: ["myplugin"],
toolbar: "myplugin"
});
</script>
</head>
<body>
<div class="container">
<h1>TinyMCE Demo</h1>
<textarea id="wysiwyg"></textarea>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="mySubmit">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
下記は TinyMCE の初期設定部分です。
selector にエディタを表示する textarea の ID を指定し、plugins に今回使用するプラグイン名「myplugin」を指定します。ツールバーにも表示する場合は toolbar にも指定します。
tinymce.init({
selector: '#wysiwyg',
plugins: [ "myplugin"],
toolbar: "myplugin"
});
</script>
myObj.open() ではダイアログの表示処理を、myObj.insert() ではテキストエリアに文字を挿入する処理が行われます。open() 時にプラグインから渡された editor を受け取って保管しておき、insert() でそれを使います。editor.execCommand() は TinyMCE の各種コマンドを実行できます。今回はテキストの挿入なので mceInsertContent を使いました。その他のコマンドはこちらに掲載されています。(ver.3.x用)
PHP で Gmail などの 外部 SMTP サーバーからメールを送信する場合、Swift Mailer というライブラリがよく使われています。初期設定ではメールの文字コードは UTF-8 が使われているので、一部の古いメールクライアントソフトでは文字化けを起こしてしまう可能性があります。そこで、昔ながらの ISO-2022-JP でメールを送信する方法について説明します。
インストールには Composer が必要です。こちらからダウンロード＆インストールしておいて下さい。Windows には .exe 形式のインストーラーがあります。Mac や Linux の場合はターミナルで次のように入力します。
$ curl -sS https://getcomposer.org/installer | php $ sudo mv composer.phar /usr/bin/composer
次は Swift Mailer をインストールするために適当なフォルダを作ります。ターミナル（コマンドプロンプト）を使ってそのフォルダに移動し、次のコマンドを入力します
$ composer require swiftmailer/swiftmailer
すると composer.json や vendor フォルダなどが生成されます。vendor フォルダにある autoload.php を require_once などで読み込むことで利用できるようになります。
composer による管理を行わない場合は swiftmailer の lib フォルダだけを取り出して 「lib/swift_required.php」 をrequire_once で読み込む形でも利用可能です。
<?php
require_one __DIR__ . '/vendor/autoload.php';
// アカウントの設定
$config = array(
'host' => 'smtp.gmail.com',
'port' => 465,
'user' => 'example@gmail.com',
'pass' => 'password',
'encryption' => 'ssl'
);
// メールの内容
$subject = '件名です';
$body = '本文です';
$from = array('example@gmail.com' => '送信者名');
$to = array('to@example.com' => '受信者名');
// 日本語に関する初期設定
Swift::init(function () {
Swift_DependencyContainer::getInstance()
->register('mime.qpheaderencoder')
->asAliasOf('mime.base64headerencoder');
Swift_Preferences::getInstance()->setCharset('iso-2022-jp');
});
// SMTP サーバーとの接続設定
$transport = Swift_SmtpTransport::newInstance($config['host'], $config['port'])
->setUsername($config['user'])
->setPassword($config['pass'])
->setEncryption($config['encryption']);
$mailer = Swift_Mailer::newInstance($transport);
// メールの作成
$message = Swift_Message::newInstance()
->setCharset('iso-2022-jp')
->setEncoder(Swift_Encoding::get7BitEncoding())
->setSubject($subject)
->setFrom($from)
->setTo($to)
->setBody($body);
// 送信
$result = $mailer->send($message);
例では Gmail の SMTP サーバーからメールを送っています。送信サーバーによってはポートや暗号化方法も異なってくるので環境に合わせて設定を書き換えて下さい。暗号化方法(encryption)には tls と ssl が指定できます。$from や $to を連想配列で指定すると名前を表示できます。配列を使わずに文字列でメールアドレスだけを指定することもできます。
Swift::init() の部分でデフォルトとなる文字コードを指定しています。ここで「iso-2022-jp」を指定しておくと件名や送信者名が ISO-2022-JP（base64）に自動的に変換されます。Swift_Message::newInstance() の部分でも setCharset() が使われていますが、こちらはメッセージ本文にのみ影響します。Swift::init() を行わずに Swift_Message だけに ISO-2022-JP を指定すると、件名と送信者名などは UTF-8(quoted-printable)、本文は ISO-2022-JP という状態になってしまいます。逆に Swift::init() でISO-2022-JP を指定しておけば Swift_Message でのデフォルト文字コードも ISO-2022-JP になっているので、Swift_Message 部分での setCharset() を省略しても実際には問題ありません。