徒然なるままに

久々にsedの活躍の場 大量のWebを扱う話は継続しております。 よくよく、調べてみると恐ろしげな記述があちこちに… 表があって、その中に金額の一覧が作られているんだけど、ソースコードを見ると <td>¥500-</td> とか書かれているわけですよ。 でもって、これをレンダリングすれば、[ \500- ] となるわけです。 ちなみに、[ ] が表だと思ってください。 これが、1ページに40ヶ所程度。×60ページ。 やる気が失せますわ…。 そこで、sedの出番となるわけです。 何がしないといけないのかというと、 「¥」→「&yen;」に置き換えれば良いだけの話。 これならワンライナーでOKっぽい。 sed -i -e 's/\\/\&yen;/g' www/*/*.html 結局、これだけですね。 ファイル全体で置換して、結果をファイルに上書き保存。 でもって、フォルダが60個ほど分けて保存されているので、その中のhtmlファイルを指定してやればOK。 実際に実行してやると、ほんの1秒足らずで終了してくれます。 こんなの手作業でやる気にならないもんね〜。 テストする時間を入れても、10分もかかっていないので、良い選択をしたなとw こういった処理はスクリプト書くより、sedやawkの方が早いですゎ。 でも、エディタやらGUIベースのツール使ってたりすると、何時間もかけちゃったりするんだろうな、普通は。

素人すぎですよ 製作途中で放置されているサイトの依頼を受けて、少し前からチェック等していましたが…。 確かに、それなりに表示されているものの、中身がひどくてメンテナンスをどうやるか悩むレベル。 いろんな情報を提供する目的なんだろうけど、元のファイルをコピーして書きなおしている感じで、DBも使わず、サーバサイドで処理もせず、CSSもほぼなし。 ざっと300ファイル（全部html）で、やたらと全角スペースでレイアウトされているstaticなページ。 これを直すのは正直嫌です。 しかも、各ファイルの先頭に <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = '/smartphone/'; }</script> そして、smartphoneフォルダには何もない。 だから、PCと同じページを見に来るとNot Found多発地帯という地雷まで完備。 この設計意味が分かりません。変更が発生した場合は、どうするつもりだったんでしょう？？？ 1つずつ直すのか？それとも、何かジェネレータプログラムが作ってあって、ガシガシと吐き出しているのだろうか？ スマートフォンでも見えるように修正 まずは、現状のhtmlを見せれば、not foundは解決するので、scriptを無効にしたい。 とはいっても、300も1つ1つ直すのはコンピュータ使いのやることじゃない。 ここはperlでサクッと処理したい所。 調べてみると、TreeBuilderが良さそう。こんなことがなきゃ、この手のライブラリを使うことも無いだろうなんて思いながら、テストコードを書いてみる。  # perl -MCPA

Webの作成はやっぱりエディタ ここ最近は、Webの開発を急ピッチで行っているのだけれども、結局Editorで書くのが一番早いわけです。 前にも紹介したSublime text 2をメインで使っていると、他のエディタが霞んでしまうくらい快適で…。 html+css+php+jquery+bootstrapなんて今風の組み合わせなんで、補完とか便利すぎです。 少々時間があったので、以前から気になっていたツールを試すことに。 その名はBrackets こいつも、基本はシンプルなweb用エディタですが、pluginが大量にあってsublime txte 2と同じ名称のものもありましたw こいつのすごいところは、chromeとの連携が可能で、Liveプレビューが面白い。 まずBrackets側からLivePreviewを指示すると、chromeを再起動すると言ってくるのでOKすると、再起動後タブが開いて、編集中のコードのプレビューが表示される。 しかも、Liveなのでコードを編集すると同時にプレビューが変化するわけで…。素敵〜 で試しにやっているところをキャプチャしてみました。 赤枠で囲っている部分左側がエディタ。右がchromeのプレビューで…。 驚くほどスムーズです。 pluginはとりあえずemmetを入れましたので、タグの補完なんかは気持ちよ〜くやってくれます。（sublimeも同名のがありますね） しかし、この環境はすごいですね〜。 今までなら、編集→保存→ブラウザを選択→更新→確認という一連の作業が 編集→確認になってしまう！！ しかも、画面構成はシンプルでSublime text 2 に似ているですな…。サイドバーの辺りが…。 ちゅうことで、しばらく試してみようと思っています。 firefoxにも対応してくれると普及するのかもしれないなぁ。 要求される動作環境は、Windows/Macです。Linuxもubuntuには対応してるようです。 本家→http://brackets.io/ お試しあれ！ 参考URL 【オープンソース】Adobe Brackets を使ってみたよ【テキストエディタ】

準備通りに行かなかった件 専門学校でコマを受け持っていているんだけれども、HTML+PHP+MySQLの講義で、事前の準備とは裏腹に、予想を裏切る事柄があったので、今後のためにも…。 HTMLにCSSでレイアウトの説明をするために、いくつかサンプルを提示して、動作の確認を行わせている時のこと。 図のように、ブロック要素にfloatを設定して、後述の文章が回りこませる例を説明していた。 もちろん、事前にサンプルを作成し、正しく表示されることも確認済み。 そこで、文章は短いと回り込みが分からないので、適度にコピーで構わないから、テキストを入力するよう指示を行った。 ソースは以下の様に示して練習。 <p class="box1">box-1</p> <p class="box2">box-2</p> <p>文章が長い場合。…… </p> 殆どの学生は、同様なソースを作成し、フムフムと…。 しかも例示しているので、「文章が長い場合。」を連続して確認している。 ところが…。 1名だけ、動作がおかしいですと…。見ると、確かに回りこみはされず、しかも、改行を入れるとそこで改行されて表示される。 ソースをよく見たけど、設定に問題は無さそう。 そして、改行してみると<pre>でもないのに、改行されて表示される…。 chromeのDeveloper ToolでCSS等も確認してみたものの、何らサンプルと相違なし。もしやと思い、<p>aaaaaa…</p>を日本語に置き換えてみたら、正しく動作。 そう、サンプルが英字だけだったため問題が発生していたのだった。本来英語はスペースで単語を区切るため、スペースで回りこみを実行する。もちろんnowrap指定しない場合。 ところが、スペース無しで「a」だけを続けて入力したため、非常に長い単語と判断しているようだ…。改行を入れるとそこで、単語の区切りと認識するもののfloat指定したboxの隙間よりも単語が長いために、下に追いやられていたという事が判明。 おかげで、こちらも良い勉強になりましたわ。こちらの予想外のサンプルを作ってくれる学生のお