58FLOW

Android、行動経済学、ガジェットなどが好きです。日々感じたこと、ちょっとだけ役に立つかもしれないことなどいろいろ書きます。

友人Vと仲良くなるために

f:id:flow58:20171204232108p:plain

この記事は Vim Advent Calendar 2017 5日目の記事です。

qiita.com

Vimを使い始めて10ヶ月くらいになりました。とはいえ自分はコードを書く時に言語特化のIDEがある場合はそれを使うことが多く、他のエディタにも手をのばすのでVim一筋という訳でもありません。しかし、好きなエディタは何かと言われたらVimと答えます。Vimはそんな不思議な魅力のあるエディタだと思います。

先日はVimConf2017に参加してきました。VimConfは将来的にVimの作者のBram氏を招待したいと謳っているそうです1。そのためにVimユーザーの裾野を広げることもVimコミュニティに対する貢献だと思っています。Vim一筋でもない自分がVim本体のコミッターもいるアドベントカレンダーに参加するかは迷いましたが、なんとなくVimに興味があるけどとっつきにくくて手を出していないような人がVimを使うきっかけになればと思い参加しました。ということで初心者向けです。

Vimは初対面の人との付き合いが苦手な友人

Vim以外の多くのエディタでは、「spam」と入力したければ「spam」とタイプすればエディタ上に入力されます。しかし、Vimの場合はまずインサートモードに入ってからタイプしなければなりません。しかも保存するときにはまたノーマルモードに戻って:wをタイプしなければなりません。他のエディタに慣れていた人はこの時点でVimとのつき合いをやめてしまいたくなります。

しかし、このモードに慣れてくると逆にモードのないエディタのほうが効率が悪く感じる場合もあります。例えるならばはじめは怖い人だと思ってたけどつき合いだしてみると実はすごくいい人だったという友人のような感じです。git commitでコメントを残すときだけ付き合っていたのではなかなか仲良くなることはできません。仲良くなるためにはもう少し根気よく付き合ってみる必要があります。

Vimを使ってみたくなるためのヒント

初対面の人との付き合いが苦手なVimですが、他のエディタとの違う良いところを見つけることで好きになっていくと思います。今回はそんな気難しいVimと付き合うためのヒントとしてVimの便利な機能あげていきます。正直ここに紹介した以外にもたくさんあるのですが、スペースの都合上自分が特によく使うものを書いています。

なおここで <C-a> のような表記は Ctrl + a の入力を意味しています。

直前の動作の繰り返し(.

.コマンドは直前の操作を繰り返すためのコマンドです。自分がVimを使い始めたときに一番感動したのがこのコマンドでした。例えば下の文章でそれぞれの行の末尾に「!」を追加したい場合。1行目のどこでもいいのでA!<ESC>と入力、あとはj.j.とすれば3行に「!」を追加することができます。この時Aは末尾に移動してインサートモードに入る、!は実際の入力、<ESC>でノーマルモードに戻りjで一行下に移動、.で繰り返しという流れです。

おはようございます
よろしくお願いします
さようなら

A!<ESC>j.j.

おはようございます!
よろしくお願いします!
さようなら!

ソート(:sort

プログラムでも文章でも、何かを列挙して記述することはよくあると思います。それを後からソートしようと思ったときにVimではシェルに戻ったりコピーペーストを繰り返したりせずに:sortで行をソートできます。

おはようございます
よろしくお願いします
さようなら

ソートする行を選択した状態で:sort

おはようございます
さようなら
よろしくお願いします

インクリメント / デクリメント (<C-a> / <C-x>

テキストの中で数値を扱うことも多いですが、Vimでは<C-a>で数値のインクリメント、<C-x>でデクリメントができます。

来年は2017年です

<C-a>

来年は2018年です

矩形選択(<C-v>

Vimではテキストを選択するときに文字ことの選択(v)や行ごとの選択(V)の他に<C-v>で矩形選択もできます。

行の結合(J

Jでその行の改行を削除し、行を結合します。結合した部分には半角スペースが入ります。半角スペースを入れたくない場合はgJ

おはようございます
さようなら
よろしくお願いします

一行目にいる状態でJJ

おはようございます さようなら よろしくお願いします

大文字・小文字の変換(gugU~

Vimではアルファベットの大文字と小文字を変換するのも簡単です。guで大文字から小文字、gUで小文字から大文字、~でそれらをトグルできます。選択範囲に適用することもできるし、各モーションと組み合わせることもできます。

this is a pen.

tの位置にカーソルがある状態でgUl

This is a pen.

penのどこかの位置にカーソルがある状態でgUiw

This is a PEN.

インデント(><

これは他のエディタにもありそうですが、プログラムを書いているとよく使うので紹介しておきます。>でインデント<でその逆。

def main():
print(i)

printの行にカーソルがある状態で>>

def main():
    print(i)

(インデントの適用は>ですが、Vimでは多くの場合同じオペレーターを2回入力するとカーソルのある行に対して動作を適用します。そのため>>を入力しています。今回の場合は>lなどでも同じ動きになります。選択範囲のインデントは>だけで適用できます。)

おすすめの利用シーンとプラグイン

Vimを始めるときの個人的なおすすめな利用シーンは簡単なドキュメントの作成です。ちょっとドキュメントを書くときにプレビュー機能を使うためだけに重量級のエディタを使ったりプロジェクトという概念のあるエディタを使うのは面倒なので、そんなシーンでVimを試してみるのはいいと思います。

また、Vimの魅力の一つは世界中の人が作った便利なプラグインなので、おすすめのプラグインについても少し触れておきます。

Previm

Previm は外部ツールなし(ブラウザは必要)にreStructuredTextやMarkdownのプレビューができるプラグインです。

VIM Table Mode

VIM Table Mode はテキストで表組みが簡単にできるプラグインです。Markdownで表を作成するときなどに重宝します。

Vimでストレスを溜めないための補助ツール

ShowyEdge

Vimは頻繁にモードを切り替えて使うエディタですが日本語を扱う場合はIMEの切替ということも頭に入れて置かなければならないのが宿命です。IMEがオンのままノーマルモードの操作をすると思った通りの動作にならなくてストレスがたまることがあります。

そのため自分はMacShowyEdgeというアプリケーションを利用しています。このアプリケーションはIMEがオンになっているときに目立つ表示をしてくるのでVimを使うときのストレスが減りました。

おわりに

わりと既出のネタになってしまった感じは否めませんが、Vimと仲良くなりたいと考えている人の手助けになれば幸いです。IT関連のコミュニティにいると「Vimを使えるようになりたいけどなかなかうまく使えない」という人が実は結構いるという事に気がつきます。おそらくこのアドベントカレンダーを見ている人の中にもそういう人がいるのではないでしょうか。2017年もまだ数日ありますし、アドベントカレンダーに書かれている記事をきっかけにVimを使ってみてはいかがでしょうか。

この記事執筆時点で Vim2 Advent Calendar 2017 もまだ空いていたので参加するのもいいと思います。

東京ゲームショウ2017の雑な所感

もう一ヶ月以上前の事になってしまうのですが、東京ゲームショウ2017のビジネスデーに参加しました。ゲーム制作に関わるようになってから毎年ビジネスデーに参加しているのですが、今年の冬からゲーム開発とは別のところに行くことになり、これがおそらく最後に参加するビジネスデーなので一応個人的なメモという意味も含めて雑に書き残しておくことにします。なおスマートフォンで雑にまとめたものなので言葉がおかしい部分などがあるかもしれません。

また、個人の興味のある部分を中心にしたまとめであり、「多い」「少ない」などの表現は集計をしたわけではなく自分が参加した日時の自分の印象によるものです。

f:id:flow58:20170921143252j:plain

VR

  • 2016がVR一色だったのに対して今年は家庭用ゲームメーカーのVRの展示があまり目立っていなかった
  • PlayStationブースは去年はPSVRで大盛況だったが今年は特に印象がない
  • メジャーではないVRデバイスメーカーが昨年は多数あったが今年はあまりない
  • インディーズゲームでは昨年よりもVR向けのものが増えていた
  • 学生作品にもVRゲーム出てくるようになった
  • 家庭用が落ち着いている一方でアミューズメント施設向けのVRゲームは規模を拡大してて、本格的な設備を持ってくる企業が多かった
  • VR機器を繋いだマシンは大きく分けて背負うタイプ・固定されているタイプ・ケーブルを吊るすタイプがなどがあった
    • 今後ワイヤレスになっていくかな
  • hpの背負うタイプのマシンが印象的だった(VIVEと相性がいい設計)

ソーシャルゲーム

  • 以前のCygamesのような巨大なブースはないが中規模なブースは例年通り幾つかあり、ソーシャルゲームのジャンルは定着している感じ
  • 乙女ゲームがイケメンと写真がとれるブースを出したり大手ではないメーカーがコスプレイヤーを沢山用意したり、特定の層のユーザーを確実に囲い込もうと頑張っている感じ

コンシューマーゲーム

  • 旬な大型タイトルが少ないのか、あまりお金をかけていない印象 (実際は不明)
    • (自分の観測範囲で興味あるのがないからスルーしてただけかも)
  • 全体的に印象は薄いが、やはりブースの規模は巨大

e-Sports

  • PCゲームメーカー・配信プラットフォーム・ゲーミングデバイスメーカー・エナジードリンクメーカーは相変わらずe-Sports押し
  • いつもと変わらないか少し縮小された感じ

その他

  • DMM Games が結構大きめのブースを設置していた
  • PUBGがゲーミングデバイスメーカーなど各所で発見できて、ブームがじわじわ広がっている感じ
    • (最近はYoutuberもよく実況しているし)
  • PayPalが最近ゲーム課金に力を入れているので期待していたが予想以上に小さなブースだった

全体所感

家庭用VR機器は高額かつハイスペックなマシンが要求されるので現時点ではあまり普及していないと思われる。 (事例証拠ではあるが)購入した人の中でもすぐに飽きてしまった人は多い一方で、ちょっと体験してみたいという要望はあって、株式会社よむネコのエニグマスフィアのようにアミューズメント施設への導入で成功している事例がある。また、インディーズゲーム開発者や学生などの熱量は冷めていない。開発者も機材を手に入れることができてきたので家庭用ゲームビジネスとは別のところでは開発が進んでいる印象。

e-Sports・VR・ソーシャルゲームなど例年ブームになっている業態が大きなブースを出しているが、今年はバランス良く配置されているように感じた。あえて特筆するとするならばハードウェアへの注目度だろうか。VRやAIの登場でゲーミングPCの重要性は上がってきていると言える。

f:id:flow58:20170921151649j:plain f:id:flow58:20170921151211j:plain

日本語文章の中の英単語の左右には半角スペースを入れるべきか

日本語の文章の中に英単語の混ざった文章を書く際に、英単語の左右に半角スペースを入れる表現方法があるようです。

プルリクエスト1で半角スペースが空いていないことが指摘されているのを見たことがあり、一時期は自分も真似して半角スペースを空けていたのですが、最近少し違和感を感じ始めたのでそのことについて考えてみました。

f:id:flow58:20170211235453p:plain

英単語の左右に空間があるのは読みやすいのか

「この MacBook Pro には HDMI ポートがついています。」

「このMacBook ProにはHDMIポートがついています。」

この文全体をデザインとして見ると、たしかに英単語の左右に空間がある方が見やすくなっているのかもしれません。とくに「MacBook Pro」という一つの製品名の中に半角スペースが入っているため、意味のまとまりを考えると「MacBook Pro」の左右には空間が空いていたほうがわかりやすいでしょうか。

英単語の左右には半角スペースを入れるべきか

英単語の左右に空間がある方が見やすくなっているのかもしれないと表現しましたが、では日本語の中に英単語を書くときに半角スペースを入れるべきなのでしょうか。自分は入れるべきだとは考えません。

その理由は大体以下のとおりです。

  • 字詰め調整としての半角スペースは大きすぎる
  • 半角スペースを入れる文化は英語の文化であり日本語の文化ではない
  • 文節が崩れる
  • 意味のまとまりが崩れる

字詰め調整としての半角スペースは大きすぎる

文章のデザインとしてはある程度の空間が空いている方が見やすくなることもあるでしょう。たとえば画像の中に英単語混じりの日本語文章を書く際にはカーニングで少し大きめに空間を入れる場合もあると思います。テキストとして書く場合はそれができないため半角スペースで代用はできますが、大きすぎます。

半角スペースを入れる文化は英語の文化であり日本語の文化ではない

デザインの観点ではなく、「英単語の左右には半角スペースが入っているのが当然だ」と考える人もいるかもしれません。しかし、それは英語の文章における文化であり日本語に当てはめる理由にはなりません。

文節が崩れる

日本語には文節という「実際の言語としてはそれ以上に分けることができない個々の部分」という考え方があります。2

「昨日の敵は今日の友」

これを分節で区切ると次のようになり、ひらがなにしてもある程度読みやすくなります。

  • 「昨日の 敵は 今日の 友」
  • 「きのうの てきは きょうの とも」

では英単語混じりの文で英単語の左右に半角スペースを入れた場合どうなるでしょうか。

  • 「私は Python を使って web サイトを作る」
  • 「わたしは ぱいそん をつかって うぇぶ さいとをつくる」

本来は次のように文節が区切られているはずです。

  • 「私は Pythonを 使って webサイトを 作る」
  • 「わたしは ぱいそんを つかって ウェブサイトを つくる」

文節の全く関係のないところに半角スペースという「文字」が入っていることに違和感を感じます。

意味のまとまりが崩れる

雑誌でもwebページでもプログラミングでも、デザインする際は意味のまとまりによって余白の大きさを変えるのが一般的です。

たとえば適当なGoogleの検索結果を見てみましょう。検索結果のタイトル・URL・内容がひとまとまりになっており、前後の検索結果との間には余白があります。また、右側のお店の営業時間の情報をみると「電話」と「営業時間」との間の余白よりも「営業時間」と営業時間に対する注意書きとの余白の方が小さくなっています。

f:id:flow58:20170211233656p:plain

「私はPythonを使ってwebサイトを作る」という文章では、「サイトを作る」という部分よりも明らかに「webサイト」という部分のほうが意味としてまとまっています。

「私は Python を使って web サイトを作る」

この表現は意味のまとまりを崩しており、違和感があります。この違和感の原因は、一つ目の理由に書いたとおり半角スペースが大きすぎるからでしょう。この余白の大きさは個々の文字同士のバランスを調整する役割の範囲を超えています。

しかし、同様の理由で「MacBook Pro」のように製品名に半角スペースが入っていると

「このMacBook ProにはHDMIポートがついています」

という文章では意味のまとまりと表現のまとまりが変わってしまいます。このあたりはまだ答えが出ていません。

議論

少し前まで自分も半角スペースを空ける派だったのですが、これらの理由から最近は半角スペースを空けないで書くことが多いです。日本語の研究をしているわけでもなんでもないのでこの指摘が正しいのかどうかはわかりません。

少なくともここに書かれていることを使って、ガイドラインなしに頑なに半角スペースを空けることを指摘するレビュアーに反論することはできると思います。

Shureのイヤホンのイヤーピースをコンプライにしたら最強の耳栓になった

ここ数年ずっと Shure の SE215 Special Edition を使っているのですが、その理由は遮音性が高いためです。僕はあまり音質を気にするタイプではないのですが、カフェや電車で周りの人が立てる物音に関してはすごく敏感なので周りの雑音を遮断するイヤホンは必需品です。そのイヤホンの遮音性を更に高めるためにイヤーピースを交換しました。

コンプライの購入

数年間電車に乗る時や作業中、就寝前など、ほぼ毎日イヤホンを使っていたので流石にイヤーピースの劣化を感じてきました。

純正のイヤーピースを買おうと思ったのですが、コンプライというアメリカの軍用として使われていた低反発ポリウレタン製のイヤーピースの評判が良かったので買ってみることにしました。

www.comply.jp

タイプは一番遮音性が高いという P-type にしました。サイズは S・M・L がある中で M にしました。

f:id:flow58:20170109000612j:plain

3セット入って ¥2,910- 。結構高い。

Shure 純正イヤーピースとの比較

f:id:flow58:20170109000134j:plain

f:id:flow58:20170109000228j:plain

f:id:flow58:20170109002229j:plain

f:id:flow58:20170109001055j:plain

形状

P-type は純正のものよりも長さがあります。どうやらこの長さによってより遮音性が高まるようです。

硬さ

純正よりも少し硬く、手で潰したときにもとの形状に戻るまでの時間がかかります(低反発)。

遮音性

かなり高いです。そこら辺に売っている耳栓よりも遮音性が高く、ちょっとした物音なら殆ど聞こえません。

音質

よくわからない。

付け心地

多少圧迫感を感じますがなれると思います。

その他

音が出てくる穴の部分なのですが、純正のイヤーピースは網目状になっていて汚れが入りにくくなっているのですが、コンプライにはそれがないので汚れが入りやすそうな感じがします。

感想

買って正解でした。音楽が聞きたい時以外にも周りの音が気になるときに装着して耳栓代わりになります。周りから見ると音楽を聞いているようにしか見えないので違和感もありません。いつも使っているイヤホンが最強の耳栓になりました。

cowsay でプロ生ちゃんにしゃべってもらう

f:id:flow58:20161209094920j:plain

プロ生ちゃん Advent Calendar 2016 (9日目)の記事です

www.adventar.org

どうやらこのブログエントリーの一つ前のエントリーが昨年のプロ生ちゃん Advent Calendar なので1年間くらいブログを書いていなかったということですね。 今回は cowsay を使ってプロ生ちゃんにコンソール上でしゃべってもらいます。

cowsay とは

コンソール上に牛のAAが現れてメッセージを表示してくれるツールです

cowsay のインストールと環境

環境

今回使用した環境は Mac OS X El Capitan (10.11.6) です。windows でできるかどうかはわかりません。 また、cowsay のインストールには homebrew を使いました。homebrew のインストールはググるとたぶん出てきます。

cowsay インストール

$ brew install cowsay

確認してみます

$ cowsay hello
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

プロ生ちゃん用 Cow file ファイル作成

cowsay でプロ生ちゃんにしゃべってもらうには Cow file というものを作成しなければなりません。 Cow file の置き場所は cowsay -l で確認できます。

$ cowsay -l
Cow files in /usr/local/Cellar/cowsay/3.04/share/cows:
...

Cow files のところに書かれているパスに Cow file を追加します。

今回はこんな感じで作成しました。

gist.github.com

これを pronama.cow などと名前をつけて保存します。

もう一度 cowsay -l を実行すると Cow files の中に pronama が追加されています。

プロ生ちゃんにしゃべってもらう

$ cowsay -f pronama ばばーん

f:id:flow58:20161209100153p:plain

番外: Ansible でプロ生ちゃんにしゃべってもらう

個人的に運用しているサイトなどで、デプロイに Ansible を使っています。 Ansible では cowsay がインストールされている環境の場合 cowsay でメッセージを出力します。 そのメッセージのときにもプロ生ちゃんに登場してもらいます。

環境変数の設定

$ export ANSIBLE_COW_SELECTION=pronama

これだけで終わりです。適当な playbook を流してみましょう。

$ ansible-playbook playbook.yml

f:id:flow58:20161209101118p:plain

これでタスクが実行されるたびにプロ生ちゃんがしゃべってくれます。

結構じゃまです。

cssスプライト作ったけど設計に迷った

プロ生ちゃんアドベントカレンダー2015の10日目です。

www.adventar.org

プロ生ちゃんのドット絵をcssで扱ってみました

f:id:flow58:20151210151836p:plainソースコードとデモ

css設計について

今回はプロ生ちゃんドット絵をcssスプライトにしたという話なのですが、css設計にちょっと悩みました。ここではSCSSやLESSのことは考えずに書いています。

今回のcss設計

まず、今回書いたcssのスプライト全体の共通設定として以下のように各クラスを羅列して書いています。

.pronama-01-1,
.pronama-01-2,
.pronama-01-3,
/* ... */
.pronama-running{
  display: inline-block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url('https://dl.dropboxusercontent.com/u/6396527/all.png');
}

さらに縦型のスプライト用の設定は次のように追記しています。

.pronama-01-1,
.pronama-01-2,
.pronama-01-3,
/* ... */
.pronama-running{
  width: 32px;
  height: 64px;
}

この書き方は共通部分は分離しつつHTMLもシンプルにするという思想のもとに書いています。しかし、ソースを見てもらえればわかるようにクラスを羅列する部分が多くなってしまいます。

<i class="pronama-01-1"></i>

もうひとつのcss設計

もうひとつの方法として、クラス名を羅列せずに共通で使える別クラスを用意する方法も考えられます。

.icon {
  display: inline-block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url('https://dl.dropboxusercontent.com/u/6396527/all.png');
}

.standing {
  width: 32px;
  height: 64px;
}

この書き方はクラス名を羅列する必要が無くcssがシンプルになる反面、HTMLには依存するクラスを全て指定しなければならないため今度はHTMLが複雑になります。

<i class="icon standing pronama-01-1"></i>

なお、どちらの書き方でも以下のように各クラスのbackground-positionを指定している部分は変わりません。

.pronama-01-1{
  background-position: 0 0;
}

結局どちらが良いか

どちらも一長一短ありますが、僕の場合は前者の設計が好きです。僕の設計の仕方のひとつとして、使う側のインターフェースから設計し始めるというのがあります。この場合の「使う側」はHTMLのことです。HTMLとcssの実装者が違う場合はこの考え方は特に有効だと思っていて、HTMLの実装者が覚えなければいけないことを出来るだけ少ない方がいいのではないかという考えです。

だからこの場合<i class='pronama-01-1'></i>とだけ書けばいいという設計の方が好きです。

もちろん、これはプロジェクトや実装者によって考え方は変わると思います。

おわりに

最近のcss設計にはあまり明るくないのですが、こういう場合の定石ってあるんですかね?世に出回っているライブラリをざっと見ると<i class="fa fa-shopping-cart fa-lg"></i>と書くパターンと<i class="icono-cart"></i>と書くパターン両方ありました。

でも感じとしては<i class="[ライブラリ名]-[icon名] [オプション]"></i>というのが多いのかな?

SNSのアイコンと人格について

プロ生ちゃんAdvent Calendar 2015 8日目の記事です www.adventar.org

f:id:flow58:20151208100442p:plain

最近、(鍵垢では無い方の)Twitterなどでプロ生ちゃんのアイコン利用案内)を使わせてもらってます。プロ生ちゃんアドベントカレンダーという事で、無理矢理それと結びつけてSNSのアイコンが人格に与える影響ついて最近思った事を書きます。即興ネタなので後から少しずつ変更するかもしれません。

アイコンの違いは没個性化に影響するか

没個性化とはざっくりいうと、集団の中や自分が覆面をかぶった状態で他者から個人として注目されにくいときに攻撃的な行動などを取りやすくなってしまう事です(という説明で大体あっていると思う)。二次元アイコンなど顔写真以外のアイコンは没個性化に影響するかという問いに対しては、自分の顔写真を使っている場合と比べると影響はあるかもしれません。しかしTwitterなどのSNSに関していうと、個人が特定されないアイコンで、しかも匿名であったとしても、ある程度その中でのコミュニティや個人のアイデンティティーが確立しているので2chなどと比べるとそれほど影響しないと思います。

アイコンの違いはSNS上での性格に影響するか

アイコンの違いはSNS上の性格には影響すると思います。ここでの性格とは発言の内容や表現の仕方・言葉遣い・対人関係での対応の仕方などの事を意味していますが、これは役割期待・役割行動で説明できます。役割期待・役割行動は男らしさ・上司らしさ・オタクらしさ…のような「○○らしさ」に対する期待や行動です。Twitterなどではそのアイコンからその人の性格を無意識的に想像でき、不思議なことにそれがキャラクターアイコンであればなんとなくそのキャラクターが発言しているように見える事もあります。そんな中で自分のアイコンに見合った性格に近付く可能性はあります。

自分の場合、今まではマスクをつけた横顔の写真を使っていたのですが、プロ生ちゃんの笑顔のアイコンにしてからはあまりに固すぎる発言や批判的な発言は少なくなった気がしますし、語尾も若干違う気がします。

おわりに

意識高い系の人からはアニメアイコンなどは批判される事もありますが、それが個性でもあり同じような趣味の人との結びつきの機会にもなるのでいいんじゃないかと思います。

アドベントカレンダー