近頃の、とあるR。

買い替えの動機は

今のPCは3年目。正直、パワー不足は感じていません。そりゃ、コーダーですからねぇ(・ω・)確かに軽い作業が多いです。
何故買い換えるかと言えば、一番は「不安対策」。仕事が忙しいときほど「今飛んだら」などと恐ろしいイメージが沸いてしまいます。もちろん、そこそこ飛んでも大丈夫なようにはしているのですが、やはり、ロスは少なくありません。

確認環境の強化も

「お下がり」は予備機になります。しばらくはIE6も動作対象から外せませんので、予備の予備機も当分現役かな。予備になってませんね(・ω・)予備の予備の予備は古いノートPCかな。
古い確認環境を仮想化しておくのが最もエレガントな気もしますが、仮想環境ごと逝ってしまう事も考えると、ある程度は実機として分散させておいた方が良さそうです。近頃では、IETesterなんて素敵なものもあるようで、今度使ってみようかな。

悩んでる間が楽しい

PCに限らず、買うまでが楽しいですよね。
ちなみに前回はケース（筐体）で大失敗しました。ZPC-LCD MASTER （オフィシャルは何故か工事中。リンクはスペックも載っているどこぞのショップ）
今見ても、そこそこシンプルで可愛げのある形なのですが、届いてビックリ＼(^o^)／デカイでかすぎる。

デスマーチと呼ぶほどの絶望感は無いまでも、工エェ(´д｀)ェエ工 な状態の現場がままあります。たいした量ではないはずなのに、何故かドタバタと忙しく期間もかかってしまう、そんなケースを自己分析。
日頃の、優れたファクトリとの仕事が如何にありがたいかを実感できる、貴重なカオス時間(ﾉ∀`)

何故か忙しい

なぜか制作後に、同じページの内容が何度も変わる。

段階を踏めていない

段階をしっかり踏めていないと、後々「ヒックリカエル」事が増え、混乱する。

• 段取り（フレームワーク）が弱い
  • 擬音と笑いで打ち合わせが終わる
  • スケルトンなり、確認段階が省略されている
    • 実態よりも「カンタン」と思われていた為など
• コミュニケーションの齟齬
  • 顧客への説明が不十分
  • 段階に応じた顧客の要求を取り込めていない
  • 同現場への。

編集機能が弱い

編集。ディレクションが適当な場合。

• 様々な方向から指示が飛んでくる
  • 時に矛盾し、時系列さえ乱れている事も
• 指示に解釈の幅がある
  • その都度電話なりで聞ければ問題なしか
• 予算が無くディレクションがボランティア

実はとんでもない事がおきている

どこかが傾いている。もうそれどころじゃなかったり。
無い事になっていたり＼(^o^)／

思い起こせば、私も沢山迷惑を掛けましたとも。ええ。
そしてこれからも(・∀・)

基本的に、ヒトゴミは苦手です。精神がギリギリと磨り減るようです。
しかし、よくよく意識していると、どうやら苦手ではないヒトゴミもあり。

苦手なヒトゴミと大丈夫なヒトゴミ

苦手なヒトゴミ

• スーパーマーケット
• 改札

苦手ではないヒトゴミ

• 映画館
• 電車の車内

ただ人口密度が高いだけの所は全く大丈夫で、各人が意識的に動いている所が苦手なのかな。

意識のモード

スーパーなどでは、行きたい方向に行けないもどかしさにブリブリきます。「我」同士が当たる場所とでも言いましょうか。

譲りまくりモード

我ながら、急いでいないなら譲りまくれば良いじゃないですかねぇ。確かに、自身が譲りまくりモードの場合はあまり磨り減らないかもしれません。仙人モード。

とても急いでいるモード

逆に、最も楽なのは、自身が「とても」急いでいるモード。エイエイエイとヒトゴミを掻き分けて進めます。迷惑を掛けている場合も多そうですが、それを感じていない分、疲れません。おばちゃんモードですかね。

何故か急いでいるモード

最も多いのは「何故か」急いでいるモード。「行きたい」と思いながらもなかなか行けないもどかしさに苛まれ、ガンガン磨り減ります。ムキムキきます。でもこれって、客観的にみると、大抵は、急ぐ必要なんてないんですよね。変わり際の赤色信号に飛び込むようなもので、リスクと利益が釣り合っていない状態。無根拠、無意識に半端な動機があるから磨り減ってしまう何とも損な状態。無駄に磨り減るハンクラモード。

各モードの比率は１：１：８くらいでしょうか…スーパーは平日昼が最高(・∀・)

もうちょっと自覚すべきか

心に余裕が無い（自爆）のは薄々自覚しておりますが、無駄に磨り減るハンクラモードの時には深呼吸でもして譲るか行くかを意識すべきなのかもしれません。あとは、華麗な「受け流し」を体得するか…。
受け流しに関しては今だキッカケさえ意識できません＼(^o^)／

SyntaxHighlighterを入れてみました。

表示のズレ

私の環境ではcssが被って表示がずれてしまったので、SyntaxHighlighter.css を微調整。1行目にカンマを入れｗ6,7行目を追加。むむ、なんか変更点を文章で表現するのは早速格好悪いですね･ﾟ･(ﾉД`)･ﾟ･

.dp-highlighter,
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal;
	font-family: "Consolas", "Monaco", "Courier New",
	Courier, monospace !important;
	font-size: 12px;
}

専用タグを拡張

[code='css'] ここにコードを書く [/code]
等とするのがこのプラグインの書式です。
非常に便利なのですが、専用タグはなんかこう、ムズムズします。プラグインを変えた場合にコードとして扱われなってしまう痒さ。もっとも、専用タグを一括置換してしまえば良い気もします。
今回は、<pre>タグも専用タグとして使えるよう弄ってみました。

書き換えたソースも説明してみるつもりだったのですが、該当部が専用タグそのものなので上手く使えず･ﾟ･(ﾉД`)･ﾟ･
いきなり大失敗の予感です。

気が付けば私もマークアップエンジニアです。と言う訳で、チョット古いですが
「マークアップエンジニアはどこへ向かうべきか」を考察。

あぁでもコレ、どうみても「マークアップエンジニアの私はどこへ向かいたいか」ですよね。

皆々様、適性や趣向に合わせて精進なさっている事でしょうし。例え無意識であっても「マークアップエンジニアの本質とは」と問われた際に思い浮かぶ方向へ。例えば、写植なり、IAなり、デザインなり、ライティングなり、プログラミングなり、ディレクションなり、エンタメなり。

結論

今年中にあと２つ３つくらいCMSをかじってみようと思いました(゜Д゜)

私的変遷の整理

アプリケーションプログラマ→ホームページ制作者→ウェブディレクタ→HTMLコーダー
ノリで会社設立したものの、プログラミングで食えず、当時黎明期だった「ホームページ制作」を受注。黎明期は分業が進んでませんので、オールラウンダー（何でも屋）として成長。ビジュアルメイクのセンスが無くプログラミングは部下のが遥かに素敵だったため、自動的にディレクタ件雑用(笑)に。会社を軌道に乗せられず、現在フリー。

ざっくりこんな感じでしょうか(ﾉ∀`)

言うなれば、スキルアップに失敗した私。結果的に、今持っている「食える」程度のスキルはHTMLコーディングです。

• 「習得が楽」だったからかもしれません
• 「誰もやりたがらなかった」からかもしれません
• 「外注が捕まらなかった」からかもしれません
• 「適性があった」からかもしれません

そんな私の考察。

切磋琢磨の不要な職はない

(続きを読む…)

おのれｗMSめぇｗｗｗ

IEのデフォルトでは、背景扱いの画像が印刷されません。
「ツール→インターネットオプション→詳細→背景の色とイメージを印刷する」の呪文を唱える必要があります。IEは、なんでまたこんな深い場所に隠すのでしょう(ノД｀)ちなみにOperaは印刷時にサクっと選択できるので素敵です。

文字列代替画像

例えば、<h1>ページのタイトルだぜこんちきしょう</h1>等とタグを書きます。
そして、単純な装飾では足らず、画像に置換するケースが少なく無いのですが、これが、印刷されません。
「呪文」を唱えれば済むとは言え、そこをナントカしてくれという要望も存在します。

印刷専用時専用の画像をHTMLレベルで入れ込む

<img … class=”forprint” />などとし、印刷時（@media print）以外は 非表示（display:none;）に。
しかし、タギング的にモヤモヤしますし、これ実は非印刷時でもしっかり読みこまれてます。（少なくともIE6では）印刷用に大きな画像読んじゃおうかな！なんて欲張ると結構な転送量に。

印刷専用スタイルにする

画面の印象と大分変わってしまいます。それを逆手にとって「画面はモニタインタフェイス専用、刷れば即A4パンフ！」なコンセプトしてしまうのも手ではあります。

DOMスクリプティングで置換

なにやらJavaScriptで無理やり(笑)imgタグに置換する手段もあるようです。一見もっとも強引ですが、案外、エレガントかもしれません。

妙技

「背景印刷の注意書きでは駄目ですか…」と心を決めたそんな中、クライアントから（おいｗ）妙技を教わりました。
h1#sample{
color: #fff;
display: list-item;
list-style-image: url(head_bg.png);
list-style-position: inside;
letter-spacing: -1000em;
font-size: 1pt;
}
これ、無理やり「リスト化」し「ポインタ画像」として背景を読み込むと印刷される！という技のようです。
実際試してみると、width:0pxなど色々調整する必要があり、その上IE以外の主要ブラウザで表示出来ないという致命傷まで。残念(ﾉ∀`)

ん？なら、IEにだけ印刷スタイルを用意して、それで上記テクによる再置換をするのがベストか？
「背景印刷呪文」の弊害はIEのシェアの広さに起因しますので、いっそIEのみ対応で良いんじゃないかなと。
IEだけびブラウザ判定ならConditional commentsが使えるのも利点でしょうか。

<!–more–>
いわゆる「続きを読む」でページをたたむwordpressのタグです。たたんだ際に意図しない空行が入ってしまうことがありませんか？見出し直下で折りたたむのが悪いのですが(笑)だんだん気になってきて…って最初からソースを見ればよかったんですよね。

結論

行頭に入れるべし。
しかし…

ビフォアー

投稿時のエディタ上
<h3>そもそもマークアップは必要なのか</h3><!–more–>
HTMLコーダーとしては、そりゃ、あった方が良い。

画面出力

出力HTML
<h3>そもそもマークアップは必要なのか</h3>
<p><span id=”more-63″></span><br />
HTMLコーダーとしては、そりゃ、あった方が良い。

投稿時のエディタ上

<h3>そもそもマークアップは必要なのか</h3>
<!–more–>HTMLコーダーとしては、そりゃ、あった方が良い。
画面出力

出力HTML
<h3>そもそもマークアップは必要なのか</h3>
<p><span id=”more-63″></span>HTMLコーダーとしては、そりゃ、あった方が良い。

思い出した

なんで最初の頃、この空白に妥協したのかを。
「続きを読む」を押して飛ぶと、ビッタリ未読の続きに飛びます。つまり、見た記憶にない文字列が飛び先。しかも、上部に空間がなく正にビッタリ。折角、位置がビッタリ合っているのに、それに気付かず「あれどこだっけ？」とスクロールし、見た事のある行を探してしまいます。

ならば、２，３行戻った所に飛んでくれるのが良いのですが…一筋縄ではいかず、これも課題に。
そもそも、たたまなくても良いじゃんとも思います。たたまずに見やすい見せ方であれば。そうでない場合の格好良いたたみ方を実装したい。