出張時の持ち物リスト
何回か移動しているので、もはや手慣れたものですが、それでも忘れ物があるので、覚え書きです。スケジュールを調べて、逆算して行動すること！
- 携帯、充電
- アイフォン、充電
- ワイマックス、充電
- パソコン、充電
- マウス、USBメモリ
- 現金、クレジットカード、保険証、会員証
- 資料、チケット、領収書
- アウター（2日分）
- インナー（パンツ、靴下、Tシャツ）
- 常備薬（よいどめ、頭痛薬、胃薬、目薬）
- 歯ブラシ、歯磨き粉、化粧品
- ライター、タバコ
docファイルをWordを開かずに確認する
Web制作に限らず、Wordファイル（doc、docxファイル）を確認しなければいけないシチュエーションは多くあると思います。
ただ、ちらっと見たいだけなのに、Wordを起動するのは良い気分ではありません。起動に60秒、docxだったらdocへの変換に30秒、文章を開くのに30秒、細かい時間の積み重ねが、やがて大変な時間の積み重ねになるでしょう。
そこで「xdoc2txt」という「PDF,WORD,EXCEL,一太郎などの各種バイナリ文書からテキストを抽出」する大変便利なソフトを見つけましたので、こちらを使いましょう！スタイルは付いていないので、分かりづらいかもしれませんが、ざっと内容を確認することができるので、大変便利です。
ただ、GUIが提供されていませんので、コマンドラインから使用しなければいけません。ダブルクリックしても、ファイルをD&Dしても、黒い画面が一瞬現れて消えてしまいます。そこで、コマンドラインから使用しなくてもよいよう、バッチファイルを制作しました。以下内容のバッチファイルを「xdoc2txt.exe」と同じフォルダに格納します。
@echo off "%~d0%~p0\xdoc2txt.exe" %* pause echo on
あとは、このバッチファイルに開きたいdocファイルをD&Dすれば、簡単にdoc文章をプレビューすることが出来ます。 xlsやpdfも開けちゃいますので、これからもバンバン使えそうです。バッチファイルを以下にアップしましたので、保存が面倒な方はこのファイルをご利用ください。（Windows XPで動作確認）
http://tshinobu.com/lab/batch/xdoc2txt.bat
Sublime Text 2 で Zen Coding
Wraps content with abbreviation (Alt + Shift + W) のデモです。
Dreamweaverの拡張機能で操作する場合は、(Ctrl+Shift+A) です。
小学校１～６年で学習する漢字以外の漢字にマッチする正規表現
[^(あ-ん)(ア-ン)(a-z)(@-~)(0-9)\n\-―<>:;/=。、・「」『』（）！？々”"／ー－ 一右雨円王音下火花貝学気九休玉金空月犬見口校左三山子四糸字耳七車手十出女小上森人水正生青夕石赤千川先早草足村大男竹中虫町天田土二日入年白八百文木本名目立力林六五引羽雲園遠何科夏家歌画回会海絵外角楽活間丸岩顔汽記帰弓牛魚京強教近兄形計元言原戸古午後語工公広交光考行高黄合谷国黒今才細作算止市矢姉思紙寺自時室社弱首秋週春書少場色食心新親図数西声星晴切雪船線前組走多太体台地池知茶昼長鳥朝直通弟店点電刀冬当東答頭同道読内南肉馬売買麦半番父風分聞米歩母方北毎妹万明鳴毛門夜野友用曜来里理話悪安暗医委意育員院飲運泳駅央横屋温化荷界階寒感漢館岸起期客究急級宮球去橋業曲局銀区苦具君係軽血決研県庫湖向幸港号根祭皿仕死使始指歯詩次事持式実写者主守取酒受州拾終習集住重宿所暑助昭消商章勝乗植申身神真深進世整昔全相送想息速族他打対待代第題炭短談着注柱丁帳調追定庭笛鉄転都度投豆島湯登等動童農波配倍箱畑発反坂板皮悲美鼻筆氷表秒病品負部服福物平返勉放味命面問役薬由油有遊予羊洋葉陽様落流旅両緑礼列練路和開愛案以衣位囲胃印英栄塩億加果貨課芽改械害各覚完官管関観願希季紀喜旗器機議求泣救給挙漁共協鏡競極訓軍郡径型景芸欠結建健験固功好候航康告差菜最材昨札刷殺察参産散残士氏史司試児治辞失借種周祝順初松笑唱焼象照賞臣信成省清静席積折節説浅戦選然争倉巣束側続卒孫帯隊達単置仲貯兆腸低底停的典伝徒努灯堂働特得毒熱念敗梅博飯飛費必票標不夫付府副粉兵別辺変便包法望牧末満未脈民無約勇要養浴利陸良料量輪類令冷例歴連老労録街圧移因永営衛易益液演応往桜恩可仮価河過賀解格確額刊幹慣眼基寄規技義逆久旧居許境均禁句群経潔件券険検限現減故個護効厚耕鉱構興講混査再災妻採際在財罪雑酸賛支志枝師資飼示似識質舎謝授修述術準序招承証条状常情織職制性政勢精製税責績接設舌絶銭祖素総造像増則測属率損退貸態団断築張提程適敵統銅導徳独任燃能破犯判版比肥非備俵評貧布婦富武復複仏編弁保墓報豊防貿暴務夢迷綿輸余預容略留領快異遺域宇映延沿我灰拡革閣割株干巻看簡危机貴疑吸供胸郷勤筋系敬警劇激穴絹権憲源厳己呼誤后孝皇紅降鋼刻穀骨困砂座済裁策冊蚕至私姿視詞誌磁射捨尺若樹収宗就衆従縦縮熟純処署諸除将傷障城蒸針仁垂推寸盛聖誠宣専泉洗染善奏窓創装層操蔵臓存尊宅担探誕段暖値宙忠著庁頂潮賃痛展討党糖届難乳認納脳派拝背肺俳班晩否批秘腹奮並陛閉片補暮宝訪亡忘棒枚幕密盟模訳郵優幼欲翌乱卵覧裏律臨朗論揮]
参考資料：学年別漢字配当表 - Wikipedia
Sublime Text2でCtrl+Tabによるタブの切替をタブの順序どおりにする
Sublime Text2 を使い始めています。ある勉強会で @hiloki さんが使っているのを見てから、美麗で玄人指向な外観・機能に一目惚れしました。WindowsでもMacでも動作する点、ガシガシJSONで設定していく点、ガシガシPythonでプラグイン開発できる点に感動しています。まだまだ日本語の資料が少ないのか（？）よくわかっていませんが、使っていてとても楽しい気持ちになるツールなのは間違いないです。
まだまだ操作方法は模索中ですが、まずは自分好みにカスタマイズすべく、Ctrl+Tab / Ctrl+Shift+Tab によるタブ切り替え方法を変えてみました。
初期状態では「最後に使用した文書に切り替える」仕様です。私はこの挙動が好きではないので、これを「右のタブに移動する」「左のタブに移動する」に設定変更します。（ブラウザのタブ等で一般的な挙動ですね）
「Preferences」 から 「Key bindings - User」 を選択して、以下記述を追加します。上書き保存すれば、Ctrl+Tabや、Ctrl+Shift+Tabで「右のタブに移動する」「左のタブに移動する」のようにタブ切り替えができるようになります。
{ "keys": ["ctrl+tab"], "command": "next_view" },
{ "keys": ["ctrl+shift+tab"], "command": "prev_view" },
{ "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
{ "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" }
いいですね！！何もかも掌握できるような感じがたまらないですね！！
なお、備忘録までに、EmEditorも初期状態は同様の仕様ですが、以下のように「ツール」→「カスタマイズ」→「ウィンドウ」の「次の文書コマンドで最後に使用した文書に切り替える」にチェックを外せば、「右のタブに移動する」「左のタブに移動する」のようにタブ切り替えができるようになります。
http://jp.emeditor.com/modules/xoopsfaq/index.php?cat_id=9#q99
LESSでclearfixを挿入するミックスイン
Google検索すれば見つかるレベルかもしれませんが、LESSでclearfixを挿入するミックスインを作りましたので覚え書きします。まず、clearfixを挿入するミックスインを定義します。
.clearfix(){
zoom:1;
&:after{ content:""; display:block; clear:both; }
}
clearfixを挿入したい部分に、以下のように記述すれば、
.title{
.clearfix();
}
コンパイルした時に、以下のように出力されます。
.title{zoom:1;}
.title:after{content:"";display:block;clear:both;}
LESSはこのような書き方もできるのですね。本体に適用する用と:afterに適用する用と分けてミックスインを作っていたのですが、ひとつのミックスインで完結することができて、ちょっと感動しました。
WindowsではじめるLESS
「LESS」とはなにか。1/28(土)に開催された「CSS Holic vol.8」で、何人かにお伺いすると当たり前のように使っているよというCSSメタ言語。それから３週間後に「SwapSkills Vol.25 CSSを便利に使うためのLESS入門」というCSSメタ言語の代表格である「LESS」について詳しい解説が聞けるイベントがありました。ずっと頭の片隅で気になりつつ、なかなか調べられなかったのですが、久しぶりに業務でがっつりコーディングする機会が得られたので、トライしてみました。
概要はなんとなく理解できるのだけども、具体的にどうしたらいいのか？分からないのが実は「インストール」でした。JavaScriptで動作する、Node.jsで動作する、Rubyで稼働させる、いろいろ方法があってよく分からなかったのですが、JavaScriptで動かす場合は、ローカル環境で動かなかったり、コンパイルどうするの？っていう問題がありました。Node.js、Rubyは黒い画面が苦手でよくわかりませんでした。
ということで、Windows環境では「WinLess」をインストールするのが一番簡単そうです。
インストールが終われば「Add folder」から、LESSファイルを置くディレクトリを追加して、あとはLESSファイル（*.less）を書けば、このソフトがLESSファイル（*.less）をCSSファイル（*.css）に変換（コンパイル）してくれます。
設定で「Automatically compile files when saved」にチェックを入れれば、LESSファイルの変更・保存を監視して、変更・保存するたびにコンパイルをおこなってくれるので、いちいちコンパイルボタンを押さなくてもOK。とても楽ちんです。そして、HTMLからは従来通りCSSファイルを読み込むだけで、テスト環境も公開環境もパス等を変えずに、LESSライフを楽しめちゃいます。
正直、変数を使ったり、ミックスインしたり、セレクタのネストとかしたって、ほんのちょっとしかラクにならないんじゃないの？って思ってたんですが、本当に数時間単位で作業がラクになります。クロスブラウザ対応を心配していたのですが、トリッキーな記述もそのまま残してくれるので、まったく問題なし。なによりも、プログラマラブルにCSSを書くことができるので、CSSを書く作業がとにかく楽しくなります。
ちなみに、今回採用してみた案件では、このような感じになりました。１ページ規模なのでそんなにインパクトはありませんでしたが、作業時間で言うと30分ほどは短縮できました。
- 文字数4527／行244（LESS）
- 文字数4859／行36（CSS出力：Minify）
- 文字数5551／行257（CSS出力：Minifyなし）
ある程度の規模であったり、CSS3、グリッド・バーティカルリズムや、レスポンシブウェブデザインを採用したサイト設計では欠かせなくなってくるでしょう。
LESSで文字サイズをピクセル値からパーセント値に変換するミックスイン
LESSはじめました。CSSを書く際、文字サイズは小数点二桁までのパーセント値で指定していたのですが（もちろん都度電卓で計算して）、LESSでその作業を簡略化できないかと思い、文字サイズをピクセル値からパーセント値に変換して指定するミックスインを作りましたので覚え書きしておきます。
あらかじめ、ベースとなる文字サイズと、文字サイズ変換用のミックスインを定義しておきます。
@base-font-size: 14;
.fontSize(@px){ font-size:percentage((@px/@base-font-size)); }
文字サイズを指定する部分で、以下のように記述すれば、
.memo{ .fontSize(11); }
コンパイルした時に、以下のように出力されます。
.memo{ font-size:78.57142857142857%; }
すごく便利だと思います。
他にもこんな方法があるよとか、もっと効率のよい方法があれば、ぜひぜひ、教えてください。
関連記事：
HTMLでのidとclassの使いどころ
しばしば、HTMLにおけるid属性とclass属性の使い所は、議論の対象になると思います。たとえば、テンプレート部分の要素は、どのような名称で、どのような組み方で設計するかということで、１～２時間は盛り上がるのではないでしょうか。これらの問題でちょっとした議論に遭遇しましたので、私の考えを記録しておきます。
個人的には、テンプレート部分において、<div id=”header”> のような作り方は、好きではありません。<div class=”str-header”>のような作り方であるべき、と考えます。
まず、HTMLにおいて、id属性は使用しません。私はid属性はJavaScriptで操作する部分以外は基本的に使用しないとルールを決めています。id属性はJavaScript操作用・イレギュラー対応用に残しておくべきです。たとえば、<div class=”notice”>というモジュールを、サイトのいろいろなところで使っているとして、あるページだけこのモジュールの色を変えるとしたらどうしましょう。<div class=”notice tokubetuna-notice”>ないし、<div class=”notice” id=”tokubetuna-notice”>として、スタイル付けすればOKです。<div id=”notice”>で最初設計していたらどうでしょう。<div id=”notice2”>のようにスタイルを複製したり、<div id=”notice-wrap”><div id=”notice”>のようにラップしないと効率良くスタイル付けできません。
次に、属性値には接頭語を付加します。str, mod, cmn, blk 等、サイト単位で一貫性が保たれていれば、なんでもかまいません。なぜ、headerでなく、接頭語を付加するかというと、コンテンツ部分など細かい単位でヘッダーは存在するからです。これはHTML5のセクショニングにおいてheader要素を中身に入れられることでも明らかです。ランディングページを移植する、サイトをリニューアルするなど、さまざまなシチュエーションで、ヘッダーは重複します。サイト全体のヘッダーであることを明らかにしましょう。
テンプレートは基本変更しないものですが、テンプレート単位で見ても、モジュール単位で見ても、サイト制作では何が起こってもおかしくはありません。基本の発想として、安全策はとっておいて、間違いありません。
