Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 メモ書き。社内説得用。「HTTPリクエストを減らすと高速化できるよ！」てのはよく聞くけど、それが「どうしてか」ってのを(読込待機時間まわりで)具体的な数字を出してることが意外と少なかったので。詳しくは参考リンクにGo! Webサイトを分析するWebアプリ PageSpeed Insights WebPagetest 参考資料など Webパフォーマンス最適化のためのコーディング手法, MOL @importを使うべきでない理由, Screw-Axis まずHTTPリクエストがコストが高い理由ですが、まあ同時読込できないからですよね。読込に1秒掛かる画像A,B,Cがあると

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Vim Advent Calendar 2011 43日目の記事です。というかもう2012年ですね！ あけましておめでとうございます。この度は前回の続き。本当は翌日にでも書くつもりだったけど伸ばしに伸びたWeb屋のためのVim特集をお送りします。初めに言っときますが、3部作です。つまりこの記事は2/3。どうしてこうなった。 Web屋のための Vim-Starter-kit Demo: Vim Starter-Kit from sigwyg on Vimeo. はい、けっきょく作ってしまったんですよ。初心者導入キット。黒い画面恐怖症の方々のためにGit依存しないように作

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Vim Advent Calendar 2011 19日目。 迫り来るX'dayに有形無形の圧力を感じつつ、それでも健気に生きる紳士淑女へ捧ぐ。全ての独身貴族の味方@sigwygです。飲みに行こうぜ！ さて、今回はWeb屋に向けて「Vim使おうぜ！」て記事を書こうかと思ってました。こないだのSugamoで「どんな記事がいいkana？」と訊いてみたところ、以下３点の意見が挙がりました。 初心者導入キット(汎用.vimrc) 定番プラグイン ファイルの開き方がそもそも判りづらい＞＜ うん、つまらん！ 初心者向け講座ってのは以前てきとーだけどやったことがあって、もっとマシに

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳） さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。

§2 Vimについて Vim = Vi IMproved もともとUnix環境で人気のあったViを改善したもの 最初は IMitationだったらしい Viそのものには大した機能はない。 強いて言うならーー Vi自体はコンパクトなので、 通信の遅い環境でネットワーク越しに作業するとかに向いている ぶっ壊れたサーバでEmacsが動かなくてもViなら動くとか まあこれくらいで良いですね §2 Vimについて Vimの特徴 CUIである Unixでは重要 高速なテキスト編集が可能 プログラムコードや設定ファイルの編集に特化 ファイル編集のための各種機能、拡張機能が充実 多言語、多コーデックに対応 大抵の言語において初めからシンタックスカラーが存在する 但し日本語は弱め。Kaoriya使おうね

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 1年以上前のSugamo.cssで出したネタ。もうちょい纏めてから出そうと思ってたけど、いつまでたっても手を付けられないうちに風化しだしてきたから、えいやっと張るだけ張ってみることにした。（サンプル） 何をやっているかというと、まあつまり、本文組の行間サイズで全部揃えてみたら心地良いリズムになるんじゃね？という実験。当然、毎回手動で各要素をpx調整するのはクールじゃないから、あらかじめ<p>とか<pre>とか<blockquote>とかにルールを設定しといて、テキスト流し込むだけで良い感じにならないかなー、と。 まあ結論としては、「こんなのWebじゃねぇ」といった感じ

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Note: Chart APIは現在ではGoogle Chartとして整理されており、この記事で利用されているImage Chart APIは旧仕様として削除対象になっています。実際に削除はされていないので今のところ利用できていますが、2015年中には消えてしまいそうです。(2015-08-31) JQueryプラグイン書いた。そう、最近ようやくJQuery使ってるんですよ。 まあ仕事でJS触る機会ってのもなかなかないのですが、そろそろ慣れとかないとSugamoでぼっちになりそ(ry。 さて、GoogleChartAPIでは<img>のsrc属性にパラメータ入れてリク

Make a note of it: Web tech, montaineering, and so on. Google Analytics（以下、GoAn）はimg要素を読み込むことリクエストを送信してて統計にカウントしてたから、同じようなURLを生成して送信すれば携帯サイトでもGoAnは利用できる。ただしCookieに値を保存できない携帯版だと幾つかの制約があって、簡単に言うと「全アクセスがユニーク扱いになる」。ここまでが前回のお話。 で、その後いろいろ試してみた結果。だいぶデータが見れるようになったので、公開してみる。統計に反映されるようになったデータを以下に記します。 滞在時間、滞在中のページビュー、直帰率 リピート数、ブラウザ、ＯＳ、ユーザ定義 参照サイト、参照元、検索エンジン、キーワード 幾つか怪しいデータもあるけど、まあ仕組みが解ってれば十分参考にはなるし。この手の統計って

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フィボナッチ数列というのは、簡単に言うと「隣り合う二項の和が次項の値になる」数列のこと(0, 1, 1, 2, 3, 5, 8, 13, 21, 34...)。植物の葉の付き方や、花弁の配置、星雲の渦巻きなど、自然界の至るところにあるため本質的な美を内包するとされ、多くのデザインで取り入れられています。 有名なところではローマの詩人ウェルギリウスが叙事詩『アエネイス』の構成に用いたとか、モーツァルトのソナタやベートーベンの交響曲にも使われてたりとか、ル・コルビュジェの「モデュロール」の元になってたりするようですね。隣接する二項の比が、どんどん黄金比に近付いていくことで

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Perlスクリプトを作ったんだけど... 動かない！ なんでだろー。ちゃんと毎ページ呼んでるし、GETリクエストも遅れてるのに... 統計に反映されてない！ ga.jsだからかと思ってUrchin.jsでアクティベートもしたのにダメだった。ちなみに元ネタはコレ。 動作確認できました。ソースは記事中の追記にて。 Google Analytics without javascript!,Linklove ケータイサイトでGoogle Analyticsを利用するためのライブラリ,ke-tai.org Google AnalyticsのAnalysis、そして滞在時間のウソ

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 function showObject(elm,type){ var str = '「' + typeof elm + "」の中身"; var cnt = 0; for(i in elm){ if(type == 'html'){ str += '<br />\n' + "[" + cnt + "] " + i.bold() + ' = ' + elm[i]; } else { str += '\n' + "[" + cnt + "] " + i + ' = ' + elm[i]; } cnt++; status = cnt; } return str; } 主として

恒例のライブラリを使わないシリーズ。今回は、テーブル行を並べ替えるスクリプトを書いてみました。実は前にも作ったことはあるんだけど、当時はてきとーにその辺から拾ったものを継ぎ合わせただけで理解してたわけではなく... まあ気にはなってたので、いま作ってみたらどうなるだろう、と。 結果的に、JavaScriptの連想配列をソートする方法を学びました。これがあるから自作はやめられない。車輪の再発明は勉強にはは必要よ。性能面でも、とりあえず400行くらいのデータテーブルなら（画像入ってても）特に遅くはないようです。仕事で使ったから大丈夫。 以下、解説です。 HTML <table border="1" cellspacing="0" cellpadding="0" id="device"> <thead> <tr> <th><a href="" onclick="table_sort.exec('

前回のサンプルを踏み台に、テーブル行を並び替えるスクリプトを作ってみる。というかコレが本当にやりたかったこと。詳しい動きは... 任意の行を選択する (選択行をマーキング) 別の行を選択する 2.の直前に1.の行を移動する まあ暫くやってみれば解ると思う。てきと～にプチプチ・ソートと名付けよう。並び替えるときに同時に<input>タグのvalueも再設定してたりするんだけど、これに意味があって、まあ要するに表示メニューの並び替えを変更/登録するWebアプリのために作ったスクリプトなんだ。なかなかウケは良いですよ？ Webでのドラッグ＆ドロップは労力に見合うほどの効果があるか疑問だった、って判断しただけですけどね！ p.s.: ちょっと追記。使いやすいドラッグ＆ドロップの設計はたいへんだ、ということ。もちろんこのスクリプトの動作も解りにくい。けど、ツールチップを表示するとか選択後のclass

ライブラリを使わないtable要素の行選択。とゆーか<tr>要素のclassを動的に変更するスクリプト。YUIでいうこの辺。 今回のサンプルはより複雑な動作を実現する踏み台という位置づけであります。選択した行の<tr>要素を取得するという動作が必要。オマケでclassの変更。見た目だけならCSSのhoverでも使えば良いし、ライブラリもいっぱいある。Ext.jsとか。自分で組んだほうがカスタム楽そうだ、ということ。 classの取得/設定、Eventオブジェクトとthisの扱いには苦労した。IE逝ってよし。今日ほどサイ本をありがたく思った日はありません。みんなサイ本買おう。 以下、細かい解説。(デモは「続き」で動きます) 行選択: rowSelect() var rowSelect = { init: function(table){ this.rowList = $(table).get

さすがに手を抜きすぎたと反省し、とりあえずツールチップ付けてみた。これでだいぶマシかと思う。 ソースは以下にて。 JavaScript var rowSelect = { init: function(table){ var tarTable = $(table); var rowList = tarTable.getElementsByTagName('tr'); for(i=1; i<rowList.length; i++){ //addEvent(rowList[i],'mouseover',rowSelect.msOver,false); //addEvent(rowList[i],'mouseout',rowSelect.msOut,false); //addEvent(rowList[i],'click',rowSelect.selected,false); rowList[i

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 ライブラリを使わない自作JSシリーズ、今回はスクロール処理です。いわゆる「ページトップへ」。特に珍しくもない動作ですが、JSでアニメーション処理してみたいって人の取っ掛かりとしてはほど良い課題だと思います。 今回のテーマは『高速化』。前々から当サイトでも密やかに使ってますが、一部環境でもっさりした動作になってしまっていて、高速化が課題でした。書き方も古かったし。原因追求が面倒でしばらく投げてましたが、offsetWidthは重いという情報をゲットしまして、「おぉ、原因これじゃん！」と一念発起して組み上げた次第です。伏して待て。忘れるな。機会は密やかに訪れる ...てと

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Note: Chart APIは現在ではGoogle Chartとして整理されており、この記事で利用されているImage Chart APIは旧仕様として削除対象になっています。実際に削除はされていないので今のところ利用できていますが、2015年中には消えてしまいそうです。(2015-08-31) CGI側でデータを用意してやって、JavaScriptでうにうにするみたいな。値は吐けるんだからTTとか使ってれば直接埋め込んでも良いような気がしますが、JS挟んだほうがメンテしやすいので！ とはいえ未完成（IEのみ）。ここまでで1時間弱。７０％くらい？ まあ原因ははっきり

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 たまにはコピペ用のエントリも書きたくなってきたので、以前、参照コードを<pre>で書くかって記事ら辺で作った整形フォームをバージョンアップしました。 ラジオボタンで<pre><code>タイプと<ol><li><code>タイプを切り替えてます。ホントは<ol>タイプ用に行頭の空白を数えるとこまでやっときたかったんだけど、力及ばず。JavaScriptの正規表現はまだよく掴めない＾＾； 以下、記録用にソースコードと関連リンクを貼っときます。今回は配布用じゃないので、あんま綺麗じゃないけど！ JavaScript var escape_html= { init: fun

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Note: Chart APIは現在ではGoogle Chartとして整理されており、この記事で利用されているImage Chart APIは旧仕様として削除対象になっています。実際に削除はされていないので今のところ利用できていますが、2015年中には消えてしまいそうです。(2015-08-31) コピペ用に作ってみた。いやー軽い軽い。JSで<canvas>で図形描画なんて馬鹿らしくなっちゃうね。ちなみに色はあんまり弄ってない。考えたら暖色系って盛り上がってる感じがするから、このままのが良いかもね。 では続きをどうぞ。 ...そういえば、商用利用できたっけ？ <img