SublimeText3のSublimelinterにいろいろ入れてみた

こことか
http://qiita.com/hokuto/items/5a7797c68900116444ce
ここが参考になった
http://kashikashi.sakura.ne.jp/wordpress01/?p=53
あとここ
http://tomoyamkung.net/2014/03/08/sublimetext3-sublimelinter-jslint/
あとまぁここも
http://liginc.co.jp/web/js/73704
いまんとこlinterこんだけ入れてる

Sublime Text 3 + Compass + SCSSでの開発メモ

OSに、RubyとRuby Gemをインストール
Rubyに、GemでCompassとSCSSをインストール
ST3にCompass、SCSSをインストール
プロジェクトにconfig.rbを設置

http_path = "/"
css_dir = "/wp-content/themes/mtef/css"
sass_dir = "/wp-content/themes/mtef/scss"
images_dir = "/wp-content/themes/mtef/images"
output_style = :expanded # :expanded=一般的な{}で改行する形／:compressed=圧縮して出力
line_comments = false

SCSSを作成

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "compass";

a
{
    width:500px;
    overflow:auto;
    @include box-shadow(1px 1px 0 #ccc);
}

SCSSをコンパイルして動作確認
詳細は
http://dev.classmethod.jp/series/scss-tutorial/
とか
http://wp-d.org/2013/01/03/1732/
を見るとよろしい。

游書体ファミリー各OS搭載まとめ

構成

Windows 8.1

• 游ゴシック Light
• 游ゴシック Regular
• 游ゴシック Bold
• 游明朝 Light
• 游明朝 Regular
• 游明朝 Demibold

OS X 10.9

• 游ゴシック体 ミディアム
• 游ゴシック体 ボールド
• 游明朝体 ミディアム
• 游明朝体 デミボールド

Windows8.1搭載

# ファイル名 #
yugothil.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic Light
Font Subfamily name: Light
Unique font identifier: YuGothic-Light
Full font name: Yu Gothic Light
Version string: Version 1.55
Postscript name: YuGothic-Light
Preferred Family name: Yu Gothic
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游ゴシック Light
Font Subfamily name: Light
Full font name: 游ゴシック Light
Preferred Family name: 游ゴシック
Preferred Subfamily name: Light

# ファイル名 #
yugothic.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Regular
Unique font identifier: YuGothic-Regular
Full font name: Yu Gothic Regular
Version string: Version 1.55
Postscript name: YuGothic-Regular
Preferred Family name: Yu Gothic
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Regular
Full font name: 游ゴシック Regular
Preferred Family name: 游ゴシック
Preferred Subfamily name: Regular

# ファイル名 #
yugothib.ttf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Bold
Unique font identifier: YuGothic-Bold
Full font name: Yu Gothic Bold
Version string: Version 1.55
Postscript name: YuGothic-Bold
Preferred Family name: Yu Gothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Bold
Full font name: 游ゴシック Bold
Preferred Family name: 游ゴシック
Preferred Subfamily name: Bold

# ファイル名 #
yuminl.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Light
Font Subfamily name: Regular
Unique font identifier: YuMincho-Light
Full font name: Yu Mincho Light
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游明朝 Light
Font Subfamily name: Regular
Full font name: 游明朝 Light
Preferred Family name: 游明朝
Preferred Subfamily name: Light

# ファイル名 #
yumin.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho
Font Subfamily name: Regular
Unique font identifier: YuMincho-Regular
Full font name: Yu Mincho Regular
Version string: Version 1.55
Postscript name: YuMincho-Regular
Preferred Family name: Yu Mincho
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游明朝
Font Subfamily name: Regular
Full font name: 游明朝 Regular
Preferred Family name: 游明朝
Preferred Subfamily name: Regular

# ファイル名 #
yumindb.ttf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Demibold
Font Subfamily name: Bold
Unique font identifier: YuMincho-Demibold
Full font name: Yu Mincho Demibold
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝 Demibold
Font Subfamily name: Bold
Full font name: 游明朝 Demibold
Preferred Family name: 游明朝
Preferred Subfamily name: Demibold

MacOSX10.9搭載

# ファイル名 #
Yu Gothic Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Medium
Unique font identifier: YuGothic Medium; 8.0d1e1; 2013-02-28
Full font name: YuGothic Medium
Version string: Version 8.0d1e1
Postscript name: YuGo-Medium
Preferred Family name: YuGothic
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ミディアム
Full font name: 游ゴシック体 ミディアム
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Gothic Bold.otf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Bold
Unique font identifier: YuGothic Bold; 8.0d1e1; 2013-02-28
Full font name: YuGothic Bold
Version string: Version 8.0d1e1
Postscript name: YuGo-Bold
Preferred Family name: YuGothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ボールド
Full font name: 游ゴシック体 ボールド
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ボールド

# ファイル名 #
Yu Mincho Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Medium
Unique font identifier: 1.000;JY  ;YuMin-Medium
Full font name: YuMincho Medium
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Medium
Preferred Family name: YuMincho
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: ミディアム
Full font name: 游明朝体 ミディアム
Preferred Family name: 游明朝体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Mincho Demibold.otf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Demibold
Unique font identifier: 1.000;JY  ;YuMin-Demibold
Full font name: YuMincho Demibold
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Demibold
Preferred Family name: YuMincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: デミボールド
Full font name: 游明朝体 デミボールド
Preferred Family name: 游明朝体
Preferred Subfamily name: デミボールド

VirtualBox4.2.10上のUbuntuのソフトウェアアップデートで容量がいっぱいになったときにやったこと

前提として

• VirtualBox4.2.10
• Ubuntu12.04 LTS
• ホストマシンはWindows7
• 仮想ハードディスクは可変にせず固定のまま

全体の手順

1. VirtualBoxで新しい仮想マシンを容量を増やして作る
2. VBoxManageコマンドのclonehdコマンドで古い仮想マシンのハードディスクを新しい仮想マシンのハードディスクへコピーする
3. GpartedのISOをダウンロードして新しい仮想マシンにマウントし、CDドライブをVirtualBoxでプライマリマスターにした上で起動する
4. Gpartedでキーボード、言語を選び、0で起動する
5. swap領域を削除して後ろに持って行き、再度swap領域を作る
6. メインのディスク容量を増やす
7. 適用する
8. Gpartedのコマンドラインを起動し、swap領域の設定ファイルをviで編集し保存する
9. Gpartedを終了し、新しい仮想マシンのCDドライブをセカンダリマスターに変更する
10. 新しい仮想マシンを起動する
11. swap領域のUUIDを再設定してGpartedで設定した行を削除する
12. 再起動してswap領域の確認、容量の確認する
13. VirtualBoxの共有フォルダなどの設定を確認して終了

１～２は以下を参照

http://blog.brainhearts-next.com/2010/01/virtualboxos.html

３～１２は以下を参照

http://ankyo.blog.so-net.ne.jp/2011-02-20

ポイントは、VirtualBoxで先に増やしたHDD込みでマシンを作っておき、そこへ

VBoxManage clonehd "旧HDDのフルパス" "作ったばかりの新HDDフルパス" --existing

で中身を丸ごとコピーできることと、

Gpartedを使えばUbuntuを起動せずにメインのディスク容量を増やせるところ。

今回はソフトウェアアップデートを何気なくやったら急に容量が足りなくなり、カーネルの依存が壊れた所から始まったので、Ubuntu側で何もできなくなり非常に困った。

SublimeText2でProjectを開始する方法

今回某スマホ案件でSublimeText2(以下ST2)とSCSSでサイトを構築しようと思っております。
チャレンジする内容は下記の通り。

• ST2を使ってコーディング
• SCSSを使ってコーディング
• CSSの圧縮による高速化
• COMPASSの活用
• CSS スプライト
• 各種ベンダープレフィックス
• デフォルト変数の設定

上記にチャレンジしてみて、いわゆるフロントエンド周りの高速化にチャレンジ、というわけです。

今更ながらSass、Compass、Sublime Text 2をWindowsに導入してみている

ご無沙汰しております。寒中お見舞い申し上げます。

さて、最近は変数が使えるCSS管理コードと呼べば良いんでしょうか、そんな感じの言語が結構前からあります。

SassとかSCSSとかLESSってなんだ

• Sass
• SCSS
• LESS

「LESS」や「Sass」のようなCSS拡張メタ言語は、960.gsなどのフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。

CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。

一部改変：via

つまり、ある程度規模のあるウェブサイトならCSS全体で共通する値とかルールとかがあり、それらをCSSを拡張することにより使えるようにしたメタ言語、ということになりますね。まさに紙のデザインで言うところの指定紙になるような設計書を書くイメージでしょうか。

導入検討の意図

こういったツールは前から気になってはいたものの、Dreamweaverの保存即アップロードや、サイトを管理するGUI、差分を撮ってファイルをアップロードする機能、DIFFツールと連携できるところなどにかなり便利さを感じてしまっており、オーサリングツールを変える気にはなれませんでした。

ですが最近はスマートフォン対応、複数のDPIへの対応、MediaQueriesの対応などが必須となり、ページ単価は上げられないのに作業量は倍々で増えていくという地獄状態になっているので、作業量緩和のためのツールとして、覚えてみようかな、と言う次第です。

目標

Windows7-64bitで、オーサリングツール(Dreamweaverの代わり)を入れ、そこでSCSSをビルドすると自動的にFTPサーバーへアップロードされる様なもの。

障壁

今回障壁になったのは下記のようなこと。

• そもそもSublime Text(オーサリングツール)を使ったことがない
• なのでショートカットキーとかパッケージとかわからない
• 何ができるのかもわからない
• 当然SassもLESSもSCSSも使ったことがない
• どう書いて良いのかわからない
• オーサリングツールと拡張CSSのコンパイラの連携とかCompassとかよくわからない

概念について

• SassとSCSSって？
• Sassには二つの構文があります。一つ目は、SCSS（Sassy CSS）として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。
• 二つ目は古い構文で、インデント構文（単に“Sass”とも言われます）として知られているもので、CSSを書くのに、より簡潔な方法を提供します。この構文では、セレクタのネストを表すのに、カッコよりもインデントを、プロパティを区切るのに、セミコロンよりも改行を使います。一部の人は、SCSSよりも、この構文が読みやすく、また、速く書けることに気づきました。インデント構文は、SCSSと同じ機能を持っていましたが、やや構文が異なっていました。この違いは、インデント構文のリファレンスで説明しています。インデント構文で書かれたファイルは、.sassの拡張子を持ちます。
• つまり、SCSSはSassとは互換のない上位バージョンのSass、と思っておけばよいようです。
• どうやって動かすの？
• SCSSはrubyで動く。なのでOSにrubyをインストールする必要がある。
• コマンドラインでコンパイルすることが前提。vimとか使ってる人向けだった。
• Sublime Textをオーサリングツールとして、必要なパッケージをインストールすることでオーサリングツール上で使えるようになる。
• 基本的には、SCSSを書く、コンパイル(ビルド)する、CSSをアップロードする、と言う流れ。
• 自動でアップロードとか、自動でビルドとかはSublime Textにパッケージを入れることで解決する。

手順

1. rubyをインストール
1. Ruby Installer for Windows
2. gemのアップデート
1. gem update --system
3. Sassのインストール
1. gem install sass
4. Compassのインストール
1. gem install compass
5. Sublime Text 2のインストール
1. http://www.sublimetext.com/2
6. Sublime Text 2の設定
1. 一番参考になったページはこちら
2. その次に参考になったページはこちら
3. 詳細は二学期ですこちら
1. パッケージのインストール
1. SCSS
2. SCSS Snippets
3. Compass
4. そのほかHTML5やCSSを入れておくと吉。
2. テーマのインストール
3. Projectの作成
1. ProjectファイルはProjectのフォルダのルートに置いておく？
1. マルチバイトを含むファイルパスにProjectファイルがあるとCompassが動かない！！
4. さらにFTPで同期できるように設定
1. 詳細はこちら
5. 保存時にビルドするパッケージをインストール
1. SublimeOnSaveBuild

躓いたポイント

• 基本的にProjectのディレクトリもProjectファイルを保存する場所も、マルチバイトを含むパスに置かないこと。
• Projectファイルを保存しないとCompassが使えない。
• SASS Buildはなくても動く。最低限は上記3つのパッケージ。
• config.rbが適用されないときはST2を再起動してビルドして保存すると適用される？

残りの課題

• SCSSを使いこなす

MediaQueriesのサイトを1年間運営してみての備忘録

MediaQueriesサイトの自分なりの作り方を、複数作ってみた知見からまとめてみたいと思います。

●よくある要望

1. スマートフォンで縦持ち、横持ちどちらでも横幅ぴったりに合わせる
2. タブレットの縦持ちは専用ビュー、横持ちはPCと同じスタイルに

MediaQueriesについて説明すると、これらが期待されます。

●デザイナーとの兼ね合いで難しい点

一見するとかんたんですが、デザイナーがCSSを理解していない場合や、MediaQueriesに対応していないIE678にもある程度対応させる必要がある場合、特に１が意外と大変な作業になってくると思います。

また、スマートフォン専用サイトであれば、横幅を100%などリキッドなデザインで組む事で、いわゆる「横幅ぴったり」が実現できると思いますが、PCにも対応となると、ある程度横幅を制限しないと1行あたりの文字数が大幅に間延びしてしまい、結果として非常に読みづらい段落スタイルが出来上がってしまいます。

●汎用的なMediaQueriesを使ったソースコード

これらの問題を解決するために使える汎用的なMediaQueriesのデバイス用の区切りを備忘録として残しておきます。

HTML→

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title>~~~</title>

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
</head>

<body>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

</body>
</html>

CSS→

/* モバイル縦持ち（Portrait）に - 最大767pxのビューエリアの端末へ */

@media (max-width: 767px) {

.container { width: 300px; }

/*ここにモバイル用に使う汎用的なスタイルを書きます。*/

/*なぜこんな指定をするかというと、横用は別に記載するからです。*/

/*最大横幅は320pxです。*/

}

/* モバイル横持ち（Landscape）に - 最小480pxから最大767pxまでのビューエリアの端末へ */

@media (min-width: 480px) and (max-width: 767px) {

.container { width: 420px; }

/*ここに横持ち専用の限定的なスタイルを書きます。*/

/*最大横幅は480pxです。それ以上は左右にbodyの余白が出ます。*/
}

/* タブレット縦持ち（Portrait）に - 最小768pxから最大959pxまでのビューエリアの端末へ */

@media (min-width: 768px) and (max-width: 959px) {

.container{ width: 768px; }

/*ここにタブレット縦持ちの限定的なスタイルを書きます。*/

/*指定する最大横幅は768pxです。それ以上は左右にbodyの余白が出ます。*/
}

@media (-webkit-min-device-pixel-ratio:1.5),

(min--moz-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(min-device-pixel-ratio: 1.5) {

/*ここにCSS内で画像を指定しているエレメント用に、

  実際の2倍サイズの画像を定義し、

  background-size:横px 縦px;を指定します。*/

}

これらはiPhone3～iPhone4Sまでを考慮した指定ですが、Androidでも余白が出る程度で、大きな問題にはならずにきれいに収まるはずです。

●MediaQueriesのおさらい

Max Width：

ビューエリアの最大幅。このサイズより小さい場合に適用。基本pxで指定。
@media (max-width: 320px) {~~}などと書きます。

andでつなぐと「～から～まで」という事になります。Min Width：

ビューエリアの最小幅。このサイズより大きい場合に適用。基本pxで指定。

Max Device Width：

デバイスサイズの最大幅。このサイズより小さい場合に適用。基本pxで指定。

Min Device Width：

デバイスサイズの最小幅。このサイズより大きい場合に適用。基本pxで指定。

Device Pixel Ratio：

デバイスの解像度（webkit） - -webkit-device-pixel-ratio:1.5などと書きます
指定された値より大きいRatioの時に適用されます。 カンマで区切って複数指定もできます。

Orientation：

デバイスの向き - "landscape" or "portrait"の2値
Resolution：
解像度をDPIで定義します。 - min-resolution: 240dpiなどと書きます。
この場合は240dpi以上のデバイス、という意味になります。

Orientationを使えば？と考えるかもしれませんが、意外と実機で検証するというのは大変なものですし、JavaScriptなどで組まなくても端末をロテートさせればビューエリアも変わりますから、特段Orientationを使う理由もないと言えます。

●その他気をつけたい事

その他デザインやコーディングに気をつけたい点としては以下の事があるでしょう。

• デザイナーにはあらかじめベクターデータでデザインしてもらうか、横持ち時の2倍の横幅でデザインしてもらう事（上記例だと横幅960pxでモバイル用のデザインをする）
• ここで、Illustratorでデザインをしておけば、Web用に書き出しの時に画像サイズタブで、200%で書き出す事で、きれいに2倍サイズでラスタライズされた素材を切り出す事ができます。
• 注意したいのは2分の1サイズの画像も必要だという事です。つまり、960pxでモバイル用のデザインをする際は、どのオブジェクトも縦横偶数でなければなりません。
• 細部をデザインするときも、常にプログレッシブ エンハンスメントでデザインすることを意識し、極力CSS3で再現できる範囲の表現にとどめる。
• 最近はツールも充実しているので、グラデーションやドロップシャドウなどは余裕です。
• 三角形は再現できると言えばできますが、クロスブラウザ対応が難しいので避けるべきです。やるなら画像にしましょう。
• box-sizing:border-boxlを使わない
• IE67対策のため、box-sizingはやめましょう。凄く便利なので、モバイル向けサイトの構築には積極的に使っていきましょう。

意外と難しいと考えられがちなMediaQueriesですが、プログレッシブエンハンスメントを考慮してCSS3でデザインすれば、実はそこそこ楽に作る事ができます。是非皆さんもトライしてみてください。

WordPress始めました

プロジェクトで必要になりまして、WordPressを始めました。
バージョンは3.0.5。
さっそく、借りてるレンサバ「CORESERVER」で「PHPセーフモード」の回避のために、.htaccessを設置しました。
今後もぽちぽち書いていきたいと思います。

「東京都青少年の健全な育成に関する条例改定案」可決反対抗議声明について

出版社による、コミック10社会という会があり、昨今話題になっている、「東京都青少年の健全な育成に関する条例改定案」に対する可決反対抗議声明を、コミック10社会の10社が発表しました。

それに際して、株式会社 講談社で、自分でデザインしたページに抗議声明が載りまして、記念と言いますか、とりあえずスクリーンショットをとってみました。

お知らせ : 講談社「おもしろくて、ためになる」出版を


もう4、5年も前のデザインですので、是非ともリニューアルを提案したいと思いますが、それはともかく。

今回のこの都条例は表現の自由を奪うものであると言えるでしょう。法律や都条例に抵触する事象を描く漫画・アニメの規制。
此は青少年の育成に本当に効果があるのでしょうか。悪を描くことが許されなくなった漫画は、何と戦うものを描けばよいのでしょうか。また、なぜほかの媒体は良いのか、その点も不明です。

さらに、既存の作品で「傑作」と認定されたものは、この表現に抵触していても許されるようです。

それを判断するのは紛れもなく人間です。その人間は、我々が読むことのできる漫画やアニメを検閲する権限があるのでしょうか？

決してそのようなことはありません。我々は自由を勝ち取っており、それは憲法でも約束された自由です。

今後こういったことを皮切りに、様々な事を抑圧すればするほど、本当に取り締まるべき問題がよりアンダーグラウンドに入り、問題が根深くなったり、捜査が難航したりするでしょう。

それでもこのような条例を通して、果たして東京都知事他この条例を推進する人たちは、何をどうしたいのか。

日本の将来の姿が、自由から遠く離れてしまわないことを切に願います。

現在確認できる、都条例抗議声明ページ一覧

• リイド社
• 講談社
• 小学館
• 角川書店
• 集英社
• 少年画報社
• 双葉社

Windows7でUltraVNCのセットアップ

メインPCを入れ替えまして、会社から家のマシンにアクセスするために、リモートデスクトップ接続を試みたところ、うまくいきました。
ところが、リモートデスクトップには以下のような不都合が出るらしく（UltraVNC - Tiger - PukiWiki）、ちょうどイラストレーターなどを触る仕事なので、UltraVNCを使ってヴァーチャルネットワークコンピューティング(VNC)をしてみようと思い、セットアップしたときの出来事をメモとして書きます。

前提

• UltraVNCのバージョン
• UltraVNC 1.0.9.5（X64 1.0.9.5）
• http://www.uvnc.com:8080/downloads/ultravnc/92-ultravnc-1095.html
• OSのバージョン
• Windows 7 64bit

セットアップ

1. UltraVNCのダウンロード、インストール
1. UltraVNC 1.0.9.5（X64 1.0.9.5）
   http://www.uvnc.com:8080/downloads/ultravnc/92-ultravnc-1095.html
2. ポート開放
1. HGWでパケットフィルタ設定
1. 通過、in、TCP、any、any、any、5900-5902
2. HGWでポートマッピング設定
1. マシンの固定IP、TCP、5900-5902
3. ソフトの設定とポート開放で躓きました。GeForceのドライバでディスプレイが1つでも、Windowsでディスプレイが2つ認識されている場合、UltraVNC Serverでは、PrimaryDisplayとSecondaryDisplayを自動で設定し、PrimaryDisplayの情報を共有するポートを5901と自動設定されます。
   そこで、ポート開放を念のため5900から5902まで開放し、サーバー側でオートで設定していても問題なく接続できるようにしました。
4. UltraVNCの設定
1. 以下の画面のように設定しましたのでご参考ください。
1. 
   
1. このとき、Require MS LogonとNew MS Logonにチェックを入れ、Configure MS Logon Groupsで、VNCでログオンするグループの設定を行ってください。これにより、Windowsのログオン情報でVNCのログオンを管理できます。
2. 
2. VideoHookDriver（MirrorDriver）のインストール（上記UltraVNC - Tiger - PukiWikiさんを参照しました）
1. デバイスマネージャを開く
2. デバイスマネージャーのディスプレイアダプタで、以下のようになっていればインストール済みです。
   
3. もしmv video hook driver2がなければ以下を実行
1. [操作]->[レガシ ハードウェアの追加]を選択（一覧表示されているデバイスのどこかにフォーカスがあってないと選択肢が表示されないっぽいので注意）
2. 適当に進めて[一覧から選択したハードウェアをインストールする（詳細）]を選択
3. [すべてのデバイスを表示]を選択して次へ
4. [ディスク使用]からファイルの参照先を[(UltraVNCのインストール先)\driver\driver\mv2.inf]を選択
5. 最後まで進めてインストール完了
4. ちなみに私がデバイスマネージャーを確認せずに上記をやったところ、mv video hook driver2が二つ入ってしまっていたので、一つを削除しました。
3. 以上で設定完了です。
5. サービスでUltraVNCが実行されるように設定
1. スタートメニューから、UltraVNC→UltraVNC Server→Install WinVNC Serviceをクリック
1. これにより、ログオフ時でもVNCによる操作が出来るようになります。
2. ところが、これの挙動がイマイチ安定しなかったので、私は万が一のためにスタートアップにもUltraVNCServerを入れて、さらにリモートデスクトップでログインできるように設定し、リモートデスクトップでログイン後にUltraVNCを操作できるようにしました（最悪の場合リモートデスクトップからマシンを再起動させてUltraVNCがサービスレベルで起動するようにしています）。
1. リモートデスクトップではマシンの再起動がスタートメニューからは選べませんでしたが、Ctrl＋Alt＋Endで、タスクマネージャーに入る画面を出して、右下のシャットダウンボタンから再起動させることができました。

と今回もいろいろ躓いていますが、上記で、リモートデスクトップとUltraVNCを両方使えるようになり、前エントリーで紹介したWoLの設定とあわせて、遠隔からメインマシンの操作・ファイルのやり取りが出来る環境を構築でき、安心して外から自分の仕事が出来るようになりました。

ルーターを買ってはみたものの…

Windows7を導入し、ついでにルータも購入しました。WZR-HP-G301NHシリーズというバッファローのルーターで、アマゾンで6400円で購入できました。

【エントリーでポイント5倍 12/20(月)23:59迄】 【在庫あり】【18時までのご注文完了で当日出荷... 価格：6,750円（税込、送料別）

このルーターは、

• ギガビットに対応している
• IEEE 802.11nで高速無線に対応している
• 外部からルーターに接続したUSBメディア（HDDやUSBメモリなど）にアクセスできる
• WoLに対応している

ということで、購入を決めました。

これだけ高性能なルーターですが、WoLを外から行う場合（ルーターの設定画面を開いてWoLを行う場合）、PPPoE接続などを行って直接ルーターをモデムにつなげなくてはいけません。
また、ルーターがPCのMACアドレスとIPアドレスをひもづけるARPキャッシュがクリアされてしまうと（数時間でクリアされます）、WoLができません。
それを解決するために設定する、ブロードキャストアドレスにポートマッピングを行うこともできません。
そして、自宅はauひかり（ギガ得プラン）なので、HGWというルーター機能を持つ機器をモデムにつなげないと、プロバイダが契約対象住宅と見なしてくれません（HGWのルーター機能はDHCPサーバー機能をオフにするとできますが試していません）。

上記の様々な障害を乗り越えて、いかにWoLほかルーターの機能を使えるようにしたかを説明します。以下の設定は、HGW、ルーターともに初期状態の設定から設定しました。

また、LANケーブルの接続は、

• モデム→[WANポート]HGW[LANポート]→[WANポート]ルーター[LANポート]→[LANポート]PC

です。

1. HGW（Aterm BL190HW HGW）のDHCPサーバはONのまま、HGWのLAN側設定から、以下のように設定する
   
   
1. DHCPサーバー機能：使用する
2. アドレス割り当てパターン：手動設定
3. 割当先頭アドレス：192.168.0.40
1. このHGWは40番以降でないと詳細な設定ができないため
4. 割当数：64
5. WINSサーバーアドレス：空欄
2. WZR-HP-G301NHのルーター機能を後ろ側のスイッチでOFFにする
   
3. 設定を行っているPCのIPアドレスを以下にする(IP以外はそのままでOK、つながらない場合はルーターをリセットしてください)
1. 192.168.11.1
4. WZR-HP-G301NHの設定画面にアクセスする
1. ルーター機能をオフにしたWZR-HP-G301NHのIPアドレスは、192.168.11.100になります。
5. WZR-HP-G301NHのIPアドレスをHGWのLAN内に入れるため、以下のように設定する
   
1. LAN側IPアドレス：手動設定
2. IPアドレス：192.168.0.40
3. デフォルトゲートウェイ192.168.0.1（HGWです）
4. DNSサーバーアドレス：192.168.0.1（HGWです）
6. これで設定した後は、WZR-HP-G301NHのIPアドレスは192.168.0.40になります。
7. 設定を行っているPCのIPアドレス（WoLさせたいPCのIPアドレス）を192.168.0.41にする
   
8. HGWでWoL用にパケットフィルタ設定を行う
   
1. 通過、in、UDP、any、any、any、2304-2304、19
2. リモートデスクトップを行う場合は、以下を追加
1. 通過、in、TCP、any、any、any、3389-3389、20
3. さらにVNCを行う場合は、以下を追加
1. 通過、in、TCP、any、any、any、5900-5900、21
9. HGWでWoL用にポートマッピング設定を行う
   
1. 192168.0.255、UDP、2304-2304、1
2. リモートデスクトップを行う場合は、以下を追加
1. 192168.0.255、TCP、3389-3389、1
3. さらにVNCを行う場合は、以下を追加
1. 192168.0.255、TCP、5900-5900、1
10. 念のため「DHCP固定割当設定」でメインPCとルーターのIPとMACアドレスをポートリース予約しておく
1. PCのMACアドレスの調べ方は、コマンドプロンプトから以下を叩く
   ipconfig /all
2. ルーターのIPは上記で設定した40を、MACアドレスは192.168.0.40にアクセスしてステータスから調べる
11. 上記でWoLはできるようになっているはずです。
12. さらにNASは、
1. USBメディアをルーターにさして、
2. 192.168.0.40にアクセスし、
3. ユーザー管理とウェブアクセスで設定した後、
4. http://buffalonas.com/
5. へアクセスし、BuffaloNAS.com ネームで指定したネームを入れ、
6. BASIC認証で上記で作ったユーザーでアクセスします。
13. 以上でWoL、VNCおよびRDP、WZR-HP-G301NHでのNAS機能が有効になりました。

上記とは関係ないですが、HGWでジャンボフレームの設定をONにしました。

上記の設定に落ち着くまでものすごく試行錯誤しましたが、結局購入したルーターのルーター機能をオフにしてしまったので、DDNS機能とかがOmitされてしまい、非常にもったいない構成になってしまいました。

上記で実現できないWZR-HP-G301NHの機能一覧

• VPN
• DDNSの非固定IPアドレスのルータでの更新
• PPTPサーバー

なにもかもauひかりのHGWの仕様ですが、仕方ありません。

ひょっとしたたら、以下でできるようになるかもしれないと思ってやってみましたが、DDNSとVPN接続、PPTPサーバーなどはできるようになりました（24時間検証はしていませんがおそらく大丈夫かと）が、外部からのWoLや電話がどうしても使えませんでした。ご参考までに（下記設定中、設定しているマシンのIPは末尾から二つ目の0だったり11だったりする設定するルーターにあわせて都度固定設定してください）。

1. ルーターの後ろ側ルーター機能スイッチをON
2. HGW、ルーターともにリセット（これでHGWがIP192.168.0.1、ルーターが192.168.11.1になります）
3. HGWのIPsecパススルー機能をON
4. HGWのIPを192.168.11.2にする
5. HGWのDHCPサーバーオフ
6. ルーターのWANポートとモデムをLANケーブルでつなぐ
7. ルーターのLANポートからHGWのLANポートにLANケーブルでつなぐ
8. 操作しているPCのLANケーブルをルータにつなぐ
9. PCのIPを192.168.11.3にする
10. ルーターのIPアドレスの取得を自動に変更、MACアドレスをHGWのWAN側MACアドレスと同じにする
11. ステータスでIPが自動取得、取得がリアルタイムになっていることを確認する
12. ルーターのDMZホスト機能をON、（192.168.11.2）に向かせる
13. IPアドレスのリースをルーターの設定画面からHGWに192.168.11.2、メインPC用に192.168.11.3に設定する。HGW用のMACアドレスはHGWのWANではなくLAN側のMACアドレスを指定する
14. HGWの電話で使うUDPポートを、ルーターでパケットフィルタ(対象インタフェースを選択でLAN)、ポートマッピング設定を行い192.168.11.2に向かせる
15. HGW（192.168.11.2）に2304ポートを送るようにする
16. HGWでanyから来た2304ポートをブロードキャストアドレスに投げる（192.168.11.255）設定にする
17. リモートデスクトップとVNCのパケットフィルタとポートマッピングをルーターで行う
18. ルーターにてWAN側のIPアドレスを確認してローカルIP（192.168.11.2など）以外になっていることを確認、インターネットに接続できることを確認する
19. ルーター（192.168.11.1）でVPNやPPTPサーバーやNASなどを設定する

上記の設定でやってみて、電話通話とIP＆MACアドレス指定によるWoL以外はできました。DDNSで指定したドメインにアクセスすると、ルータにつながるので、そこからWoLはできますが、ARPキャッシュがクリアされる数時間後には（ルーターにより異なるそうです）、ドメインアクセスによるWoLもできなくなると思います。それから、auひかりの仕様で24時間でBANされる気もしています。IPリースの時間はリアルタイムでしたが、電話も使えていないことですし。

電話どうやったら使えるようになるんだろうか。HGWのWAN側にLAN指せばいいのかな？でもそれやるとWoL用のブロードキャストにポートフィルタできなくなりそうだし･･･どっちみちできないからいいのか…わざわざ買ったルーター機能をオフにしていろいろ機能がオミットされるけどやりたい機能は確保するか、ルーター機能をONにしてWoLと電話を犠牲にするか…。

知識無いと困りますねホント…。誰か助けて！

ひとまず、前者の、購入したルーターのルーター機能をなしにしてやる方法で、今後運用していこうと思います。DDNSの更新はあきらめたいと思います。ルーター再起動しない限りはたぶん変わらないと思いますし。

検索したところ、auひかりホームでVPNするやり方が記述されていましたが、

• ひかりOneでヤマハRTX1100を使う(2) - 情報技術の四方山話

ルーターが違うせいか、いくら時間をかけてトライしてもできなかったので、上記方法で落ち着かせようと思います。

雑になってしまいましたが、何かのお役に立てれば幸いです。

年度末まで忙しいけどこれで乗り切るぞ！

追記：
LAN内MacからWindows7を操作したので、以下からMacでRDPするソフトを入れました。

• ダウンロードの詳細 : Microsoft Remote Desktop Connection Client for Mac 2.1.0

PC自作およびWindows7 64bitインストールメモ

PCを新調したので、WindowsXPからWindows7にメインマシンを移行したときのメモを書きます。
＠2010/12/10～15
マシン構成は、旧マシンについていたHDD3台（C：プログラム系、D：データ系、E：キャッシュ系）のうち、DとEを新マシンにつなげました。iTunesなどで管理していたiTunesフォルダや、XAMPPインストール先はDです。

1. OSインストール
1. ユーザーとパスワードを設定
2. ネットワークは「ホーム」に設定
2. ドライバ類インストール
1. LANのドライバがあり、ネットにつながっていたのでまずWindowsアップデートを実行
2. マザボのDVDからドライバ類をすべてインストール
3. nVidiaからGTX460のドライバをDL、インストール
3. 必須ソフトのインストール
1. EmEditorのインストール
2. Chromeのインストール
1. 基本的な設定は、アカウントでChromeの設定を全て同期しているので、フォームのプレフィックスやExtensionを含めて移行できるが、Extensionの設定は移行できないので詳細な設定が必要なExtensionの場合は要注意。
2. キャッシュフォルダの変更（Explzhのオプションのシェル拡張の詳細設定に、ドラッグアンドドロップでシンボリックリンクを作成する機能が付いているので、Windows7ならこれで作れる！）
1. キャッシュフォルダ名変更（_Cacheに）
2. キャッシュフォルダのシンボリックリンク作成
1. mklink /d "C:\Users\@@ユーザー名@@\AppData\Local\Google\Chrome\User Data\Default\Cache" "E:\programscash\Chrome\Cache"
3. _Cacheを削除
3. Explzhをインストール
1. ダブルクリックで即時解凍されるように設定
1. 詳細はggr
4. ImgBurnをインストール
1. 日本語化
4. Office2007のインストール
5. AdobeCS4のインストール
   
6. XAMPPのインストール
1. XAMPPをインストール
2. hostsを設定
3. コンフィグ周りの設定ファイルを旧環境から上書き
4. ImageMagicを旧環境と同じ方法でインストール(xamppのperlにppmインストール)後、
7. iTunesのインストール（参考：http://nomano.shiwaza.com/tnoma/blog/archives/007359.html）
1. 旧マシンでiTunes関連ファイルの抽出
1. 音楽に関してはD内で管理していたのでそのまま移行
2. iTunes Library.itlファイルのあるフォルダをバックアップ
3. ついでにDVDに曲ファイルを全てバックアップ取った
2. 新マシンにiTunesをインストール
3. 一度iTunesを正常起動
4. 設定から音楽フォルダを指定（Dドライブ）
5. iTunesを終了
6. 旧マシンのiTunes Library.itlファイルのあるフォルダでミュージックフォルダ内のiTunesフォルダを置き換え
7. シフトキーを押しながら起動
8. ライブラリで、DドライブのiTunesフォルダからライブラリを選択
1. ライブラリのファイル名[ iTunes Library.itl ]
9. 同期状況の確認
10. コンピューターの認証
11. ストアの情報の同期
12. 今までダウンロードしたアプリの自動アップデートを有効にするために再度AppStoreからアプリダウンロード（一度iPhoneを抜いて、iPhone上でアプリをなにかアップデート後、再度繋いだところ、ライブラリにAppという項目ができ、iTunes上でアップデートが自動で確認できるようになりました）
1. アカウントが正しく認証されていれば、購入済みのアプリに関しては無料でダウンロードできる。
2. 認証が正しいかどうかは、iTunes Storeの右上のアカウントのアドレスから、「アカウント」をクリックして、「購入履歴」ボタンで購入したアプリが載っているか確認すること。
13. 完了
8. Dreamweaverの設定
1. 旧マシンで全サイトの設定を書き出し
2. 新マシンで全サイトの設定を読み込み
9. FFFTP（インストーラー無し版）のインストールと設定
1. 旧マシン上のインストーラーなしプログラムフォルダをDにコピー
2. 新マシン上でCにコピー

マシン組みました

ひとまずFFXIベンチマークを走らせたところ、6500でした。
Core i7 870、GTX460、Win7 64bitです。
普通ですね。
あとで写真なんか載せたいと思います。

湿度、足りてますか？

ベッドの近くに置くと、やけどする恐れが
あるので気をつけてくださいネ（笑）

最近凄い寒くなってますが、普通のエアコンだけだとなかなか加湿しながら暖房するのは難しいですよね。
ハロゲンヒーターは乾燥を防いで暖房できますが、やはり空気は乾燥しがちです。
うちもそんな感じだったので、加湿器付き空気清浄機を入れようかと思ったのですが、いかんせん高い。
なので、加湿器単体を買ったのですが、これが結構良い！

★特価★　「ツインバード スチーム式パーソナル加湿器 SK-4974W(SK4974W)」アロマオイルの香り... 価格：1,980円（税込、送料別）

なにより安いのが良いです。

実は、メインマシンが壊れてしまいまして、PCをこの時期に組むのは静電気対策が必要です。静電気は湿度とも関係性が高く、PCの組み立てルームなどは湿度管理もされており、50%前後が静電気放電がおきにくく最適な湿度といわれています（意外と高くて驚きました）。

湿気過多はPCに悪影響ですが、適度な湿度は人にもPCにも有意義ということですね。

この加湿器、上の青いところにアロマを乗せて使うことも出来るので、ちょっとおしゃれ気分を味わうことも出来ます（？）。

さらに、加熱して蒸気を飛ばすので、水に細菌がわくことも防げて良いと思います。電気代は過熱式のほうが多いですが、最大130Wだったと記憶していますので、少しつけて湿度を調節したりするのにはもってこいです。

ちょっとデザインが無骨なのがアレですが、とても安いので、加湿器エントリーモデルとしては最適だと思いました。

auひかり（旧名称ひかりone）でのHGW(Aterm BL190HW)を市販ルーターに変更する計画について

以下、機器もなく無知のままつらつら書いてまして、結局こうなりました

• AWD BLOG: ルーターを買ってはみたものの…
  

そのため以下駄文です。

USキーボードを使う理由

なるほどこれは参考になる。

USキーボードを選ぶいくつかの理由 - DTP Transit

つーか使うキーボードとマウスは形も仕様も統一したい。
Macも統一したいけどOS自体違うから無理か…。

iPhoneを縦にして読むときに最適な文字数について

今年1月にiPhone3GSを購入し、iPhoneを使ってテキストを読む機会が増えてきました。
スマートフォン向けのサイトを作る機会もありますが、その際に気をつける必要があるのが、スクリーン上の文字のサイズです。

今回は、iPhoneでテキストを読む際の最適なサイズについて考えたいと思います。

iPhoneの仕様

3GSだと解像度は480px320pxとなり、解像度は163ppiとなります。
iPhone4の場合は960px640pxで、解像度は326ppiです。

画面サイズは変わらず『3.5インチ』ですので、最終的に表示される文字サイズは、3.5インチのディスプレイに何文字入れるかで決まります。

Wikipediaの仕様と文字サイズ

今回は、iPhone上で文章を読むことに耐えられるサイズを算出するに当たり、WikipediaのiPhone向けに最適化されたページが読みやすかったので参考にしました。

Wikipedia for iPhoneは、1行あたり全角で23文字入るような設計になっていました。
また、その際の左右の余白は8〜9pxで構成されていました。

よって、16px＋23文字＝320px(163ppi)ということになります。

横幅320px - 余白16px = 文字ボックスの幅304px、
文字ボックスの幅304px ÷ 文字数23文字 ≒ 1文字あたりの幅13.2px、
1文字あたりの幅13.2px ≒ 8.2Q

ということで、文字の級数は8.2Q程度であることがわかりました。
実際の紙上だと、キャプションなどに使うほどのごく小さいサイズであることがわかります。

ごく小さい8.2Qというサイズでも、Wikipediaの中程度の長さの文章を読むことができるのは、、iPhoneはバックライトがあり、コントラストが紙上よりはっきりするため、小さい文字でも可読性が高く保持できるのではないかなと考えられます。

結論

個人的にはiPhoneに最適化されたWikipediaの文字は小さく感じており、できればもう少し大きい方が読みやすいと思っています。

1文字当たり15px、約9.3Q程度の大きさで構成し、1行の文字数は20文字程度になるように作るのが良いのではないか、という結論に至りました。

電子出版界の相関図

これはかなり参考になる。

日本の電子書籍勢力相関図: フロム京都

自分は現在実務でプロデュースに携わっているが、医療方面なので直接的に関わることはない。
しかし業界人と話す機会は多く、そこから見てもこの相関図は正しい認識だと思う。

電子出版の今後の鍵は「フォント」にあると思う。特にウェブフォント周り。
12月1日からの最前線 - フィクション・コミック・Webエンタテイメントを要チェックすべし。

iPhoneでレンタカーのキーを開ける？！

カレコ、と言うサービスだそうです。

予約からキーの開け閉めまでiPhoneアプリでやっちゃおうってすごい新しい感じがして、新しいサービスをはじめるときに、「全部iPhoneでできますよ！ね！新しいでしょ！」って言うのは、なるほど有効だな、と感じたサービスでした。

これはドミノピザにならんですごい良い連動かも。

機会があったら利用してみようと思いました。

iPhoneでクルマに乗ろう！｜三井物産グループのカーシェアリング　カレコ・カーシェアリングクラブ

bloggerへ独自ドメインの設定

bloggerへ独自ドメインの設定を行った。

まだドメインが反映されておらず表示されない。＠11月18日(木)0：57、30分経過

ドメインの設定はvalue domainで行った。
独自ドメインを利用するドメインのDNS設定から、ホスト名にはblog、ターゲットにはghs.google.com.を登録。タイプはCNAMEを選び、MX設定は10とした。

設定が反映されるのが待ち遠しい。