【VR】Unityで開発環境を整える

前回は、Oculus Goの画面をPCへミラーリングさせる方法を記事にしました。

o21o21.hatenablog.jp

こちらの記事でインストール/設定したところは前提で、 今回は「Oculus GoのUnityの開発環境」を整えていこうかと思います。

僕、Unity初心者なので至らない点はよろしくお願いいたします！ww

環境: Windows10

前提

まず前提として、以下をインストールしている前提ですすめます。 もし、インストールや設定をしていない方は、上記の記事を参考にしてみて下さい！

• Oculus Goの開発者モード
• Android Studio (v3.1.2)
• Unity (過去記事では扱っていませんが、ググるとインストール方法は沢山出てくると思うので割愛)

ではやっていきます！！

Android Studio

公式で紹介されている通り、 ビルドに必要なパッケージとツールをAndroid SDK Managerでインストールしていきます。

1. Android Studioの起動
2. ウィンドウ下部のConfigure > SDK Manager
3. 左メニューAndroid SDKを選択し、SDK Platformsタブを選択
4. Android 5.0 (Lollipop)以上(API Level)21以上にチェックをいれる(前回Level19以上をインストールしているはず)
5. SDK Toolsタブを選択
6. NDK、LLDB、Android SDK Build Tools xx.x.x.にチェックをいれる
7. OK を押下
8. Component Installerが立ち上がり、インストールを待って完了

トラブルシューティング

• Android Studioのヴァージョンについて 私のAndroid Studio自体のヴァージョンは、3.1.2です。

• SDKについて 前回では、API Level19以上のものをインストールしたかと思います。 私が最終的にビルドを試していたときに、(今回はMinimumAPI Levelを24に設定) 「UnityException: Requested minimum Android SDK not installed」のようなエラーが出ました。 ちょっと調査していないので断定できませんが、このようなエラーが出たらAndroid Studio側でアンインストールするなり最低API Levelまわりを確認してみて下さい。

Oculus Go ADB Driver

公式手順はこちらです。

ここからOculus Go ADB Driverをインストールできます。

1. 落としてきたzipを解凍
2. \oculus-go-adb-driver-2.0\usb_driver ディレクトリへ移動
3. android_winusb.infを右クリックでインストール

※もし右クリックでインストールの選択が出ない方はzipのディレクトリにいるのでフォルダを移動させるか、 ALZipをインストールしてみて下さい。

Unity

Unityを起動して、Unityでの設定を行っていきます。 Unityのインストールはこちら。

Unityの設定

1. 新規プロジェクトの作成

2. メニューのEdit > Preference を選択

3. 左メニューのExternal Toolsを選択
4. AndroidのSDKとJDKを設定します。

SDKは、以下を確認します。(Android Studio)

JDKは、おそらく C:/Program Files/Java/jdkx.x.x_xxx このようなPATHかと思います。

トラブルシューティング

• SDKやJDKの項目がない External Toolsの設定をしようとおもった時に、私は以下の画像の赤枠のところが存在しませんでした... これはどうもUnityのヴァージョンの問題だったようです。 もし同様の問題がおこった方は、ヴァージョンを確認して適当なヴァージョンを再度インストールしてみてください。 ここに過去のヴァージョンをインストールできるリンクを貼っておきますーー

ビルドの設定

1. メニューFile > BuildSettings...
2. PlatformをAndroidにする

プロジェクトの設定

1. メニューEdit > ProjectSetting > Player
2. 右端にメニューが表示される
3. OtherSettingの以下を変更 PackageName: 任意 MinimumAPI Level: Android 7.0 Nougat (API level24)
4. XR Settingsの以下を変更 Virtual Reality Supported: チェックボックス On Virtual Reality SDKs: Oculus

保存して実機で確認

ここまできたら、適当にオブジェクトを配置します。 GameObject > 3D Object > Cube みたいにとりあえず配置。

置けたら、メニューFile > SaveScene でシーンを保存します。 あとはビルドして起動させるだけです。

メニューFile > Build&Run を実行！！

どうでしょうか？Oculus Goの画面にオブジェクトが確認できました。

トラブルシューティング

• ビルドが通らない

けっこうここで時間を食いました。 エラーの内容としてはこのような内容でした。 「CommandInvokationFailure: Unable to list target platforms. Please make sure the android sdk path is correct. 」

あれ～何回もSDKのPATHを確認したのにおかしい... と、意気消沈していたところ有力な記事を発見。

原因はAndroid Studioのヴァージョンが起因していたっぽい。 ここからダウンロードしてきたzipを解凍し、 任意のディレクトリに展開。 toolsというフォルダが展開されたと思います。

こちらをSDKのPATH(例 C:\Users\user-name\AppData\Local\Android\Sdk)配下のtoolsと入れ替えましょう。 そしたらビルドが通るようになりました。

まとめ

これであとは実装次第となってくるでしょうか！ 私は全然Unity初心者なので、操作から慣れていく必要がありそうですww でもVRで開発なんてとでもわくわくしますね！

あと、日頃からUnityを触ってないのでヴァージョンの依存関係がとても大変だと感じました。 今回だとAndroid Studioとの依存関係で苦労しました。(アンインストールも時間かかるんだね... いつも仮想環境とかいじってるからさくっとなくなるのに...)

ともあれこれからも色々探って開発できたらと思いますーー！

以上

o21o21.hatenablog.jp

【docker】ailed: port is already allocated のエラー解決

dockerを使用していて、コンテナを立ち上げたりダウンさせたり 繰り返していると、コンテナ立ち上げ時に以下のようなエラーにたまーーーに遭遇します。

ERROR: for container-name  Cannot start service service-name: driver failed programming external connectivity on endpoint container-name (5a7832c7cfcefba8c6b18542b8055ba74c306d115530a8ca65ff278a10be944c): Bind for 0.0.0.0:8081 failed: port is already allocated

ERROR: Encountered errors while bringing up the project

特に私の場合は、docker-composeを複数起動させていたので開発中になんか挙動がおかしいときがあります。 その都度containerを削除してもう一回立ち上げても同様のエラー...

仕方なしにdocker自体を終了させて、もう一度起動させても同様のエラー... こんなかんじでした。

エラーの内容としては、「port8081に既に割り当てられているから、このコンテナを起動できないよ」 みたいなかんじ。

「ああ、そうなのか〜」

たまに起こるエラーなので都度ググっていましたが、この際ちゃんと順序をおって 少し無理やりかもしれないけど対応するために、メモがてら解決策を書いていきます。

まず、調べる

エラー内容は大体理解できたので、なんのプロセスが対象のportで使用されているか調べる。

ということで、lsofコマンドを使う。(LiSt Open Files)

使用中のportでなく、「プロセスが使用している(開いている)ファイルを表示させる」 ってのがこのコマンドを使用する際のキーっぽいかんじがする。

ターゲットとなるportにアクセスしているプロセスを特定します。

$ lsof -i:8081

COMMAND   PID            USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
vpnkit  24677 user-name   22u  IPv4 0x5af6653a778ed6e1      0t0  TCP *:sunproxyadmin (LISTEN)
vpnkit  24677 user-name   23u  IPv6 0x5af6653a4a0f6841      0t0  TCP localhost:sunproxyadmin (LISTEN)

「お、確かになんか機能している...」

「vpnkit？？」

調べてみると、vpnkitとは、 Docker for Mac、Windowsにおけるすべてのコンテナトラフィックに傍受ポイントを提供しているものらしい。 今回だとDocker for Macに該当するか。

dockerが急に終了したことで、portを掴んだままになっていたのかもしれない。 つまり、ゾンビプロセスってやつか！！ww (使ってみたかった用語...)

キルする

$ kill -9 PID

再度、docker-compose up したら無事立ち上がりました。

以上.

【VR】Oculus GoをPCへミラーリングさせる(無線)

先日Oculus Goが家に届きました！

私が購入したのは、これ。

www.oculus.com

64GBの方を選びました。 俗に言うスタンドアローン型というVR機器になるようです。

カートに入れて、購入完了して数時間で発送しますね！というメールがきました。 大体到着まで5日間ほどで手元に届きました。

「けっこうはやいな！」

中身を見てみるとけっこうシンプルにまとまっていました。 メガネを日頃かけている方でも安心。 メガネをかけている人用のアクセサリーみたいなのも付いていて、 スマホのアプリからOculusの設定をする時に、装着ムービーも丁寧に紹介されていました。

(※ わかりやすいように、画像を載せようかと思っていたのですが、この記事では割愛します。が、その分丁寧に書いてくつもりです！ また、後日画像を掲載させていくかもしれません。合わせて詳細も追記していければと思います。)

ここから、"PCへのミラーリング"について順をおって説明します。 今回は以下の記事を参考にさせて頂きました！さっそく先人の方に感謝...!!

Oculus Goの画面をPCにWirelessでミラーリング表示する

準備

まず、色々準備が必要です。 すんなりいけば大丈夫ですが、私はある設定で少し詰まりました... スマホアプリの開発を経験されている方はけっこうすんなりいきそう...

では、まず環境から。 あくまで私の環境ですので、他の環境では試していません。随時、自分にあった環境の設定方法をググる必要があるかもしれません。

環境: Windows10 (デスクトップPC) ブラウザ: Chrome

1. スマホアプリと連携

iPhoneならApp Storeで、AndroidならPlayストアで Oculusというアプリをダウンロード。

ログインを行い(アカウントを作成する必要があります)、手順に従って連携完了まで行う。

1-2. 開発者モードにする

ミラーリングするにしても、Unityで開発を行うにしても Oculusに対して開発者モードに設定する必要があります。

まず、以下のURLへ移動しログインします。

https://dashboard.oculus.com

そうすると、「新しい団体の作成」という画面が表示されるかと思います。 任意の団体名を記入し、送信し、完了させます。

完了すると以下の画面が出てくるかと思います。

一旦これでOKです。

スマホアプリに戻ります。

画面下部メニューの"設定" -> 接続しているOculus(シリアルナンバー付)をタップ

-> ”・・・その他の設定” -> "開発者モード" -> スイッチを"有効化" (青色にする)

これで完了です。

2. Android Studioをインストール

続いては、PCの方です。

色々調べてみると、ミラーリングするだけだったらadbコマンド (Android Debug Bridge)が使用できていれば問題なさそうです。 なので、既にAndroidの開発などをされている方は、不要かもしれません。 ここでは将来的にUnityでOculus Goを開発することを目的にしたいので、一気にAndroid Studioをインストールします。

公式: Android Studio概要

以下のURLに行って、ダウンロードします。

Download Android Studio and SDK Tools  |  Android Developers

1. ダウンロードした.exeを開きます。
2. 特に指定がなければ全部デフォルトでインストール&Nextボタン押下で大丈夫です
3. 全てのインストールが完了すると、Android Studioを起動します
4. ウィンドウ下部にある、Configure -> SDK Manager を選択
5. 左メニューAndroid SDKを押下し、タブSDK Platformを選択。
6. API Levelが19以上のものにチェックを入れます
7. タブSDK Toolsを押下し、LLDBとGoogle USB Driverにもチェックを入れます
8. ウィンドウ下部のOKを押下し、Component Installerが開かれインストールが開始されます

ここまでできたらウィンドウを閉じて大丈夫です。

3. adbコマンドを試す

Android StudioをインストールしてSDKもインストールできれば、 Windowsのコマンドプロンプトでadbコマンドが使用できているでしょう。

ここで、付属していたUSBケーブルとPCを接続します！

私の場合はここでadbコマンドが使用できず、 "’adb’は内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません"

と、出力...

「なんでやあああああぁぁ！！！」

とか言いながらググりました。

結果、環境変数のPATHが通っていないことが判明。 いつもやってんのに... 普段Windowsあんまり使わないから見落としてた。 (私の場合は早期に環境変数に気づきましたが、PATHがさらに間違っていたから時間とりましたww)

もしコマンドが使用できないなら、コントロールパネルを開いて、 システムとセキュリティ -> システム -> 左メニューのシステムの詳細設定 -> 詳細設定タブ の環境変数(N) -> 環境変数のPATHを選択して編集 -> 新規

ここで私は2つPATHに対して新規で追加。

C:\Users\ユーザ名\AppData\Local\Android\Sdk\platform-tools
C:\Program Files(x86)\Android\android-sdk\platform-tools

ちゃんとPATHがは自分で確認してください！！ 上記のpathを参考にエクスプローラーからポチポチしていけば確認できかと思います。

そして、いざコマンド実行。

> adb devices
List of devices attached
xxxxxxxxxxxxxxxxxx        unauthorized

「NOOOOOOOOOぉぉぉぉぉ〜〜〜！！！」

なんか権限ないですやん...

まあ、ただadbコマンドは使用できていてOculusは認識しているっぽい。

ふむふむ

ってことは、どっかで権限を有効にしてやるかんじかなと、またググる。

本来？というかAndroid端末であればどうやらUSBデバッグの許可の取り消しなるオプションがあるらしい。 ただ今回はOculusさんだぞ...

「どこを探してもない.... おおおおおおおおおお」

ってなってたらオキュラスのレンズから光が見えた！！！！www

USBデバッグの許可は、Oculusの画面から許可してあげる でしたwww

すげえバカでしたが、まあよしとする。

一応なのですが、adbサービスの再起動として、以下のコマンドを実行させます。

# 停止
> adb kill-server

# 起動
> adb start-server

ということで、もう一度デバイスの確認実行。

> adb devices

List of devices attached
xxxxxxxxxxxxxxxxxx        device

OK。

続いてOculusのIPを調べる。 無線LANなのでwlan数値を指定します。 ちなみにeth0は有線。

> adb shell ip addr show wlan0

出力された情報のinetの横にIPが確認できるかと思います。 おそらく192.168.xx.xxみたいに出てるかな？

adbでportを開放

portを開いていきます。 portの範囲は、5555～5585の範囲で奇数を指定したほうがよさそうです。 こちらがadb の仕組みです。

今回は公式で紹介されている通り5555で試します。

> adb tcpip 5555

これでUSBを介して、port5555でTCP/IP 接続をlistenするようにOculusを設定しました。

ここで、PCに接続しているOculusをUSBケーブルを抜きます。

※ 接続切れている場合は、adb connect <IP>:5555 で接続にトライしてみてください。

Vysorの設定

ここまできたら、あとはVysor(バイザー)のインストールと設定のみです。

Vysorとは、ブラウザChromeで動くアプリケーションです。 スマホ画面をパソコンへミラーリングさせるアプリのようです。わたくし初見でした。

まず、ブラウザにインストールします。

Vysor - Chrome ウェブストア

すると、chrome://apps/ に追加されていると思います。

起動させます。

起動させたウィンドウ上部にOculusの接続が確認できていればOKです。 もし、確認できていなければ、Settingsの上にあるConnectボタンを押下。

コマンドプロンプトで確認したIPとportを指定して接続します。

これでOculus Goを開始すればミラーリングできているかと思います!!!!!

自分では見えねえよってかんじですがww

Discordの画面共有で友人にみせてあげましたww

当人いわく、「画面見れてるよ！！！ ただお前ほどの感動はない」

とのことでしたwww

やはりVRで見れないので、購入してVR体験してもいいかもしれませんね！！

次回は、Unityでのプロジェクト環境構築&作成考えています。

以上.

【docker】2つのdocker-composeを同一ネットワークにする

今回は、dockerでコンテナ同士を連携させる方法について書いていく。

※ docker-composeのインストールなどは過去の記事を参考にしてください！

【localstack】AWSサービスをローカル環境へ - helloworlds

連携させる手段として、docker-composeというツールを用います。 既にご存知の方は多々いるかと思います。

公式の概要などはこちらにあるので一読してみてもいいかもしれません！

docker-compose.ymlというファイルへ複数DockerImageI(サービス)を定義することによって、 1つのCommandでコンテナが立ち上げるようになっています。

公式のDockerImageを利用すれば、あっという間に環境を整えることが可能です。 また、portsやvolumesなどといった設定値も合わせて定義することが可能です。

便利なので、docker-compose.yml自体を複数使用して開発することがあるかと思います。 docker-compose.ymlを複数立ち上げて、そのサービス間での通信を必要とするケースがあるかもしれません。

この記事は、ローカルで開発する際、2つのdocker-compose.ymlを立ち上げて 同一ネットワークに設定し、相互間を持たせてみたいと思います。

準備

まず、なんでも良いので2つのdocker-compose.ymlを作成します。 いちいち作成するのが面倒で、もし既存のdocker-compose.ymlを使用しているプロジェクトがあるなら そちらを使用してもいいかもしれません。

• docker-compose.yml (1)

version: '3'

services:
  localstack:
・
・ なにか適当に設定を記述
・

• docker-compose.yml (2)

version: '3'

services:
  nginx:
      image: nginx
・
・ なにか適当に設定を記述
・

新しいネットワークを作成する

今回、2つのdocker-composeを繋ぐためのネットワークを作成します。

その前に現在のネットワークを確認してみましょう。

$ docker network ls

NETWORK ID, NAME, DRIVER, SCOPEの列が出てきたかと思います。 心当たりのないネットワークは、コンテナを立ち上げた際に自動で生成させたネットワークです。

さて、ネットワークを作成します。 任意のネットワークをつけましょう。 オプションのdriverを指定しないと、bridgeになります。 もう1つ、overlayを指定できます(Docker エンジンが動作する複数のホスト上に渡す)。 overlayは、いくつか条件を満たさなければならないため、今回はbridgeで問題ないです。 詳細は公式を確認！

$ docker network create --driver bridge <network_name>

作成したら、もう一度docker network lsをしてみて作成されていたら大丈夫です。

ネットワークの確認

作成したネットワークの詳細を確認しいきます。 上記で作成した名前を、network_nameに指定します。

$ docker network inspect <network_name>

すると、以下みたいなのが出力されるかと思います。

[
    {
        "Name": "network_name",
        "Id": "e4c82b4f54286624dac00444d9b183353fdc15ced6df873dd86sdd99a4cd62ee",
        "Created": "2018-05-28T03:07:27.101555731Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": {},
            "Config": [
                {
                    "Subnet": "172.26.0.0/16",
                    "Gateway": "172.26.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {},
        "Options": {},
        "Labels": {}
    }
]

Containersの項目にはまだ何も指定がないことが確認できます。

docker-composeファイルにnetworksの指定を追記する

ネットワークの作成ができたので、次はそれぞれ2つのdocker-compose.ymlファイルに networks定義を追記していきます。

• docker-compose.yml (1)

version: '3'

services:
  localstack:
・
・ なにか適当に設定を記述
・
      networks:
         - network_name
networks:
  network_name:
    external: true

• docker-compose.yml (2)

version: '3'

services:
  nginx:
      image: nginx
・
・ なにか適当に設定を記述
・
    networks:
      - network_name
networks:
  network_name:
    external: true

やっと立ち上げてみる

それぞれ、docker-compose.ymlがあるディレクトリで以下を実行。

$ docker-compose up

そして、localhost:<任意のport> ブラウザでアクセス！

問題なく表示されていれば完了です！

※ もしportがわからなくなっちゃったみたいな人は、docker psして PORTSの項目を確認してみましょう。

もしかすると、指定したportと違うportが開いている！ということがあるかもしれません。 そういうときは、docker-compose.yml内の各サービスにnetworks名の定義を設定をすると任意のportで大丈夫みたいです。

Tips

コード内でコンテナ名が使用できる

私は、node.jsをnginxを使用して動かしていたのですが、 nodeのコード側で同一docker-compose.ymlにないコンテナに対して、 コンテナ名でアクセスできることがわかりました！

例えば、APIなんかの開発で別docker-compose.ymlを叩きたいときなど、

http://<任意コンテナ名>:4572 とかでアクセスできます。

Kitematic

DockerのGUIであるKitematicを使用することで、 なんのコンテナでどこのportが使用されているか簡単の確認することができます。 まだ使用していない人は、1度くらい見てみてもいいかもしれませんね！

以上

【VR】VRをおさらい

ちょーーっと最近VRに関心が湧いてきました。 なのでちょっと歴史なんかを勉強しようかと思います。

参考にしたのはこちらの技術書。

VRとは

VR (virtual reality)とは、 一般的にコンピュータによって生成された3D環境のシミュレーションのことです。

VR自体は新しい技術ではないようです。 学術研究や軍事機関では数十年も前から研究や開発が行われているようです。 (まあ、なんとなく想像はつきますね)

ちょっと歴史

1966年 アイバン・サザランドは最初のヘッドマウントディスプレイを発明されたそうです。

2012年 Oculus VR LLCの創業者である Palmer Luckeyは簡易ヘッドマウントディスプレイのデモを披露。 彼はDoomなどの有名なゲーム開発者のJohn Carmackと意気投合、後にOculus Rift Developer Kit 1をリリース。

これがFacebookのザッカーバーグの目にとまりFacebook傘下というかたちになったそうです。

なるほどなるほど、 だからOculus GoはFacebookから提供されていることになっているのか。

ヘッドマウントディスプレイ

デスクトップVR

WindowsPCやMac、Linuxといったコンピュータにケーブルで接続され、ヘッドセットより重いグラフィックスを処理します。 なので、ヘッドマウントディスプレイ(HMD)は、モーションセンサーの入力を持つディスプレイ機器というかんじです。

モバイルVR

2つのレンズとモバイル端末を収める簡易なデバイスから成ります。

ARとの違いとは？？

簡単に説明すると、 ARでは、あなたは手のひらサイズの飛行機を自分の手のひらの中に見ることができるでしょう。 VRでは、飛行機の中に直接入り込むことができ、機内から外を眺めたり、機内を歩き回ったりできることでしょう。

AR(仮想現実)は、コンピュータが生成したCGIを現実世界の視界の上に重ね合わせるものです。 ポケモンGOのARでポケモンをゲットするときなんかがそうですね。

CGIが常に現実世界の物体や人に合致し配置され、尚且、レイテンシーをなくすことが大きな課題となっているようです。

VR体験での種類とは

ジオラマ

3Dシーンを構築し、三人称視点で観察します。

一人称

自分がアバターとなってシーンに没入し、自由に動き回ったりできます。

インタラクティブなバーチャル環境

オブジェクトとやり取りすることができる。物理法則もあって、オブジェクトはユーザーに対して応答も返します。

レールの上

席に座って環境の中を移動します。

メディア

360度全方位、見渡すことができます。

ソーシャルVR

複数のプレイヤーが同じVR空間に入ってコミュニケーションをはかります。

まだまだVRに関してはスマホのように日本中で普及している機器ではないよね！ というのが私の感想です。 よって、今のうちに手をかけ、情報収集し、開発してみることが将来的に大きな財産になるかもしれないと思い、

先日、Oculus Goを購入しました！笑

届いたら色々試してみたいことや開発したいので、合わせてブログでも更新しようかと思います！

以上.

【CTF】Pythonで暗号を解く?!

過去に中古で購入したとある本で見かけたCTFという、 コンピュータ分野におけるセキュリティ分野における競技があること知った。

その中からおもしろい問題を見つけたので、 今回はそちらを取り上げてみる。

使用する言語は、Python。

なかなか問題のファイルを見つけ出すのに苦労した... 5年前くらいの問題みたいなので...

ただ、知っておくとおもしろいと思うところがありました。

今回使用するファイルですが、ブログ内では紹介しません。 もし知りたい方がいましたらコメントなどで教えてください！ (※ ただし元が信用できるダウンロード先ではないかもしれないということを覚えておいてください。)

いざ、やってみる

まず、問題で使用するファイルをダウンロード。

そのファイルをfileコマンドで形式を調査する。

$ file sample01
sample01: PNG image data, 19025 x 1, 8-bit/color RGBA, non-interlaced

するとファイルは画像ファイル？っぽいかんじ。PNGだな〜。

一旦macのFinderでファイルをダブルクリックしプレビューで表示してみた。

「ん？ なんもうつってないのか？」

もうお気づきの方はいると思いますが、この画像ファイルは先ほどコマンドかけたときに出力されている通り、 サイズが19025 x 1の画像ファイルだ。

だから真っ暗。 試しに拡大してみる。

「おお！なんか1ドットで幅が長いなんかでてきた！」

よく見てみるとある規則に基づいて黒い線と青い線が入っている。

「これはまさに暗号じゃねえか」と少しテンションがアガるwww

ここからはもう知っているか知らないかの問題になってくる。

こうした画像データを扱うのにはPythonがいいのでは？

 #!/usr/bin/python
  
from PIL import Image
 
y = 25
orig_img = Image.open('sample01')
img  = Image.new('RGB', ((19025/y, y+1)))
img.putdata(orig_img.getdata())
img.save("new_sample01.jpg")

7行目、オブジェクト,imgを新たに作成。 RGB形式で縦y, 横19025/yドットとする。 この25を変えれば縦幅の違う画像ファイルを生成できる。

さて実行。　

$ python sample01.py 

「おぉぉぉ！」

「アイ　ラブ　ミー？？」

なんか変だな。数字意味不明だ。

数値を変更する。

右側に青い線が斜めにはしっているのがわかる。 この青い線を真っ直ぐにしてあげる必要がある。

#!/usr/bin/python

from PIL import Image

x = 450
y = 10025

orig_img = Image.open('sample01')
img  = Image.new('RGB',((x, (19025/x)+1)) )

for i in range(y):
    print orig_img.getpixel((i,0))
    i += 1

img.putdata(orig_img.getdata())
img.save("new_new_sample01.jpg")

さあ...

「おお〜　バッチリ」

出力された以下の部分が青い線のところっぽい。

(16, 156, 239, 19) (16, 156, 239, 255)

コードの作成や参考記事を見たりしましたが、けっこう理解に時間がかかりました。 ただ、こういうこともできるとか1度でも実際に自分でやってみると、 今後に役立ちそうなかんじです。

【vim】NERDTreeでディレクトリをツリー表示する

最近Twitterなどでvimの需要が低くなってきているなんてことを見聞きします。 私も若い方なので、Atomとか近年リリースされている新しいエディタを使用することが多々あります。

操作を熟知したり、プラグイン追加したりすれば、ほんと便利に使用できますね！

私が在籍していた2、3社の先輩方たちはvimやemacsを使用していることが多かったです。 大体皆さん年齢的に、33〜55歳くらいの方でした。

皆さんに、「なんでemacs使っているのですか？」とか質問していました。

答えは、「私の先輩が使用していたから。」とか「サーバサイドずっとやっているからね〜。昔はよく物理サーバに繋いでたよ〜。」

たしかに先輩達が若手の頃は、今ほど性能の良いIDEとかなかったのか〜とか考えました。

それはそうと、 それよりわたしが感激したのは、操作のスピードでした。

もうほんとに早かったです。笑

そんな姿を見て私はvimを使っていこうと考えました。

他のエディタも使用することはあります。 ただ、操作性の良さから、少しの修正とか個人的に何か開発する時とかそういう時にvimを選択するようにしています。

そこで今回は、ディレクトリのツリー表示させるvimのプラグインを導入してみようかと思います。

この記事では、NERDTreeを導入します。 ※ そしてこの記事では、細かい操作は説明せず、私が使用してきて特にこれだけ覚えてればいいんじゃないかというものだけ記述します。

準備

前提として、NeoBundleが導入されていることが必須になります。

この導入手順は、過去のvim-goの記事があるので、 そちらを参考にしてみて下さい。

見出しの以下を実行していけば問題ないでしょう。

1. NeoBundle
2. NeoBundleインストール
3. .vimrcに記述

o21o21.hatenablog.jp

NERDTreeをインストール

上記で開いた、.vimrcファイルに以下を記述します。 記述する位置は、NeoBundleFetchの下くらいです。

NeoBundle 'scrooloose/nerdtree'

記述し保存したら、適当なファイルをvimで開きます。

そして、以下をvimコマンドを実行します。

:NeoBundleInstall

これでNERDTreeがインストールされるかと思います。

実際、これで完了なのです。 が、ツリーを開く際に:NERDTreeToggleこのコマンドを逐一実行させなければなりません。 長いし、スペルを覚えるのも面倒なのでショートカットキーを.vimrcに記述しましょう！

おまけで隠しファイルをデフォルで表示させるオプションも合わせて追記します。

" コントロール+e でツリー表示
nnoremap <silent><C-e> :NERDTreeToggle<CR>

" デフォルトで隠しファイルを表示
let NERDTreeShowHidden = 1

これで、Ctrl+e とするとツリーが表示されるかと思います。

あとは、色々な操作がありますが、私が使用しているシンプルな操作のみ書きます。

コマンド	動作
Ctrl+e	ツリーを開く
Ctrl+w+w	ウィンドウの移動(ツリーと開いているファイル間)
i	ファイルを水平分割して開く
s	ファイルを垂直分割して開く
:q	閉じる(ツリーもファイルも同様)

ツリー上の移動は、いつものh j k lで大丈夫。

これだけしかないですが、実際vimだと他にも色々覚えるコマンドが多いので私は最低限。。 他にも知りたい場合はググればけっこう出てくるので、そちらを参照して下さい！

以上