‘研修資料’ カテゴリの記事
CSSが使えなかった頃と比べると、構造（HTML）と見た目（CSS）が分離されているので、かなり保守は楽になりました。
それでも欲が出てくるもので、CSSは何かと面倒。
CSSのここが面倒
例えば、入れ子になった要素に属性を指定するとき。
div#container
{
・・・
}
div#container div#left-area
{
・・・
}
div#container div#left-area div.widget
{
・・・
}
↑のような記述を書いていると、イライラしてきます。
特に、後からクラス名やIDを変えた時に、全部変えないといけないのが嫌で嫌でたまらない。
あとは、色とか文字の大きさを変えるとき。それこそ、あちこちに散らばっているので、面倒極まりない。
SASS を試してみた
SASSを使うと、上述のCSSは↓のように入れ子構造で書けます。
div#container
{
・・・
div#left-area
{
・・・
div.widget
{
・・・
}
}
}
他にも、変数が使えたり、関数（っぽい記述）が使えたりと、少しでもプログラムが組める人ならば、CSSに抱いていた不満がかなり解消されると思います。
SASSの文法に関しては、「続きはWEBで」ってことで、ここではWordPressに導入した時の注意点を。
プラグイン：WordPress SASS
WordPress SASSというプラグインを使いました。
基本はプラグインの説明ページ（英語）の通りにやればいいのですが、なんだか改行が入っていなくて読みにくいのでそのままでは動きませんでした。
注意1 : function.php に書く記述
説明ページに書いてあるコードは改行が入っていないので、そのままでは動きません。正しくはこう。
// Enables SASS to CSS automatic generation
function generate_css()
{
if(function_exists('wpsass_define_stylesheet')) wpsass_define_stylesheet("style.scss", "style.css");
}
add_action( 'after_setup_theme', 'generate_css' );
注意2 : style.css のパーミッション
説明ページには775にしろって書いてあるけど、環境によってはNG。今回導入したサーバでは、Apache君が書き込みできるようにしておく必要があります。今回入れたところはApacheが別のユーザで動いているので、所有者をApacheユーザにしたうえで、644 。
注意3 : SASSの文法
どうもSASSの記述法には何種類か（少なくとも2種類）あるみたい。
初めにここの記述を試したがまったく動かない。設定が間違えているのかと思い、何度も見なおしたけど原因が分からなかった。
でも、ここの書き方だと、すんなりと動いた。
世の中猫も杓子もスマートフォンのような風潮ですが、アクセス解析を見るかぎりではまだまだ携帯電話（いわゆるガラケー）が圧倒的に優勢です。
当然、サイトを作る際にも携帯電話を無視するわけにはいかないので、携帯用にもページを作ります。
HTTPリクエストの UserAgent を見て PC 用のページと 携帯用のページを切り替えるようにしているのですが・・・。
困ったこと
困ったことがいくつか出てきました。まずは、今回のケースでやりたいことを書いておきます。
- 携帯電話専用ページにしたいので、PCからアクセスがあったら QRコードのページへリダイレクトする。
- 携帯電話からのアクセスだったら、コンテンツを表示する。
- 検索エンジンからも利用者を誘導する。
これらのために、携帯 or PC での振り分け、QRコード作成＆リダイレクト、検索エンジンへの登録、を行ないました。
PCでアクセスすると、期待通りQRコードのページへとリダイレクトされ、そのQRを使って携帯電話で目的のページにアクセスできました。
携帯電話で、URLを入れてアクセスすると、これも期待通り目的のページが表示されました。
ところが、検索すると思った通りになりません。
まず、検索結果の中身が、リダイレクト先（QRコード表示用ページ）になっていました。これでは中身に何を書いても検索キーワードに反映されません。
また、検索結果をクリックすると、Google や Yahoo が（勝手に）携帯電話用に変換してしまう。ずっと下の方にある「ページを直接表示する」で、目的のページを表示できるものの、そんなことをしてくれる一般ユーザはまずいないだろう。
問題点
1つ目の問題点は「検索エンジンが（目的のページではなく）リダイレクト先のページをクロールしている」こと。
2つ目は「元々携帯電話用に作ったページなのに、GoogleやYahooが携帯電話ように変換してしまう」こと。
これは携帯用のページだ！
2つ目はわりとあっさりと解決。Google に説明があったので、コレの通りにしました。
この指定は（同じエンジンを使っているから当然ですが）Yahooにも効果がありました。
リダイレクト前の内容をクロールしろ！
ページのリダイレクトに、meta タグの redirect 要素を使っていたのですが、どうやら検索エンジンはこの要素をたどってくれるらしい。
ほとんどの場合はその方が好都合なのですが、今回のケースでは余計なお世話。
そこで、どうやら「検索エンジンはJavaScriptを無視する」らしいことを利用して、JavaScript( location.href ) でリダイレクトするようにしました。
解決
以上の対策で、目的が達成できました。
とあるお客様からの相談で、「（Webサイトの）画像をクリックしたら、声が流れるようにしたいけど、できるものですかね？」という案件をいただいていました。
その当時は、私たちとは別の業者さんがサイト管理をされていたので、あまり深入りせずに「できますよ。今は私がサイトを触るわけにはいかないので、声の録音方法と、業者さんに送る方法を教えますね」程度の対応に留めておきました。
確かに要求事項はクリアしているけど・・・
数日後、件のお客様から「お陰さまでできました」と連絡があり、そのページを見せてもらいました。
殺風景なプレイヤー
画像をクリックすると、別ページに遷移して殺風景なプレイヤーが表示されて声が流れ始めました。ファイルのダウンロード速度もやや気になる。
参考のためにコードを見てみると、お客さんが送ったwavファイルに a タグでリンクを張っているだけでした。HTML5対応のブラウザならば内蔵プレイヤーで、そうでなければプラグインのプレイヤーで再生されるわけです。
うーん、確かに「画像をクリックしたら声が流れる」という要求はクリアしているし、お客さんも文句はないみたいだけど・・・。本当にこれでいいのか？
今回の要求の意図しているところって、「見ている人が画像（サイト主の顔のイラスト）をクリックしてみたら、声が出てきてびっくり」みたいな遊び心＆いたずら心なんじゃないかと思うのですよ。少なくとも、私はそう受け取りました。
それが、ページは遷移しちゃう（声の主のイラストが見えなくなる）わ戻るボタンを押さなきゃいけないわでは、仕掛けの魅力が半減ですよ。
ある案件で、Excelシートを全自動で作る必要が出ました。
まあ、その程度はVBAで解決・・・、と思ったら、条件付き書式に指定した式がずれてしまう・・・。
初めは凡ミスかと思ってコードを確認しても、おかしな点は見当たらない。
で、ネットで調べてみたら、マイクロソフト公認のExcelのバグでした。
バグの概要
バグが発生する条件は、
- Excel2000以降（少なくとも2007では発生）
- 条件付き書式はVBAで指定する
- 条件は 相対セル参照 で指定する
- 選択したセル以外に条件付き書式を指定する
というもの。詳細はマイクロソフトのページをみてください。
回避方法
今回の案件では、上の3つはどうしても回避できない項目でした。
（マイクロソフトのページでは、「VBA使うな」とか「絶対参照で書け」なんて回避方法が紹介されてました）
でも、最後の「選択したセル以外に～」という項目は回避できます。
要は、「条件付き書式を指定したいセルを選択しておけばOK」ということです。
実際、そのようにコードを組んだら、あっさりと解決しました。
ちなみに、マイクロソフトのページにあったコードを、この方法で回避するとこうなります。
Sub Example()
Dim rOrgSelect As Range
ThisWorkbook.Worksheets(1).Range("A1").Select
With ThisWorkbook.Worksheets(1).Range("B1")
Set rOrgSelect = Selection
.Select
.FormatConditions.Delete
.FormatConditions.Add Type:=xlExpression, _
Formula1:="=A1=1"
.FormatConditions(1).Interior.ColorIndex = 46
End With
rOrgSelect.Select
End Sub
2,6,7,15行目が、Excelのバグを回避のために追加した行です。
最新用語がすぐに変換できるようになる辞書や予測変換が便利なGoogle 日本語入力。
たまに（ひっそりと）停止してしまうのが玉にキズです。
そんな時の対処方法です。
- [ALT]+[半角/全角] で日本語入力をONにする（すると、MS-IMEなど別のIMEが動く）
- [Shift]+[Ctrl]でIMEを切り替える
（設定によっては、[Shift]+[Ctrl]ではないかも）
以前から気になっていた PHPフレームワーク 「CakePHP」 を使ってみました。
実際に使った小技などはこれから紹介していくとして、感想から。
第一印象：なんか気持ち悪い
第一印象は「なんか気持ち悪い」でした。
というのは、CakePHP の思想 「設定より規約」に慣れていなかったためです。
長い間 C++ を使っていた私にとっては、PHPなどのスクリプト系言語で宣言しなくても変数が使えるというのが、元々とても気持が悪いものでした。
CakePHP はそれに加えて、ちょっとしたファイルを何個か書くだけでDBアプリができてしまうのです。
「規約」に従ってさえいれば、この「ちょっとしたファイル」には SQL文どころか、テーブル名すら書く必要がありません。その規約も、「テーブル名は名詞の複数形」「クラス名は大文字で始まる単数形」とかその程度。
宣言や定義なしで動くというのが、なんか恐ろしいような気持ちの悪いものでした。
今の印象：これは楽しい
しかし少し使ってみて仕組みが分かってくると、印象がガラリと変わりました。
とにかく楽（らく）なのです。
例えば password というフォームを作ったら、たいてい ***** で表示したいし、 DB では password フィールドに格納したいですよね。
普通ならそれらをコードで書いていくわけなのですが、CakePHP はそれらを勝手にやってくれます。
DBにはフォーム名と同じフィールドに入れてくれるし、型や名前にふさわしいGUI部品にしてくれるのです。
ゴチャゴチャとしたコーディング作業の時間が大幅に短縮され、モノづくり本来の楽しみ（人によって違うでしょうが・・・）に使えるな、と思います。
これから少しずつでも、CakePHPの魅力を伝えていきます。CakePHP の習得に二の足を踏んでいる方の背中を押せたら嬉しいですね。
何回かに分けて、SmartyでPEAR::Auth を使うためのサンプルを説明しています。
「その4でひとまず終わり」と思っていたら、動かないというご指摘を頂きまして、login.tpl を載せていないことに気が付きました。
ついでに、書き忘れていた注意点も。
login.tpl
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<title>{$smarty.const.APPLICATION_TITLE_NAME}</title>
</head>
<body>
<form method="post" action="{$smarty.server.PHP_SELF}">
<table>
<tr>
<th>ユーザー名</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>パスワード</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ログイン"></td>
</tr>
</table>
</form>
</body>
</html>
ログインページのテンプレートです。
PEAR::Auth の仕様で、input の name 属性は、ユーザ名は username 、パスワードは password 固定です。
注意点
今までのことで書き忘れていたことです。
template_c のアクセス権
Smarty はテンプレートをコンパイルして template_c ディレクトリに置きます。
Smarty は HTTPサーバのユーザ（ apache など ）の権限で動いており、一方 ftp などで template_c を作ると各ユーザの所有になります。
なので、アクセス権は 777 になっていないとダメかもしれません（ ユーザ apache が読み書きできる必要がある）。
文字コード
サンプルはUnicode用にしています。
それ以外の文字コードの場合は、テンプレートファイル（*.tpl）のcharset を変更（Shift_JIS や EUC-JP）してください。
PEAR のパッケージ
PEARのパッケージは始めから全部はいっていないので、必要に応じてインストールしてください。
インストールされているかの確認はコマンドラインから。
pear list
今回のサンプルでは少なくとも Auth と DB のパッケージが必要です。
もしインストールされていなければ、
pear install Auth
などとして、インストールしてください。
何回かに分けて、SmartyでPEAR::Auth を使うためのサンプルを説明しています。
今回は今まで作った Smarty や 認証用のクラスを使ったページを作ります。
何回かに分けて、SmartyでPEAR::Auth を使うためのサンプルを説明しています。
今回はPEAR::Authを拡張して認証用のクラスを作ります。
それと、ユーザ名とパスワードを保存するためのデータベースを作成し、テスト用のユーザを追加します。
何回かに分けて、SmartyでPEAR::Auth を使うためのサンプルを説明しています。
今回は、まだ本題には入らずに、定数定義やSmartyのお約束部分です。