Web屋のためのHow to Vim (チラ裏) - Archiva
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依存しないように作
Web屋のためのHow to Vim (表) - Archiva
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) 定番プラグイン ファイルの開き方がそもそも判りづらい＞＜ うん、つまらん！ 初心者向け講座ってのは以前てきとーだけどやったことがあって、もっとマシに
はじめてのVim (てきとー補完) - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 けっこー前の話ですが、Sugamo.vimってのやりました。その3回目で軽く話したスライド、のURLをメモっておきます。参加者はthincaさんみたいなマスタークラスにも来て頂けましたが、初心者ユーザも相当数おりました。で、事前に「ダウンロードから教えてくれ」とあったのでそのようにした。このスライドは、そういうレベルです。あしからず。LT用だから薄いし軽いし。 » Vimの基本、超入門 これだけってのも難なので、Vim環境の構築メモも置いておきましょう。 まず、俺の環境は以下。あんまり弄っていない。 » GitHub: sigwyg/dotfiles 具体的な導入手順
[JQuery習作] Google Chart API のデータ値をエンコードする - Archiva
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属性にパラメータ入れてリク
CSS Nite Vol.40 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSS Nite Vol.40 見てきました。タイトルは「HTML5、きちんと。」 by 矢倉さんです。やはりNiteは初心者向けということで、ブラウザ実装や仕様の根幹に関わるコアな話題はできなかったようですが、落ち着いた進行でありながら良く練られた構成であり、何故か今さらガンガン盛り上がっているHTML5の背景と、仕様策定の方向性みたいなものが感覚的に理解できる、とても有意義なセッションでした。 いや本当にすっきりしました。今まで何となく集めていた情報と併せて、全体の雰囲気みたいなのが掴めたように思うので、個人的には大満足です。 感想としては、やはり仕様の策定にベン
Sugamo.css Vim分科会まとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. 略してSugamo.vim。 Twitterでほかむらさんと話してるときに「Vim勉強会したいよねー」ということになって、やってみた。 提唱者の片割れがほかむらさんなので、会場はカヤック。会議室をお借りして... とまあこの辺はごにょごにょあったので割愛。Sugamo.cssだと話題があっちこっち飛ぶんですが、今回はVimという明確なテーマがあるので、首尾一貫した感じ。15時〜19時でいろいろ話し合って、ネタが尽きたので解散！ という解りやすいオチでもありました。 VimScriptのデバッグ 「:h functions」で組み込み関数見れるよ！ 「:source %」でリロードすれば再起動しなくて良いよ！ <q-args>って何？ → 「:h q-args」 とにかくヘルプが便利
Vimで複数ファイルを纏めて編集する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 いわゆるGrep検索→置換みたいなこと。普通のエディタにはだいたい付いているけど、Vimでやるってあんまり馴染みが無いかもってことでメモってみる。UNIXなら外部のgrepコマンドを実行する方法もあるけれど、Vim内部で行う方法として、vimgrepを使う方法とアーギュメントリストを用いる方法を紹介します。 「Vim基本操作まとめ」のほうに書こうかと思ったけど、尺が半端なのでこっちに書くことにした。 2009.06.02 id:gabaの要望に応えて、「:bufdo」を追加。 2009.06.02 アーギュメントリストに関しては、vim-user.jpに詳しく載ってい
携帯版Google Analyticsで滞在時間とか検索ワードとか - Archiva
Make a note of it: Web tech, montaineering, and so on. Google Analytics（以下、GoAn）はimg要素を読み込むことリクエストを送信してて統計にカウントしてたから、同じようなURLを生成して送信すれば携帯サイトでもGoAnは利用できる。ただしCookieに値を保存できない携帯版だと幾つかの制約があって、簡単に言うと「全アクセスがユニーク扱いになる」。ここまでが前回のお話。 で、その後いろいろ試してみた結果。だいぶデータが見れるようになったので、公開してみる。統計に反映されるようになったデータを以下に記します。 滞在時間、滞在中のページビュー、直帰率 リピート数、ブラウザ、ＯＳ、ユーザ定義 参照サイト、参照元、検索エンジン、キーワード 幾つか怪しいデータもあるけど、まあ仕組みが解ってれば十分参考にはなるし。この手の統計って
vimrcを晒してみる - Archiva
Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 @hamashunに今さら捧ぐ。けっこう前に出すと言いつつ、伸ばし伸ばしになってたネタを投下してみます。あんまり弄ってないけども。 まず軽く紹介。Vimはviから派生したテキストエディタで、特にUNIX系OS（Linux、Mac）ではEmacsと並んで広く使用されているエディタです。プログラマによって開発されたプログラマのためにエディタであり、全ての操作をキーボードから行えることが特徴かな。基本的な操作方法は手前味噌ですが「Vim 基本操作まとめ」を参照のこと。 んで、「.vimrc」という設定ファイルを――ホームディレクトリなり、exeファイルのあるフォルダなりに――用意してやることによって、好きなように拡張して使っていくわけです。無ければ単純なVi互換モードとして動きます
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
tableソート・スクリプト - Archiva
恒例のライブラリを使わないシリーズ。今回は、テーブル行を並べ替えるスクリプトを書いてみました。実は前にも作ったことはあるんだけど、当時はてきとーにその辺から拾ったものを継ぎ合わせただけで理解してたわけではなく... まあ気にはなってたので、いま作ってみたらどうなるだろう、と。 結果的に、JavaScriptの連想配列をソートする方法を学びました。これがあるから自作はやめられない。車輪の再発明は勉強にはは必要よ。性能面でも、とりあえず400行くらいのデータテーブルなら（画像入ってても）特に遅くはないようです。仕事で使ったから大丈夫。 以下、解説です。 HTML <table border="1" cellspacing="0" cellpadding="0" id="device"> <thead> <tr> <th><a href="" onclick="table_sort.exec('
コーダーが気にしちゃうことバトン - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 反応されたなら、書かざるをえまい！ それが責任と言うものだ（何 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っています
上下左右にスクロールするスクリプト - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 ライブラリを使わない自作JSシリーズ、今回はスクロール処理です。いわゆる「ページトップへ」。特に珍しくもない動作ですが、JSでアニメーション処理してみたいって人の取っ掛かりとしてはほど良い課題だと思います。 今回のテーマは『高速化』。前々から当サイトでも密やかに使ってますが、一部環境でもっさりした動作になってしまっていて、高速化が課題でした。書き方も古かったし。原因追求が面倒でしばらく投げてましたが、offsetWidthは重いという情報をゲットしまして、「おぉ、原因これじゃん！」と一念発起して組み上げた次第です。伏して待て。忘れるな。機会は密やかに訪れる ...てと
Google Chart APIを使って動的にグラフを生成する - Archiva
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時間弱。７０％くらい？ まあ原因ははっきり
自転車を買いました - Archiva
電車での移動はどうにも億劫というか小回りがきかないので、行動範囲の拡大と写真のネタを求めて自転車を購入しました。 うん、小径車です。フレームは独特のしなりに定評のあるクロモリ（細くて頑丈）。トップチューブはホリゾンタル（水平配置）。で、ドロップハンドル（見た目ロードバイクっぽい）。 本当はシングルスピードで面白そうなバイクを探してたんだけど（フジトラとかスチームローラーとかラングスターが候補だた。ラングスターはアルミで太いのが難点。クロモリの細身なシルエットがツボなのです）、良さそうなのはみんな高かったり完売だったりで... 悩んでたところにコイツが飛び込んできて一目で惚れた！ やっぱスイス車はいいね？（謎） 実用重視なドイツの流れを汲みつつも、適度に洗練されてるというか。まあ単にイメージですが。 ということで、ちょっと乗ってきた。 けっこう走れる！ さすがにロードにはガンガン抜かれたけれ
SQLメモ – よく使うSELECT文を集めてみた - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 読んで字のごとく。突っ込み歓迎！ ちなみにMySQLです。 複数のテーブルからレコードを取り出す 複数の値と一致するレコードを取得する 副問合せ レコード件数を返す 取得したレコード、の値の合計 平均値を求める 値がNULLのもの 複数のテーブルからレコードを取り出す SELECT table1.* FROM table1,table2 WHERE table1.key1 = table2.key1 AND table1.field2 = 'value' AND table2.field2 = 'value'; memo: これは等価結合の場合。どちらかのデータが存在
Vimのキーマップを弄ってみた - Archiva
Make a note of it: Web tech, montaineering, and so on. 最近ですが、エディタに Vim を使うようになりました。WinとLinuxで同じエディタが使えるし、マウス使わなくて良いので楽しいです。正確にはWin では gVim ですが。あと、自宅で使ってる HHKB にも合ってるのでメチャ楽～♪ Vim では .vimrc(Vimの設定ファイル) に記述を加えることで、初期設定を書き換えることができます。タブ幅からオートコマンドまで、殆どなんでも。この辺の解説は他に譲るとして、今回は今んとこ使ってるキーバインドを晒してみます。微妙に Emacs 風味。 移動系 inoremap <Leader>a <Home> inoremap <C-e> <End> inoremap <C-d> <Del> inoremap <C-h> <Left> i
CSS Nite in Ginza, Vol.21 - Archiva
Make a note of it: Web tech, montaineering, and so on. CSS Nite行ってきました。今回は携帯サイトについて。バックエンドの話もちょろっと出てきて、CSS Niteにしては濃い内容でした。あともう一歩踏み込んでくれれば新鮮な驚きもあったかもですが、やっぱその辺は社外秘っぽいですね。セッションの運用とか。 以下、まとめです。途中で面倒くさくなったので、preタグ貼り付け。 携帯サイトのコーディング事情～基本編 ＠宮永邦彦（アイデアマンズ株式会社） 実例紹介 → 東京モード学園 ・3G携帯のみ対応の先進的なケース 携帯インターネット人口は、パソコンに迫る勢い → パソコン 8,055万人 → 携帯電話・モバイル 7,086万人 （平成18年「通信利用動向調査」/総務省 ） 主な利用者は若年層。学生、女性。 どんなコンテンツが携帯向き？
JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vim 基本操作まとめ - Archiva