• ぱっと作れそうな感じだったので
• 息抜き

• 明確な目的はなし．息抜き

• 色付きの数字が，その色名（英語）の文字位置にある1文字を表している，というもの（一つの色付き数字が一つのアルファベットに対応する）

Web standard 16 colors をベースに考えてみる．そのカラーネームにおいて，どの英文字がどの位置に現れるかを求めてみると次のような感じ（ExcelでFIND関数を使って整理）．

• navy, teal, lime, aqua, fuchsia, olive, maroon は日本人にはピンとこない（わかりづらい）ので不採用．
• gray と silver も判断に困るのでどちらか一択 → 今回は s と v を使いたいので silver を採用（gray の使用回避）．
• 結果的に，f, j, m, q, x, z を含むカラーがないので，これらの文字は暗号化されないことに．それ以外については，上表のオレンジで塗りつぶしたセルの値（とカラー）を使うことにする．

こんな感じでベタに書いてみる．
今回はcanvasを使って描くことに．フォームに入力された文字列から1文字ずつ取り出して，事前に定義した変換（テーブル）ルールに従って出力する．f, j, m, q, x, z, スペースはそのまま出力する．フォントサイズや文字送り幅は適当に設定．

htmlソースはこんな感じでどうでしょう．

<canvas id="cv" width="400" height="100" style="display:none;"></canvas>

<form name="myform">
	<input type="text" id="inputtext" placeholder="半角英小文字とスペース" pattern="^[a-z\s]+$" title="半角英小文字とスペースを入力してください" size="15" maxlength="15">
	<input type="button" value="暗号化" onclick="genImg();">
</form>

<div>
<img id="out">
<div id="msg"></div>
</div>

canvasの描画内容を画像（PNG）として出力させることにした．
（遊んでみたい人向けの注意！上記スクリプトはcanvasタグより後ろに記述 or 読み込むこと．）

こちらのページからどうぞ．

• さあ仕事しよう

• Basic HTML data types – 6.5 Colors

Hueman
http://alxmedia.se/themes/hueman/

• Hueman なサイトで記事（ページ）を印刷しようとすると，サイドバーの幅の影響で本文が表示されない．表示されたとしても，コンテンツ領域の幅が細く縦長に表示されてしまう．印刷できる状態でない．

• Hueman なサイトでちゃんと記事（ページ）をしっかり印刷できるようにする

• 個別記事（ページ）の本文を印刷できるようにする
• サイドバーやメニュー，ナビゲーション，関連記事等は印刷対象としない

• WordPress 4.2.2-ja
• Hueman 2.2.3
• 子テーマ（Hueman-Child）を作成してサイトデザイン・運営
• Layout は 3 Column Middle（左サイドにPrimary，中央はメインコンテンツ，右サイドにSecondary）

子テーマの style.css に印刷用の media query を定義し，元スタイルを上書きしていい感じに印刷できるようにする．子テーマを使わずに運用している人は，custom.css を有効にして追記すればよいかと

Chrome のデベロッパーツールで見てみる．
サイドバーの .s1 と .s2 クラスなオブジェクトのスタイルを単純に display:none; にすればできそう・・・だけど，印刷プレビューするとサイドバー分の空間が残ったまま（改善せず）．

原因は div の main-inner クラス要素の padding が効いてるからっぽい．

具体的には，.col-3cm（3カラム設定でコンテンツ中央のときに適用されるクラス）の下の .main-inner（画像参照）．

style.css の該当箇所を表示してみる．

ということで，その padding 指定部分を print 時に 0 になるようにする．

次のように style.css に追記．

@media print {
/* ページ幅を適当に決めるとよいと思う．auto でもよい人はそうしたほうが */
body { width:960px; }

/* 印刷に含めないものたち */
#nav-topbar,
#nav-header,
#nav-footer,
#footer-widgets,
#comments,
.sidebar,
.post-nav,
.content h4.heading,
.related-posts,
.s1, .s2 { display: none !important; }

/* main 領域の幅をフルに，main-inner の余計な padding や margin を除く */
.col-3cm .main { background: none repeat-y right 0; width:100%; }
.col-3cm .main-inner { background: none repeat-y left 0; padding: 0px; margin:0px; }
}

• とりあえずは記事本文を印刷できるようになった
• 画像の大きさが気になる・・・けどとりあえずはOKとする
• 3 Column Middle（col-3cm）じゃない人は，他の Layout のクラスで同じようにすればできるだろうと予想（試してはいない）
• 誰かうまいこと print.css を作って
• 何かあればコメント欄にどうぞ

meso-cacase / difff
https://github.com/meso-cacase/difff

• 息抜きに

• 上記参考サイト（GitHub）からファイルをダウンロードして設置
• perl, diff, 作業ディレクトリのパス等を編集
• 設置ディレクトリに .htaccess を置くなりして必要な設定を実施（ExecCGI とか DirectoryIndex とか）

こちらから
ただし学内からのアクセス限定

便利．感謝．

• meso-cacase / difff
  https://github.com/meso-cacase/difff

Shortcode API « WordPress Codex
http://codex.wordpress.org/Shortcode_API

WordPressの投稿画面から、PhotoshopやIllustratorのデータ（拡張子がPsdやAiのファイルデータ）をアップロードする方法
http://www.communitycom.jp/2012/10/01/wordpress-psd-ai/

• 以前に Java Applet ベースの ttyplayer を教育用に使っていた
  ⇒ JavaScript ぐらいで誰か作ってないかしら？
  ⇒ 発見。だけどそのままじゃ WordPress で使えない
  GitHub – https://github.com/encryptio/jsttyplay
• プラグインにしてしまおう
• .tty ファイルのURLを引数とした Shortcode にしてみようかしら

• WordPress 3.6.1

• （書こうと思ったけど省略）参考サイトの情報がとっても有益
• 下記 92行目～が shortcode 作成の部分
• 下記 23～81行目が設定ページ（Option、フォントを選択できる）作成の部分
• 下記 84～88行目が’upload_mimes’ に拡張子 .tty を追加する部分（メディア追加で .tty ファイルをアップロードできるようにする）

[jsttyplay url=”tty_file_path”] で動作する。
いろいろ良くないところを残したまま、とりあえず公開してみる。誰かもっと素敵に作ってください。

こちらから

• Shortcode API « WordPress Codex
  http://codex.wordpress.org/Shortcode_API
• WordPressの投稿画面から、PhotoshopやIllustratorのデータ（拡張子がPsdやAiのファイルデータ）をアップロードする方法
  http://www.communitycom.jp/2012/10/01/wordpress-psd-ai/