こんにちは！ねまっちです！

前回は
[Linux]使いこなしてますか？意外と知らないカーソル操作のショートカットとhistoryオプションの活用法
を紹介しましたが、今回も[Linux］にちなんで、「viの基本操作」をまとめてみます。

Viとは

ほとんどのLinuxディストリビューションに標準で含まれている、UNIX系OSの代表的なテキストエディタです。
主な特徴としては、通常のテキストエディタならいきなり文字入力を開始できますが、viの場合は「コマンドモード」と「入力モード」を切り替えながら操作します。

「コマンドモード」時は文字移動、ファイル操作、オプションを使用等を行い、文字入力は「入力モード」に切り替えて入力を行います。

また、viのもう一つの特徴として、はほとんどの操作をホームポジションで、ある程度の操作が可能です。
今回はホームポジションから出来るだけ手を動かさずに操作する方法を紹介していきます。

カーソル移動編

カーソル移動は「矢印キー」で移動しても、もちろん良いと思うのですが、ホームポジションで操作する事により少しでも時間短縮を心がけます。

カーソル移動のコマンド

入力キー	アクション
h（←キー）	カーソルを1文字左へ移動します。
j（↓キー）	カーソルを1行下へ移動します。
k（↑キー）	カーソルを1行上へ移動します。
l（→キー）	カーソルを1文字右へ移動します。
H	カーソルを1文字右へ移動します。
0	カーソルを行頭へ移動します。
$	カーソルを行末へ移動します。
[Enter]	カーソルを次の行の先頭へ移動します。
-	カーソルを前の行の先頭へ移動します。
w	単語単位で右へ移動します。
b	単語単位で左へ移動します。
Ctrl + f	次の画面へ移動します。
Ctrl + b	前の画面へ移動します。
1G	文頭へ移動します。
G	文末へ移動します。
○○G	○○に数字を入力すると指定した行数へ移動します。
H	カーソルが画面最上行の行頭へ移動します。
M	カーソルが画面中央の行頭へ移動します。
L	カーソルが画面最下行の行頭へ移動します。

文字操作編

ここでは「コマンドモード」から「入力モード」への切り替え、文字の削除方法等について紹介します。

文字操作のコマンド

入力キー	アクション
i（insert）	カーソルの直前で入力モードに切り替えます。
a	カーソルの直後で入力モードに切り替えます。
I	現在の行の先頭で入力モードに切り替えます。
o	現在の行の下に一行開けて入力モードに切り替えます。
O	現在の行の下に一行開けて入力モードに切り替えます。
J	現在の行と次の行を連結します
○J	カーソル行から○行目まで連結します。
x	カーソル上にある1文字を削除します。
x	カーソルの左の1文字を削除します。
dd	現在の行を削除します。
○dd	現在の行から○行目までを削除します。
dw	カーソル位置から右へ単語単位で文字を削除します。
u	直前の操作を取りやめます。
Ctrl-R	取り消しの取り消しを行います。
.	直前の操作の繰り返します。

ここでは「ヴィジュアルモード」で範囲を指定し、文字を「コピー」。
それをペーストする。といったコマンドの操作方法を紹介します。

ヴィジュアルモードとコピー＆ペースト

入力キー	アクション
v	1文字単位で文字を選択していきます。
V	行単位で文字を選択していきます。
Ctrl + v	短径選択モードの「ビジュアルモード」になります。
d	「ビジュアルモード」で選択した範囲を削除します。
c	「ビジュアルモード」で選択した範囲を削除後「入力モード」へ切り替えます。
y	「ビジュアルモード」で選択した範囲をコピーします。
p	コピーした項目をペーストします。

検索/置換編

文字検索のコマンドとそれを置換するコマンド操作方法を紹介します。

検索/置換

入力キー	アクション
/○○○	「/」の後に検索したい文字を続けて入力しEnterを押します。 下方向に向けて検索していきます。
?○○○	「?」の後に検索したい文字を続けて入力しEnterを押します。 上方向に向けて検索していきます。
n	順方向に再検索します
N	逆方向に再検索します
:s/○○○/■■■/	現在の行で○○○を■■■に置換します。 （最初に合致するパターンのみ）
:s/○○○/■■■/g	現在の行で○○○を■■■に置換します。 最後に「c」をつけると確認ありになります。
:%s/○○○/■■■/g	全ての文字列○○○を■■■に置換します。
:%s/○○○/■■■/gc	全ての文字列○○○を■■■に置換します。 最後に「c」をつけると確認ありになります。
ctr + g	現在行の情報を表示します。

ファイル操作編

ここでは、ファイルの「保存」や「保存しないで終了」等を紹介します。

検索/置換

入力キー	アクション
:w	現在のファイル名で保存します。 最後に「!」をつけると強制的に保存されます。
:wq	現在のファイル名で保存して終了します。 最後に「!」をつけると強制的に保存されます。
:q	保存しないで終了します。 最後に「!」をつけると強制的に終了されます。

オプション編

ここでは、viのオプションとしてよく使うコマンドを紹介していきます。

検索/置換

入力キー	アクション
:set number　/　:set nu	行番号を表示します。
:set no number　/　:set nonu	行番号を非表示にします。
:set ignorecase	大文字/小文字の区別なく検索する事ができます。
:set autoindent	自動インデントモード
:set noautoindent	自動インデントモードを終了します。
:set fileencoding=utf-8	文字コードの指定ができます。 上記の場合は「urg-8」に設定しています。
:set all	すべてのオプションを表示します。

今回はここまでとします。
viのコマンドはここでは紹介しきれないほどたくさんあり、今回は自分がよく使うコマンドを紹介させていただきました。
うまく利用していけば作業スピードがぐっと上がるはずです。ぜひお試しください。

こんにちは、Roadyです。

最近あまり自転車に乗れていませんが、季節も春！
仕事も自転車もガンガンこなしていきたいと思います。
さて今回は「Fireworks風のスライス機能をPhotoshopで効率的に使いこなす」をテーマにお話ししたいと思います。

スクリプトのダウンロード

下記リンクからダウンロードができます。
fw_slice.jsx

アクションへの登録(ついでにショートカットも登録！)

デフォルトですとスライスを切るごとにスクリプトを読み込まないといけないので、アクションへ登録しつつ、そのアクションをショートカットで実行できるように設定することでさらに効率化を図れます。

新規アクション登録画面です。ファンクションキーのプルダウンよりファンクションキーによるショートカットを設定できます。

「ファイル」→「スクリプト」→「参照」より、先程ダウンロードしたfw_slice.jsxを選択します。

アクションに登録されました。これでこのアクションはショートカットキー一発で呼び出すことが可能です。楽チンです。

スライスする！

もうスライスのためにガイドを引く必要はありません！！！

サクサクスライスできます。

事前にスライスしたい部分の選択範囲を作成してからショートカットでアクションを起動するとさらにスムーズにスライスを作成できます。
スライス名を事前に決めておくことが可能です！これ地味に便利です。

photoshopの場合はデフォルトでは書き出すスライス画像に事前に名前付けることできませんので。

レイヤーはFireworksのようにwebレイヤーというフォルダができて、その中にスライスレイヤーが格納される仕組みです。

Fireworksユーザーには見慣れた光景ではないでしょうか。

書き出す

どんなスライスをしたかがレイヤーでまとまって見えるのはデザイナーにとって嬉しいことではないかと思います。

入力したスライス名も見事に反映されています。

以上となります。
みなさんも便利なスクリプトを使って日々の業務を効率化しましょう！
目指せ定時退社！ではでは～。

タイトル通り、node.jsからWebsocketを利用してみました。

早速 node.js の環境作りです。

がその前に、

node.jsは発展途上の為、頻繁にバージョンアップされるので、
バージョン管理が煩雑になりやすいという懸念点があります。

それを解決してくれるのが今回用いるnvmというツールです。
nvm（node version manager）は名前通り、node.jsのバージョン管理を行なってくれるツールで、

複数バージョンのインストール、切り替えがとても容易に行えます。
また、node.jsから利用できるパッケージ群を管理するnpmと言うツールも同時にインストールしてくれます。
上記のような理由からnvmを用いて開発環境を整えます。

nvmはGithubからチェックアウトしてきます。

$cd ~

$git clone git://github.com/creationix/nvm.git .nvm

カレントディレクトリ配下に「.nvm」ディレクリがあればOKです。

nvmからnode.jsをインストールする際に、以下のパッケージが必要になるのでインストールしておきます。

$sudo yum -y install openssl-devel make gcc-c++

nvmコマンドを実行できるように、設定プログラムを実行します。

$. .nvm/nvm.sh

nvmからバージョン「v0.7.6」のnode.jsをインストールします。

$nvm install v0.7.6

$nvm use v0.7.6

「Now using node v0.7.6」と表示されれば、インストール完了です。

念の為、バージョンも確認します。

$node --version

「Now using node v0.7.6」

確認できました。

[補足]

nvmを利用する際は、node.jsはローカルインストールされませんが

以下のようにrcファイルに記述しておくことで、nvmの実行を意識せずにnode.jsが利用できます。

$ vi .bashrc
. [ホームディレクトリ]/.nvm/nvm.sh

nvm use v0.7.6 > /dev/null 2>&1  

今回のプログラムに必要なexpressとsocket.ioモジュールをインストールします。

$npm install express socket.io

$npm ls

「 express 」、「 socket.io 」が表示されていればOKです。

※開発する上で、アプリケーションごとにディレクトリを分けている場合は、

当該のディレクトリ配下で上記コマンドを実施下さい。

Websocketを試すにあたり、

5秒おきにサーバから文字列を Push するサンプルを作りました。

サーバ側プログラム server.js 

var express = require('express');
var app = express.createServer();

// 8000ポートでプログラムを動作させる
app.listen(8000);

// ソケットを作成し、接続を待つ
var socketio = require('socket.io').listen(app);

// 出力先の取得
app.configure(function(){
   app.use(express.static(__dirname));
});

app.get('/', function(req, res) {
   res.render('check', {}); //HTMLファイル名
});
//////////////////

// クライアントから接続があった時の処理 //
socketio.on('connection', function (socket) {
   console.log('connected');

   var time=0;
   setInterval(function() {
     time++;
     if (time % 5 == 0){
       socket.emit('msg push', '接続してから' + time + '秒経過');
     }
   }, 1000);

   socket.on('disconnect', function() {
     console.log('disconnected');
   });

});

クライアント側プログラム index.html  

<html>
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>

// サーバに接続する

var socket = io.connect('[接続先ドメイン名]');

// メッセージを受けたとき
socket.on('msg push', function(msg) {
   $('#receiveMsg').prepend('<dd>' + msg + '</dd>');
});

</script>
</head>
<body>
接続してから5秒間隔で文字が表示される
<dl id="receiveMsg"></dl>
</body>

</html>

プログラムの用意ができたので、プログラムを実行して、実行中サーバへアクセスします。

$node server.js

として、プログラムを実行します。

ブラウザを起動して、

http://[サーバ名]:8000

でサーバへアクセスします。

サーバ側で更新した結果がリアルタイムに反映されました。

※node.jsのプログラムはプロセスを占有するので、

終了する際は「Ctrl + c」を実行して、プログラムを終了して下さい。

今後はサーバサイド Javascript が主流になると言う噂も耳にするので、習得目指して頑張っていきたく思います。

プログラマのたかはたです。

CentOS5.x環境、便利ですよね。枯れてますよね。でもPHPのバージョンは古くて困りますよね。
symfonyとかWordPressとかやりたいし、パッチもさくっと当てたいし、でもDAG環境使うくらいならコンパイルしたいなーとか思いませんか？
環境も作りこんじゃってるので、なかなか移行しづらいなと思ってるあなた。PHPだけなら、早ければ10分で移行できちゃいますよ。

rpmからコンパイル版にして困ること２つ

RedHat系のLinux上で動作するプログラムは、大体ソースも公開されています。
しかしながら、起動スクリプトとかを用意してくれて無くて、なんでも揃うRPM版を使いたくなります。
また、インストールディレクトリや設定ファイルが/usr/localのサブディレクトリに配置されることが多く、慣れないとイライラします。configureの時点で設定すればいいのですが、configureのオプションを調べるのも面倒です。

PHPはデーモンじゃないから、RPMじゃなくても困らない

ApacheやMySQLなんかはデーモンとして動作するので、起動スクリプトが重要です。
RedHat系は、起動スクリプトをしっかり書かないと、chkconfigでの登録すらまともに動かなくなります。
しかし、PHPはデーモンではありません。言ってしまえば単なるスクリプトです。動いてしまえばいいので、さくっとコンパイル版にしてしまいましょう。

PHPのiniやconfigureオプションは、rpm版のを引き継いでしまう

phpinfo()を実行しましょう。configureオプションが全部出てくれます。
他のプログラムの場合、src.rpmをダウンロードしてSPECファイルを参照しなければいけないのですが、PHPなら1分で調べられます。
経験上、5.1.x→5.2系、5.3系はそのままコンパイルしてすぐ動作します。5.4系は不具合が出たので、ちょっと注意が必要みたいです。

ソースをダウンロード、インストール

先にyumでgccとmake、httpd-develとmysql-develはインストールしておきましょう。ソースからのコンパイルでは、関係するパッケージの*-develが必要となります。
ブラウザのPHPのサイトに行きます。
http://php.net/downloads.php
今回はPHP 5.3.10 (Old stable)を対象とします。jp.php.netかjp2.php.netを右クリックして、urlだけ控えます。
Linux上の任意のディレクトリ（今回は/usr/local/src）で、以下の順で実行します。

$ wget http://jp2.php.net/get/php-5.3.10.tar.gz/from/jp.php.net/mirror
$ tar zxvf php-5.3.10.tar.gz
$ cd php-5.3.10
$ ./configure (phpinfoで表示された内容)
$ make
$ su -
# /etc/init.d/httpd stop
# yum remove php
# make install
# /etc/init.d/httpd configtest
# /etc/init.d/httpd start

Apacheのconfigtestの段階で、phpのモジュールの呼び出しが複数されているというWarningが出るかも知れません。httpd.confの該当行をコメントし、再度configtest→restartで問題ないはずです。

$ su -
# vi /etc/httpd/conf/httpd.conf
# /etc/init.d/httpd configtest
# /etc/init.d/httpd restart

ネットワーク速度やCPUパワーが大きく関わりますが、wgetからhttpd再起動まで、何も考えず実行して10分程度の作業です。
RPM環境は楽でいいですが、ソースからのコンパイルでしかできないことも結構あります。PHPの場合は簡単なので、ぜひお試しください。

こんにちは、佐野です。

今回はjavascriptでflashライクに画像を動かす方法についてです。

地球の周りを月がまわって見えるようにjavascriptで組んでみたいと思います。

javascriptサンプルコード

//===================================
//　変数
//===================================
var timerId = 0; //timerID保存用
var point = 0;
var moonStyle = {x:”0”,y:”0”};
var moon;

//=====================================
// 関数
//——————————————————-

function init(){
moon = document.getElementById(‘moon’);

var earth= document.getElementById(‘earth’);
moonStyle.x = earth.offsetLeft+15;
moonStyle.y = earth.offsetTop+15;

timerId = setInterval(moving,100);
}

function moving (){
var left = 0;
var top = 0;

point += 2;
left = (42 * Math.cos(point/180*Math.PI)+moonStyle.x);
top = (42 * Math.sin(point/180*Math.PI)+moonStyle.y);

moon.style.left = left+”px”;
moon.style.top = top+”px”;

}

//=====================================
//
//——————————————————-
window.onload = init;

window.onunload = function(){
clearInterval(timerId);
}

動作イメージは以下となります。

※IE6には対応しておりません。

サンプルコードの様にタイマーを使用し、画像の位置を少しずつ 変化させていくと動いている様にみえますね。

画像を回すだけでなく他にもいろいろできるのですが、
時間に追われているのでまた今度javascriptで色々な事をしてみたいと思います。では！