KeyRemap4MacBookでControl+hjklをカーソル移動に設定して快適コーディング

Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

みなさん、プログラミングをするときや、ブログの文章、レポート、はたまたKobitoでQiita向けにTipsを書いているとき、カーソルの移動ってどうしていますか?
僕は、例えばXcodeやeclipseでコーディングするときはキーバインドの設定を変更してCtrl+hjklをカーソル移動に割り当てています。
これで、わざわざカーソルキーに手を移動しなくても、ホームポジションに手を置いたままカーソル移動ができるわけです。
このようなキーバインドの設定をXcodeやeclipse、Sublime Textなどエディタごとにいちいち設定していたのですが、もうこれならシステム全体でCtrl+hjklをカーソル移動に割り当ててしまおうと。
そうすると、わざわざ設定する手間が省けるばかりか、ブログの文章を書いているときなど、ブラウザからテキストを編集しているときや、そもそもキーバインド設定が出来ないエディタを使ったときでもこの設定を使うことができます!
では、さっそく。


KeyRemap4MacBookをインストール


KeyRemap4MacBook – OS X用のソフトウェア
公式ページからKeyRemap4MacBook をダウンロード、インストールしましょう。


Control+hjklをカーソル移動に設定する


スクリーンショット 2013-06-13 12.50.31.png


KeyRemap4MacBookを起動し、


  • Vi Mode → Control_L+hjkl to Left/Down/Up/Right

をクリックしてください。
これで終わりです!


Macのcaps lockキーをControlキーにしよう


番外編として。


スクリーンショット 2013-06-13 12.12.23.png


MacのUSキーボードでは非常に打ちやすい位置に、一番使用することがない、いや、むしろ誤動作の原因になるcaps lockキーが配置されています。
これを、Controlキーに変更することで、今回設定したControl+hjklカーソル移動がより快適になります。


スクリーンショット 2013-06-13 12.31.39.png


  • システム環境設定 → キーボード → 修飾キー

ここから変更することができます。


まとめ


デフォルトの設定は結構クソなのでいろいろいじろう!

SublimeText Control+hjklでカーソル移動

Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

スクリーンショット 2013-06-13 12.12.23.png


僕はMacのUSキーボードでcaps lockキーをControlキーに割り当てなおして運用しています。
一番小指で押しやすいキーがなんでcaps lockなんだよ、という感じですが、これをControlなどに変更するとコーディングが劇的に快適になって、例えば、今回のネタのようにカーソル移動のキーバインドをControl+hjklなどに設定するといい感じになります。
ということで、Sublime Text 2において、Control+hjklを使ったカーソル移動を実現するためのキーバインド設定ネタです。


キーバインドを変更する


Sublime Text 2 → Preferences → Key Bindings – User
と選択すると、キーバインドを設定するための設定ファイルがエディタ上に表示されます。そのファイルに以下の設定テキストを挿入して保存してください。


[
{ "keys": ["ctrl+l"], "command": "move", "args": {"by": "characters", "forward": true } },
{ "keys": ["ctrl+h"], "command": "move", "args": {"by": "characters", "forward": false } },
{ "keys": ["ctrl+j"], "command": "move", "args": {"by": "lines", "forward": false } },
{ "keys": ["ctrl+k"], "command": "move", "args": {"by": "lines", "forward": true } }
]


設定は以上です。


Macのcaps lockキーを無効化し、別のキーに設定する


スクリーンショット 2013-06-13 12.31.39.png


システム環境設定 → キーボード → 修飾キー
ここから変更することができます。

WordPressを始めて入れたプラグイン まとめ

Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

Seesaaブログから移転して、WordPressを始めたわけですが、その一番の理由は自分好みに「簡単に」カスタマイズできるプラグインの存在です。
従来はブログパーツを入れてみたり、少し手の凝ったカスタマイズをする場合はソースを直接いじる必要がありましたが、WordPressの場合はFirefoxのアドオンと同様にプラグインという形でかなり柔軟に、そしてかなり簡単にカスタマイズすることができます。
ということで、このエントリーでは僕がWordPressを始めるにあたって初期に入れたプラグインなどをご紹介。

・Akismet

何千万人もの人に利用されている Akismet (アキスメット) は、あなたのブログをコメント・トラックバックスパムから保護するのに世界で一番のツールかもしれません。

ということでスパムコメント対策に一番のツールかもしれないみたいなので入れてみました。

・Auto Thickbox

スクリーンショット 2012-11-11 14.09.47.png

こんな感じで画像直リンをポップアップで表示してくれるものです。

・brBrbr

改行が改行しただけ改行したまま改行する
改行の改行による改行のためのプラグイン作ってみました。

デフォルトだと連続改行はエディタ上でやっても、実際の記事では反映されないのですが、これを入れると連続改行も入るようになります。
まさに、改行が改行しただけ改行したまま改行するプラグインです。

・Broken Link Checker

記事内のリンク切れを自動的に調べてくれ、発見するとダッシュボード上、または希望をすればメールでお知らせまでしてくれる優秀なプラグインです。
また、以下のように自動的に取り消し線を入れてくれます。
便利。

スクリーンショット 2012-11-11 14.18.47.png

・My Category Order

スクリーンショット 2012-11-11 14.22.04.png

デフォルトのウィジェットで記事のカテゴリーをサイドバーに表示しても、順番は設定できずABC順になるのですが、このプラグインを入れると上記のような順番を自由に設定したカテゴリーウィジェットを配置することができます。
また、以前Seesaaブログを利用していたときはカテゴリーに番号を振って番号の小さい順に並ぶ、という感じだったのですが、このプラグインはカテゴリーの順番をドラッグアンドドロップで設定することができます。すげぇ!

・Newpost Catch

スクリーンショット 2012-11-11 14.28.32.png

こんな感じで画像つきの最近の投稿を表示することができるウィジェット。
画像はエントリーの中にある一番最初の画像を参照するようです。画像がない場合はちゃんと「No Image」と表示されます。
表示する画像のサイズやウィジェットに表示する記事数なども設定可。

・Picasa Express x2

スクリーンショット 2012-11-11 14.37.16.png

WordPressを始めるにあたって、僕は画像のアップロード先にPicasaを使うことにしました。
というのも、Google+会員であれば2048×2048以下の画像は無制限にアップロードして良いという太っ腹なサービスだからです。これでサーバーの容量を気にすること無く大量に画像をアップロードすることができます。
さらに、Picasaにアップロードすれば、もしまたブログを移転することになったとしても、画像はPicasaにアップロードしてあるので何も影響を受けないということです。最近は、携帯電話のメールでもGMailを使うようになってキャリアメールを使わなくなったので、いよいよMNPで番号を持ち出せる今キャリアを変えることに何も影響が無いのと同じ事です。

そこで便利なのがこのプラグインです。Seesaaの時はいちいちPicasaへ行ってリンクを作って、編集画面で貼り付け…というちょっと面倒なルーチンワークをしていたので、あまりPicasaは利用しなかったのですが、このプラグインはWordPressの記事編集画面で直接Picasaにアクセスし、画像を貼り付けることができます。
PicasaへのアップロードはiPhoneからはアプリを使えばできるし、パソコンからもドラッグアンドドロップでできるので、かなり便利です。

・Revision Control

WordPressには記事を編集している時に自動的に保存し、もしブラウザがクラッシュしても復元できる、という機能(リビジョン)があるのですが、これが便利でありながら少し曲者で、自動的にやってくれるのいいのですが、無尽蔵にやるためデータベースを圧迫してしまいます。
そこで、このプラグインはリビジョンの保存回数の制限の設定を簡単に行うことのできるものです。

・Similar Posts

スクリーンショット 2012-11-11 14.30.50.png

このように記事の最後に「関連記事」を自動的に表示してくれるプラグインです。
関連度の判定は「タイトル」「タグ」「本文」の3つの要素から決めているようです。
そして、この3つの要素の配分は自分で設定することができます。
僕は、本文60%、タイトル25%、タグ15%の設定しています。
関連度の判定に関しては上記のスクリーンショットのように上々な感じ。

・Simple Tags

スクリーンショット 2012-11-11 14.31.06.png

Seesaaブログから移行してきて、困ったのはタグでした。
タグも出力したはずなのですが、移行されずに…。
ということで、Simple Tagsというプラグインを使用してみました。
これは、予め付けて欲しいタグを設定しておき、その設定した単語がタイトルや本文にあらわれていたら自動的にタグをつける、という大変便利なプラグインです。
そして、またこれの良いところは過去の記事に対しても一括してタグを付加してくれるところです。
僕はこれを利用して過去の記事に一括してタグを付けました。

・SyntaxHighlighter Evolved

スクリーンショット 2012-11-11 14.31.24.png

このように、ソースを綺麗に表示するためのプラグインです。
既存のブログサービスだと、ソースコードを綺麗に表示するのに多少の手間がかかりましたが、WordPressではこのプラグインをインストールするだけで、上記のような美しくシンタックスカラーされたソースコードを記事に貼り付けることができます。
記事に入れるときは、[表示したいソースの種類]〜[\表示したいソースの種類]のように簡単なタグで囲むだけです。

・TinyMCE Advanced

スクリーンショット 2012-11-11 15.05.06.png

WordPressのデフォルトの記事エディター(ビジュアルエディター)は機能も少なくお世辞にも使いやすいとは言えません。
特に、国内のブログサービスを使っていた方はそう感じるはずです。
そこで、おすすめしたいのがこのプラグインです。
豊富な機能を提供するだけでなく、アイコンの位置などをカスタマイズすることもできます。

・Ultimate Google Analytics

アクセス数などはそんなに気にしないのでSeesaaブログを利用していた時も高機能なアクセス解析ツールがありながら、ほとんど利用していなかったのですが、とりあえず導入してみました。
WordPressにはアクセス解析ツールが入っていないので、外部ツールとしてGoogle Analyticsを利用できるようにするプラグインです。

・WP-DBManager

ブログサービスを利用していたときは信頼性の高いサーバー管理をしてくれていたと思いますが、WordPressは自分が管理するサーバー上に置くので、誤ってデータを破損させてしまうかもしれません。
このような時に役立つのがこのプラグインです。
このプラグインを使用することで面倒なデータベースのバックアップを簡単に取ることができます。

・WP-PageNavi

スクリーンショット 2012-11-11 16.11.04.png

上記のようなナビゲーションを入れることができるプラグイン。
WordPressのデフォルトだと「←古い投稿」と表示されるだけで、あと何ページあるかなどは表示されません。
このプラグインを入れることでユーザビリティを改善することができます。

・WP Multibyte Patch

WordPressを日本語環境で使用する時の不具合を解決するためのプラグインだそうです。
最初から入っていたので有効化してみました。

・WP Social Bookmarking Light

スクリーンショット 2012-11-11 14.31.46.png

今やどのブログにもある、上記のようなソーシャル要素をブログに入れるためのツールです。
対応しているサイトも多く、便利です。
また、設置もラク。

・WPtouch

P61204500.jpg

このプラグインの存在もSeesaaブログからWordPressに移行した理由の一つです。
Seesaaブログはいち早くスマートフォン向けに対応したのは良かったのですが、デザインがかっこ悪く、また常時あの邪魔な広告バナーが下に出るというクソ仕様でした。
一方、このプラグインはデザインが非常に洗練されており、使っていて気持ちがいいです。
また、このプラグインはインストールするだけで何も設定をすること無しにスマートフォンにも対応できるというスグレモノ。

・WSA Favicon

スクリーンショット 2012-11-11 14.32.12.png

いわゆるこれを設定するためのプラグイン。
通常は何かしらソフトを使って*.icoファイルを作る必要がありますが、これはPNGファイルなどをアップロードするだけで、自動的にリサイズからFaviconの設定までしてくれるプラグインです。
ラクすぎる。

ということで、以上がWordPressを始めるにあたって僕が入れたプラグイン一覧です。
とりあえず、この環境で現状は満足しています。
まだまだWordPressは分からないことが多いので、「こんなの使うと便利だよ!」なプラグインがあったらぜひ教えて下さい!

 

SeesaaブログからWordPressへ移行

Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

SeesaaブログからWordPressへ無事移行できたので、メモ代わりに書いておきます。

2012年11月時点。

1.Seesaaブログからエクスポート

スクリーンショット 2012-11-11 2.25.53.png

Seesaaブログにログインし、設定からその他の欄のエクスポートを選択。

スクリーンショット 2012-11-11 2.26.13.png

文字コード:UTF-8

取得範囲:私の場合は全範囲(※)

コメント/トラックバック/タグ:必要なものをチェック

エクスポートをクリックするとMovableType形式でファイルがダウンロードされます。

※このログはWordPress側で読み込ませる時に2MB以下である必要があります。私の場合は全範囲で1.5MBでしたので問題無かったですが、もし2MB以上になった場合は取得範囲を変更しファイルを分割してください。

2.WordPressへインポート

スクリーンショット 2012-11-11 2.31.01.png

ツール→インポート→Movable Type and TypePadを選択

初回の場合はインポート用のプラグインがインストールされていないので、インストールする。

ここで、このままファイルをアップロードすると正常に読み込まれず、記事のデザインが崩れます(連続改行が反映されません)。

そこで、このインポータープラグインのソースを少し変更することにします。

スクリーンショット 2012-11-11 2.33.01.png

WordPressインストールディレクトリ/wp-content/plugins/movabletype-impoter/movabletype-impoter.phpを開く。

450行目あたりにif(!empty($line))という条件分岐があるので、これをコメントアウトして保存する。

スクリーンショット 2012-11-11 2.31.25.png

インストールが完了すると、上記のような画面になるので、先ほど作成したログファイルをアップロード。

以上で、移行は完了です。

3.画像や固定リンクはどうするの?

画像に関しては、僕は以前に投稿したものに関してはSeesaaのサーバー上にそのまま残すことにしました。正常に機能しているようですし、別にわざわざ自分のサーバーに上げ直すのもどうかと思うので。

固定リンク、特に自分のブログの記事を参照しているものについては変更する必要があります。

これは、記事が少ない人はひとつずつ変更してもいいですが、多い人はlogファイルはテキスト形式なので、アドレスを置換するなどするといいかもしれません。

4.便利なプラグインとか

WordPressといったら豊富なプラグインです。

WordPressそのままだと、Firefoxのようにあまり嬉しくありません。

例えば、Seesaaブログではカテゴリの表示順番を変更することができましたが、デフォルトのWordPressではそれをすることができません。

このように、かゆいところに手の届く多くのプラグインがWordPressの魅力です。

そこで、今回僕が入れたプラグインについて紹介します。

WordPressを始めて入れたプラグイン まとめ

【いまさら】ホームページリニューアルしました+Web拍手お返事【報告】

Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

さて、期末テストの真っ只中ですが、息抜きにブログ書きます。
まわりが夏休みを満喫するなか、僕ら高専生は今週の金曜日まで期末テストなのです><


【リニューアル前】

2010-08-02_01.png


【リニューアル後】

2010-08-02_02.png

→ http://exilias.net/

中学生の時にデザインした懐かしのホームページから、久々にリニューアルしました。
リニューアルしたいリニューアルしたいとさんざんブログに書き、何度もリニューアル詐欺をした僕ですが、やっと実現できてよかったです。
中学生の時にデザインしたとだけあって、文体が幼稚だったり、背景が黒で赤やシアンなどの派手な色を使う厨二デザインの典型みたいなホームページでした。お恥ずかしい限りです。
コミケ前ということで、このようなホームページをお見せするのは、見る人も嫌だろうし、見せる僕も嫌だったので、思い切って全面リニューアルしました。

今回のテーマは爽やか。
僕、そしてコンテンツに似つかないほどの爽やかさです。
僕もびっくりです。
以前は黒を基調にしたダーク(笑)な雰囲気でしたが、今回は逆に白を基調にしてみました。
極力原色は使わず、色使いも今風に。
比較的、綺麗にまとまったのではないでしょうか。

そして、第二のテーマとしては「脱Flash」。
iPhone、iPadとFlashをサポートしない端末が普及しだしています。
かく言う僕も、どちらとも所持しています。
このような状況から、Flashを多用するのは避けるべきだと判断し、今回はFlashを使わないインタラクティブ性を取り入れてみました。
さすがにトップページにはリッチなアニメーションを使用したいためFlashを用いましたが、それ以外の部分ではFlashを使用しておりません。
具体的にはProductページを見ていただけたらわかるはずです。
Flashを使わずに綺麗なスライドアニメーションを実装することができました。
今後とも、Flashを使わないWebページデザインを学んでいこうかなと思います。
以前はメニューの部分をFlashで実装していたため、iPhone上では閲覧することが出来なかったんですね。

【iPhone 4】

2010-08-02_03.png

【iPad】

2010-08-02_04.png

【Web拍手お返事】

17:12 応援してるぜ!!!!!
17:12 あなたが教祖様か・・・

ありがとう!がんばるよ!

14:50 万能回路だるい
14:50 by高専

ちゃんと授業うけてください。

13:25 大好きだよ
13:26 まむこはむはむ
13:26 はぁはぁ
13:27 カッコいいね!!
13:27 僕は納豆すきだよ
13:28 そんなこともあるよね
13:28 君の喜ぶ顔が見たいんだ
13:29 早くデレろよ

これがまさに狂気である。

13:29 わたしだ

お前だったのか!

13:33 私はyou を
13:33 応援する

I love you!

21:56 HPリニューアルおつかれー!

いつもありがとね!

10:08 あなたがEXILIASか
10:09 ここは変わらないんだね
10:09 だるい
10:10 その幻想を・・・

私がExだ!
Web拍手もリニューアルしたいなーと思うけど、ネタが無い。

コメントくれた方も、拍手をしてくれたかたも、たくさんのWeb拍手、ありがとうございました><

そろそろドナゲーの紹介ページもリニューアルしなきゃだよなーと思う今日この頃。
とりあえず、テストが終わるのがコミケ一週間前ってどういうことだよ!