Kohshi's Blog

2017/12/19

2016/10/23

dockerをインストール@Ubuntu14:04

基本は以下の手順通りに行う
* https://docs.docker.com/engine/installation/linux/ubuntulinux/

1. Prerequisitesのインストール
apt source listを追加する際に書き込みがsudoできないのでできないのでteeとか使ってやる。
```
$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates
$ sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D

apt sourceの追加（sourceはUbuntu versionごとに違うので注意）
$ echo "deb https://apt.dockerproject.org/repo ubuntu-trusty main" | sudo tee /etc/apt/sources.list.d/docker.list
```

aufs storage driverなるものが使えるようになるので以下をインストールしろと言われるがlinux-image-extra-virtualを入れようとすると以下の依存エラーが起きた
```
$ sudo apt-get install linux-image-extra-$(uname -r) linux-image-extra-virtual
```
依存エラー
```
The following packages have unmet dependencies:
 linux-image-extra-virtual : Depends: linux-image-generic (= 3.13.0.100.108) but 3.13.0.92.99 is to be installed
E: Unable to correct problems, you have held broken packages.
```

これはいったん、linux-image-genericをpurgeしてreinstallすることで対応できた

```
$sudo apt-get purge linux-image-generic
$sudo apt-get install --reinstall linux-image-generic
```

1. dockerインストール

```
    Log into your Ubuntu installation as a user with sudo privileges.

Update your APT package index.

$ sudo apt-get update

Install Docker.

$ sudo apt-get install docker-engine

Start the docker daemon.

$ sudo service docker start

Verify docker is installed correctly.

$ sudo docker run hello-world

This command downloads a test image and runs it in a container. When the container runs, it prints an informational message. Then, it exits.
```
hello-worldを実行すると以下がでて正しくインストールできたっぽいことがわかる
```
Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker Hub account:
 https://hub.docker.com

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/

```

## Tips

### proxy

docker.ioへ接続する際のproxy設定は /etc/default/dockerへ以下を記載する
```
export http_proxy="http://proxy.hoge.com:XXXXXX"
```
変更後はdockerのrestartが必要
```
$sudo service docker restart
```

### sudoなしdocker実行

installation pageにもあるがdockerグループを作成して、そこにユーザを入れることでsudoなしでもdockerコマンドが実行できるようになる。

グループへ追加後、対象ユーザで作業している場合にはログアウト → 再ログインが必要なので注意

dockerをインストール@Ubuntu14:04

基本は以下の手順通りに行う
https://docs.docker.com/engine/installation/linux/ubuntulinux/

apt sourceの追加（sourceはUbuntu versionごとに違うので注意）
$ echo "deb https://apt.dockerproject.org/repo ubuntu-trusty main" | sudo tee /etc/apt/sources.list.d/docker.list
```

これはいったん、linux-image-genericをpurgeしてreinstallすることで対応できた

```
$sudo apt-get purge linux-image-generic
$sudo apt-get install --reinstall linux-image-generic
```

1. dockerインストール

```
    Log into your Ubuntu installation as a user with sudo privileges.

Update your APT package index.

$ sudo apt-get update

Install Docker.

$ sudo apt-get install docker-engine

Start the docker daemon.

$ sudo service docker start

Verify docker is installed correctly.

$ sudo docker run hello-world

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker Hub account:
 https://hub.docker.com

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/

```

Tipsとしてはdocker.ioへ接続する際のproxy設定は /etc/default/dockerへ以下を記載する
```
export http_proxy="http://proxy.hoge.com:XXXXXX"
```
変更後はdockerのrestartが必要
```
$sudo service docker restart
```

2016/07/30

Macに挿して使うubuntu USBメモリ作ってみた

## MacにUSBメモリをさしてUbuntuインストール

ちょっと家でも使えるLiveUSBじゃないUbuntu環境が欲しくて家のMacにUSBメモリをさしてそこにUbuntuをインストールしてみた。

参考にさせてもらったのは[ここ](http://taka8aru.blogspot.jp/2013/05/mac-os-xusblinux.html)とかです。

参考サイトでは[rEFIt](http://refit.sourceforge.net)を使ってたが、すでにメンテされてないのでそこから  
forkされた[rEFInd](http://www.rodsbooks.com/refind/installing.html)を使いました。

手順としては以下。今回はUbuntu14.04 LTSを入れました。

1. ubuntuインストールLiveUSBを（UbuntuをインストールするUSBメモリとは別に）作成
2. インストール先のUSBメモリでrEFInd用パーティションを切る
3. rEFInd用のパーティションをマウントしてrEFIndをインストール（ここまでMac側で作業）
4. LiveUSBで起動
5. インストール先USBメモリをマウント
6. Ubuntu用のパーティションを切る
7. Install UbuntuからUbuntuをインストール

OSをインストールして使うとなると容量だけでなく速度が非常に重要になり、最初東芝のUSBメモリ（TransMemory THN-U301W0320）に
インストールしたのですが遅くて非常に使い勝手が悪い結果になってしまいました。

結局下の速度に定評のあるSnaDiskのメモリを使う事で快適になりましたw

このくらいのサイズ感です。もっと小さいほうが理想的だけどまぁまぁ支障はないでしょう。

1. ubuntuインストールLiveUSBを（UbuntuをインストールするUSBメモリとは別に）作成
こちらはUbuntuの公式ページに説明があるので省略 → [How to create a bootable USB stick on OS X](http://www.ubuntu.com/download/desktop/create-a-usb-stick-on-mac-osx)

2. インストール先のUSBメモリでrEFInd用パーティションを切る
まず、EFI用にUSBメモリの先頭に30MB(後記：20MBでもいいっぽい)のHFS+(ジャーナリング)パーティションと残り全部のパーティションに分けます。
Macのディスクユーティリティ.appからだとうまくできずにUSB全体で1パーティションにしかできず、色々悩んだ結果コマンドのdiskutilからやりました。

```#shell
以下でUSBメモリの/dev/disk? の?を確認。下の場合は/dev/disk2
% diskutier list
/dev/disk0 (internal, physical):
省略
/dev/disk1 (internal, virtual):
省略
/dev/disk2 (external, physical):
省略
以下でパーティションを分割。最初にGPTでJHFS+（HFS+ジャーナリング）でrefiという名前で30MB、次に残り全部をubuntuという名前で切る。ubuntu側はインストール時に再度パーティションを切るのでここでは2つに分割だけできればよし。
% diskutil partitionDisk /dev/disk2 GPT JHFS+ refi 0.03g JHFS+ ubuntu 0b

```

3. rEFInd用のパーティションをマウントしてrEFIndをインストール（ここまでMac側で作業）
[rEFIndのサイト](http://www.rodsbooks.com/refind/installing.html)からrEFIndをダウンロード（自分の時はversion0.10.3）し解凍。
2.で作成したrefiパーティションをFinderで開き、efiという名前のフォルダを作成。  
次に回答したrEFIndフォルダのルートにあるrefindというフォルダをフォルダごと↑で作ったefiフォルダにコピー（/efi/refind/にする）

解凍後のrefindフォルダには32bitやARM向けのファイルも入ってるんですが、今回は不要なのでx64のみを残して削除します。  
左：削除前、右：削除後

コピーが終わったら、blessというコマンドを使ってブートエントリに加えて貰う必要があるようです。以下はrEFItに付属しているenable.shというものをベースにrEFInd用にUpdateしたものですが、これを/efi/refind/フォルダにコピーし、以下の要領で実行します。

```#shell
#!/bin/bash

LOADERNAME="refind_x64.efi"

expand_dir () {
  pushd "$1" >/dev/null
  DIR="`pwd`"
  popd >/dev/null
}

expand_dir .
if [ ! -f "$DIR/$LOADERNAME" ] ; then
  expand_dir "`dirname "$0"`"
  if [ ! -f "$DIR/$LOADERNAME" ] ; then
    echo "You must run enable.sh from the directory where you put $LOADERNAME"
    echo "or put enable.sh where $LOADERNAME is!"
    exit 1
  fi
fi

if [ "$(uname -p)" != "i386" ]; then
  echo "You must run enable.sh on an Intel-based Macintosh!"
  exit 1
fi

set -x
sudo bless --folder "$DIR" --file "$DIR/$LOADERNAME" 
```

```#shell
%cd /Volume/refi/efi/refind/
%./enable.sh
sudoパスワードを入力

```

＊blessコマンドに--setBootオプションをつけるとNVRAMに保存してくれるようなのですが、YosemiteかEl Capitanあたりから入ったSIP(System Integrity Protection)により  
sudoでもNVRAMに書き込む処理はできなくなってるっぽい。Safe Modeで起動してSIPをdisableしてbless --setBootして再度enableとやればいいらしいが、--setBootなしでもそれっぽく動作はしてるので今回は無しで。

これでMac側で行う処理は終了。

4. LiveUSBで起動
起動してください。LiveUSBをさして再起動しOptionキーを押しっぱなしにすると起動時にMacかLiveUSBか選べる。
選択画面がでたら"Try Ubuntu without Install"みたいなやつを選ぶ。

5. インストール先USBメモリをマウント
指す。

6. Ubuntu用のパーティションを切る

今回は参考サイトにならってMacやWinからアクセスしてファイル共有できるFAT32パーティションを4Gくらい作った残りをUbuntuにします。
LiveUSBから起動したUbuntu上でGPartedを起動。Commandキー → 検索でGPartとか打つとでてくる

右上のリストメニューからインストール先のUSBのデバイスを選んで、新しいパーティションを作成（未割り当てのパーティションを選んで右クリックで「新規」）  
ファイルシステム FAT32を選び、サイズを指定して「追加」

さらに、Ubuntuを入れるパーティションを作成するために残りの未割り当てパーティションを選んで同様に右クリック＋新規  
ファイルシステム ext4、サイズはデフォルトで残り全部が入ってるのでそのまま、割り当てを"/" ルートに（このあたりは好きな様に）

結果、こんな感じにする。確認できたらツールバー上の✓みたいなボタンを押して実際に反映させる。

7. Install UbuntuからUbuntuをインストール

デスクトップ上にある”Install Ubuntu”というショートカットをダブルクリックしてインストール画面を出す。

注意点は以下の”インストールの種類”の画面で6.で作ったext4パーティションを選ぶ事と、ブートローダーをインストールするデバイスでインストール先のUSBデバイスを指定する事（↓画像はTOSHIBA USBでやった時のもの）

あとはひたすらインストールが終わるのを待つだけ！

USBを挿してOptionを押しながら起動するとmacOSを起動するかEFI bootか選択画面がでるのでEFI boot側を選択。  
rEFIndが起動して何を起動するか選択画面へ進むのでUbuntuを選択すると無事Ubuntuが起動します。  
SDXZ80 USBメモリを使うと体感で数秒〜十数秒程度でログイン画面が表示されます。

## 以下、設定などメモリ書き

### Fnキー

デフォルトではFnキーを押さないと、ファンクションキーがF1、F2等々として働かずディスプレイ照度の上げ下げになってました。  
デフォルトでは通常のF1として使いたいので以下をセット

```#shell
sudo bash -c "echo 2 > /sys/module/hid_apple/parameters/fnmode"
```

### TouchPadのnatural scroll

デフォルトではTouchPadの2本指スクロールはPCと同じなんですが、同じMac上でMacでは逆だとややこしいので  
Mac側の仕様に統一。

エディタで```~/.Xmodmap```ファイルを開く（なければ作成）。以下を記述。

```
pointer = 1 2 3 5 4 6 7 8 9 10 11 12
```

一回ログアウトして再度ログインすると反映される。

### ディスプレイの輝度設定が保存されない

そのままだとディスプレイの輝度設定を下げても再起動すると最大に戻ってしまう。GPUに何が使われているモデルかで違うかもしれないが、
自分のMBA（'12/Mid）だと以下をする事で保存されるようになった。

エディタで```/etc/default/grub```を開く。要sudo

以下を修正

```
修正前
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"

修正後
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash acpi_backlight=vendor acpi_osi=Linux"

```

修正後以下で設定を反映

```#shell
$sudo update-grub
```

再起動するとディスプレイ輝度が保存されるようになった。

### Mac Ubuntu Community

後から気がついたがMacでUbuntuを動かす時のドライバ情報（何が動いて何が動かないとか）などの詳細な情報ページあった・・。

https://wiki.ubuntu.com/MactelSupportTeam/CommunityHelpPages#Mactel_Community_Documentation

2016/02/18

自分用git コマンドメモ

## ファイル部分的にstaging
```shell
$ git add -p <file>
hunk毎にどうするか聞いてくれる
```

## diff
```shell
# diff staged vs working copy
$ git diff

# diff staged vs head
$ git diff --cached
```

## branch削除

### local branch
```shell
$ git branch -d <local_branch>
```

### remote branch
remote branchはダイレクトに消すコマンドでなくて。local branchに空を指定して、それをPushする

```shell
$ git push origin :<remote_branch>
```

## git diff
difftoolを使うとmeldなどGUIツールが起動できる。
```shell
$ git difftool hoge.cpp
```

-dを付けるとディレクトリ比較になる（らしい）
```shell
$ git difftool -d .
```

## リモートのタグ表示

```shell
$ git ls-remote --tags
```

## リモートブランチも含めたブランチ一覧を表示する。

```shell
$ git branch -a
```

## リモートブランチへCheckOut

```shell
$ git checkout -b local_branch_name origin/remote_branch_name
```

## 個人的によくあやふやになるgit pushの構文メモ

```
$ git push origin <local_branch>:<remote_branch>
```

## branchを切って作業すべき所をうっかりmaster（もしくは別のbranch）にコミットしてしまった時の対処

他の人がpullしてcheckoutしてると混乱の元なので非常手段

まず、本来branchを切るべきだったコミットのhashを確認

```shell
$ git log --oneline --decorate --graph 
* zzz (HEAD -> master)
* yyy
* xxx
* www
```

例えばhash www(本来branchを切るべきだったコミット)で, xxx,yyy,zzzの３つが本来branch上でコミットすべきものだったとする

本来branchを切るべきだったbranchを切ってcherry-pickする

```shell
$ git branch mybranch www     # mybranchを本来切るべきだった箇所から切る
$ git checkout mybranch       # mybranchへ移動
$ git cherry-pick www...zzz   # mybranch上でxxx,zzz,zzzをpick。hashは新しくなる。注意点は...の左側はxxxじゃなくてwww(ひとつ前)にすること
```

mybranchとmasterにそれぞれ同じコミットが別hashで追加されてるのでmasterを戻す

```shell
$ git checkout mater
$ git reset --hard www      # masterを戻す。HEAD-2とかHEADから2つ戻すような記述も可
```

pushする（他のユーザ注意喚起が必要）

```shell
$ git checkout mybranch
$ git push origin mybranch        # mybranchをpush
$ git checkout master
$ git push --force origin master  # masterを強引にpush
```

2016/01/28

import matplotlibでハング

2016/01/19

PyQtでvtkをWidget表示

PyQtでvtkの3次元表示ViewをWidgetとしてEmbbedしたい場合の自分メモ

普通はQVTKWidgetPlugin.dll/.soなりをQt Designerのpluginsフォルダに入れる事によって、
Qt DesignerのサイドバーにQVTKWidgetが表示され、それをDrag&DropするだけでLayoutされる！というスマートなやり方が正しいはずなんだが。

ことpython + QVTKWidgetに限ってはなんか以下の理由でできない（なんで？と思うが）
（Windows + Anaconda環境と、MacOS + homebrew環境で確認）

* そもそもQVTKWidgetというモジュールがvtkをpython + qtで使う環境に存在しない。

↓のサイトによるとfrom QVTKWidget import QVTKWidgetに存在しない。from vtk import QVTKWidgetなら存在するとかあるが、これも存在しないと起こられる。

* <a href="http://paulklemm.com/zenf/blog/2012/08/20/install-python-together-with-vtk-using-homebrew-for-mountain-lion/">http://paulklemm.com/zenf/blog/2012/08/20/install-python-together-with-vtk-using-homebrew-for-mountain-lion/</a>

で、色々探してみるとfrom vtk.qt4.QVTKRenderWindowInteractor import QVTKRenderWindowInteractor を使えというサイトを見つけた。

* <a href="http://www.vtk.org/Wiki/VTK/Examples/Python/Widgets/EmbedPyQt">http://www.vtk.org/Wiki/VTK/Examples/Python/Widgets/EmbedPyQt</a>

ためしにこれで試すとうまくいくが、もしQt DesignerでQVTKWidgetPlugin.dll/soを使ってDrag&DropでLayoutをすると強制的にQVTKWidgetをloadされちゃうので
できない。

なのでQt Desingerのpromote toを使って、

1. まずWidgetをvtkを配置したい箇所に配置
2. promote toでpromotionの設定を開く
3. headerにvtk.qt4.QVTKRenderWindowInteractor.hをpromotion classにQVTKRenderWindowInteractorを書いて追加
4. 1.で追加したWidgetを右クリックしてpromote to -> QVTKRenderWindowInteractorを選択してpromoteさせる

3. のQVTKRenderWindowInteractorクラスをPromotion用に追加した所↓

4.の後↓のようになる

という手順を踏むとQt Designderでの変更に対して何もしなくても以下のpythonコードで呼べる。
（C++と.uiファイルが共通化できなかったりというデメリットもあるが、現状これしかない気もする。）

```python

import sys
import vtk

from PyQt4 import QtCore, QtGui, uic

#from ui_mainwindow import Ui_MainWindow

class testPyQt(QtGui.QMainWindow):
    def __init__(self):
        QtGui.QMainWindow.__init__(self)
        Ui_MainWindow = uic.loadUiType("ui_mainwindow.ui", self)[0]

self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

# setup connection
        self.ui.pushButton.clicked.connect(self.onClickButton)

### !!! Added from here !!! ###
        self.renderer = vtk.vtkRenderer()
        self.ui.qvtkWidget.GetRenderWindow().AddRenderer(self.renderer)
        self.ui.qvtkWidget.SetInteractorStyle(vtk.vtkInteractorStyleTrackballCamera())

# Add initial actores
        self.axes = vtk.vtkAxesActor()
        transform = vtk.vtkTransform()
        transform.Translate(0.0, 0.0, 0.0)
        self.axes.SetUserTransform(transform)
        self.axes.GetXAxisCaptionActor2D().GetTextActor().SetTextScaleModeToNone()
        self.axes.GetYAxisCaptionActor2D().GetTextActor().SetTextScaleModeToNone()
        self.axes.GetZAxisCaptionActor2D().GetTextActor().SetTextScaleModeToNone()
        self.axes.SetTotalLength(1, 1, 1)
        self.renderer.AddActor(self.axes)

self.renderer.ResetCamera()
        ### !!! Added until here !!! ###

# Added to draw call should be called after open window
    def show(self):
        QtGui.QMainWindow.show(self)
        self.ui.qvtkWidget.Initialize()

@QtCore.pyqtSlot()
    def onClickButton(self):
        self.ui.label.setText("Pushed!!")

def main():
    app = QtGui.QApplication(sys.argv)
    window = testPyQt()
    window.show()
    sys.exit(app.exec_())

if __name__ == "__main__":
    main()

```

show()関数をoverrideしているのは、RenderingがWindowが開かないうちに実行されるのを避ける為。例えば、Mac環境で__init__内でself.qvtkWidget.Initialize()をやってしまうと以下の様なエラーが大量に出る

```bash
ERROR: In /tmp/vtk20151007-9396-c4u0qe/VTK-6.2.0/Rendering/OpenGL/vtkOpenGLPolyDataMapper2D.cxx, line 442
vtkOpenGLPolyDataMapper2D (0x7f9d3c171460): failed after RenderOverlay 1 OpenGL errors detected
  0 : (1286) Invalid framebuffer operation

```

以下のForumで議論されている内容で、Forumでもshowを明示的に呼んでからRenderしろのような事が書かれている（と思う）。
http://paulklemm.com/zenf/blog/2012/08/20/install-python-together-with-vtk-using-homebrew-for-mountain-lion/
なのでmain()内で呼ばれるshow()の後にInteractorのInitialize()が呼ばれる様にするためにこの構成。

PyQtでGUI：.uiファイルのload

PyQt（PyQt4）でGUIプログラムする自分用メモ

.uiファイル＋Qt Designerが使いやすいのもQtのメリットだと思ってるのでpythonからもUIのレイアウトはこれでやりたい。

.uiでレイアウトしてpythonで読み込むには２つ方法があるらしい。

1. pyuic4を使って.ui -> .pyに変換しimport
2. uicを使って直接import

1.は.pyに統一できていいが、開発中は毎UI変更の度に変換が必要でめんどい。
2.は変換は不要だが.uiファイルをPackageに含まないといけない（それでもいい場合もある？）。
↓によると開発中は2.でお手軽に、配布時に1.で変換するみたいのが良いってことかな？  
[https://riverbankcomputing.com/pipermail/pyqt/2010-September/027970.html](https://riverbankcomputing.com/pipermail/pyqt/2010-September/027970.html)

というわけでサンプル作ってみた。

まずQt Designerで簡単なUI（PushButtonを押すと、Labelの文字が変わるというだけ）を作成

.uiファイルをloadして表示するコードが以下。

```python

import sys

from PyQt4 import QtCore, QtGui, uic

# form classを直接importする場合は必要
#from ui_mainwindow import Ui_MainWindow

class testPyQt(QtGui.QMainWindow):
    def __init__(self):
        QtGui.QMainWindow.__init__(self)
        # form classを直接importする場合は↓の行が不要になる
        Ui_MainWindow = uic.loadUiType("ui_mainwindow.ui", self)[0]

self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

# setup connection
        self.ui.pushButton.clicked.connect(self.onClickButton)

@QtCore.pyqtSlot()
    def onClickButton(self):
        self.ui.label.setText("Pushed!!")

def main():
    app = QtGui.QApplication(sys.argv)
    window = testPyQt()
    window.show()
    sys.exit(app.exec_())

if __name__ == "__main__":
    main()

```

testPyQtクラスのself.uiにform class(C++ではUi::MainWindowClassとかでmoc_*.cppファイルに生成されてたやつだと思う)をnewする。

検索するとtestPyQtクラス自体をform classから継承する例や、self.uiにuic.loadUi()で生成されたQMainWindow（or QWidget)を直接showするコード（下記）もあったというか結構多い。

前者はUIと制御コードが一緒のclassになっちゃうので避けたい実装、後者はtestPyQtでQMainWindowを継承している意味がわかんなくなるので、その辺のやり方を避けると上のやり方に落ち着きそう。

```python 
class testPyQt(QtGui.QMainWindow):
    def __init__(self):
    # uic.loadUi returns QMainWindow
    self.ui = uic.loadUi("ui_mainwindow.ui")
    self.ui.show()

def main():
    app = QtGui.QApplication(sys.argv)
    window = testPyQt()
    # window.show() # ここでshowしない
    sys.exit(app.exec_())
```

結果、こんな感じにできる。

2015/11/03

Xcode自分用メモ

Xcodeを使ってBuildする際用の自分メモ

# 追加のライブラリを設定

Xcodeの左上のアイコン中の一番左（ファイル・ライブラリツリーが表示される）を選択↓

中央領域左の"TARGETS"を選択して、
その右に表示された”Build Phase”を選んだ後に”Link Binary With Library(? items)”を開く↓

＋ボタンで新しくライブラリを追加できる。↓Apple純正Frameworkやライブラリの場合は↓のダイアログのSearchで検索して指定するだけで追加できる。
サードパーティ製ライブラリを追加する場合は、ダイアログ左下の”Add Other...”からファイル指定する。

この時に、/usr/local/とかはFinderでは標準では表示されない。こういう時はファイル選択ダイアログで**Command + Shift + g**を押すと、
フォルダPathを直接指定できる↓

2015/06/12

homebrewでpython開発環境(numpy, scipy, matplotlib, ipython & vtk)を整える

Homebrewのインストールはすでにされているとする。別HP参照のこと

間違いやすいのが、Macに既存で入っているpython(/usr/bin/python)とpip(/usr/bin/pip)を実は叩いているという可能性。
brewでpythonを入れる（/usr/local/bin/python）ことで一貫してsudoで実行せずにインストールできる（はず）。

# python、pipのインストール

```bash
$ brew install python

Warning: The post-install step did not complete successfully
You can try again using `brew postinstall python`

$ brew postinstall python
```

brew postinstall python時にPermission Denied ~/Library/Log/Homebrew/python/*が出ることがある。
その時は $ sudo chown -R <username> ~/Library/Log/Homebrew/python/でオーナーを変えてあげる

pipはpythonと一緒に入る。

postinstallせずにpipをすると、元からあるpython(/usr/bin/python)で
実行されて/System/Library/Frameworks/Python.framework/Versions/2.7/等に書き込みに行ってエラーになる。

postinstall pythonするとこれをbrewでインストールされた/usr/local/lib/python2.7/*とかに変えてくれる。
（/usr/local/lib/python2.7/site-package/以下にpipでインストールされたパッケージが管理されてる。）

以下でインストールされたpython/pipがともにbrewのものか確認
```bash
$ which python
/usr/local/bin/python
$ which pip
/usr/local/bin/pip

```

この後のpip実行で以前にsudo pip xxxxをしているとadmin,wheel所有でファイルができている事があえうようでPermission Deniedになる（なった）。
その場合は、対象ファイルを消してpip reinstallとかして通常ユーザ権限でインストールしてやる。

pipのupdateもしておく。

```bash
$ pip install --upgrade pip
```

# numpy, scipy, matplotlib, ipythonのインストール

後はpackegeをインストールする。

ちゃんとやるならvirtualenvをインストールしてpython project毎にパッケージを  
管理するのがほんちゃんらしい（rubyのbundlerみたいな感じだと思う）。

が、サーバにデプロイするわけでもないし、バージョンを気にするほど使い込めてないのでそのままインストールする。

```bash
$ pip install numpy
$ pip install scipy
$ pip install matplotlib
$ pip install ipython
```

エラー（大抵 Permission Denied）が出る場合は（前述しているが、）以前にsudoでpipしてたりしてるとかで書き込み権限がadmin, wheelしかないやつ。
その時はめんどくさいが一応そのファイルを消してpip reinstall <package>してやる。

# vtkのインストール

最後にvtkをbrewからインストールする

```bash
$ brew install --python --qt vtk
```

makeするので結構時間かかりますが・・。

これで完了！！

確認

```bash
$ ipython

In [i]: import numpy

In [2]: import scipy

In [3]: import matplotlib

In [4]: import vtk

```
で、エラーがでなければおｋ

2014/08/28

C++ std::list, std::vector, std::dequeをまとめておく

自分用Sublime Text Plugin/設定メモ

# Emacsライクな使い方にする為にST3のほうがおすすめな印象

* SublemacsPro
  * 基本的なキーバインドはこれで

* IMESupport（Win）
  * Windowsの場合は日本語入力をインライン化する為に必要

* Alignment

* Brackethighlighter

* AutoFileName

* OrigamiEmacs (ST2の場合のみ、ST3には同様の機能が入ってる)
  * ペインの分割とそのショートカット
参考サイト：http://xoyip.hatenablog.com/entry/2014/03/27/211804

* Markdown用
  * OmniMarkupPreviewer
Ctrl+Alt+Oでデフォルトブラウザでプレビューしてくれるらしいが、
Ubuntu？SublemacsPro？だからか効かななった。でも右クリックからプレビュー表示が可能なので問題なし

* Trailing Spaces
改行になるスペースx２をハイライトしてくれてグー

* monokai extended

* Markdown Extended

* KeyBinding ST3の時（Macでは不要だった）

* ctrl+hのキーをleft_deleteに切り替える
```
 { "keys": ["ctrl+h"], "command": "left_delete" },
 // for markdown
 { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}},
```

* Preference追加した項目を晒す

```
    "theme": "Flatland Dark.sublime-theme",
    "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
    "flatland_square_tabs": false,

"translate_tabs_to_spaces": true,
    "highlight_line": true,
    "draw_white_space": "all",

```

2014/03/08

QCustomPlotで表示したグラフをマウスホイールズームやDragシフトする際の範囲を制限する

[QCustomPlotでマウスホイールズーム＆Dragでシフト](http://kohshi.blogspot.jp/2014/03/qcustomplotdrag.html)で紹介したようにほんの数行加えるだけで、
表示領域を操作できるのだが、0原点だけはズームやシフトしたい場合にも固定したい場合は結構多い。

そういう時はどういう風にするかを紹介する。

[ここ](http://www.qcustomplot.com/index.php/support/forum/289)で書かれている内容だが、  
まず、制限したいQCPAxisのrangeChangedシグナルにslotを接続する↓。

```cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

mpHistogramBars = new QCPBars(ui.histogram->xAxis, ui.histogram->yAxis);
    mpHistogramBars->setPen(QPen(Qt::gray));// 色指定
    mpHistogramBars->setBrush(QBrush(Qt::gray));// 色指定
    ui.histogram->addPlottable(mpHistogramBars);// 追加
    ui.histogram->setInteraction(QCP::iRangeDrag, true);
    ui.histogram->setInteraction(QCP::iRangeZoom, true);
    ui.histogram->axisRect()->setRangeDrag(Qt::Vertical);
    ui.histogram->axisRect()->setRangeZoom(Qt::Vertical);

// yAxisRangeChanged()はslot
    connect(ui.histogram->yAxis, SIGNAL(rangeChanged(const QCPRange &)), this, SLOT(yAxisRangeChanged(const QCPRange &)));
}

```

のようにしておいてRangeが変わったら、すなわちズームやシフトが発生したらyAxisRangeChangedが呼ばれるようにしておき、  
yAxisRangeChangedの中で以下のようにRangeを再セットしてやる。  
  
  
```cpp

void MainWindow::yAxisRangeChanged(const QCPRange &newRange)
{
    ui.histogram->yAxis->setRange(0, ui.histogram->yAxis->range().upper);// y軸の下限を0に固定
}

```
  
当然、マイナスの値にはしたくないという制限の場合には以下のようになる。
  
  
```cpp

void MainWindow::yAxisRangeChanged(const QCPRange &newRange)
{
    if(newRange.lower < 0){
        ui.histogram->yAxis->setRange(0, ui.histogram->yAxis->range().upper);
    }
}

```
  
常に下限を0にした場合こんな感じになる  
  
  
<iframe allowfullscreen="" frameborder="0" height="270" src="//www.youtube.com/embed/OrGXOhI5diE" width="480"></iframe>

2014/03/07

QCustomPlotでマウスホイールズーム＆Dragでシフト

2014/02/17

popplerを使ってpdfファイルをQImageに読み込む（おまけにQimageをpdfファイルとして書き出す）


[前回](http://kohshi.blogspot.jp/2014/02/popplerhomebrew.html)でインストールしたpopplerを使ってQtアプリでpdfファイルを読み込む。
今回はpdfといってもページ＝画像ファイルなのでわりと簡単。  
  
  
  
```cpp

#include <poppler/qt4/poppler-qt4.h>


openPdfFile(QString fileName){
  Poppler::Document *doc = Poppler::Document::load(fileName);
  if(doc == 0) return;

  for(int pageNum = 0; pageNum < doc->numPages(); pageNum++){
    Poppler::Page *pdfPage = doc->page(pageNum);
    
    QImage image = pdfPage->renderToImage();
    // このimageを使って描画処理等を行う

    // pdfPageは使い終わったらdeleteが必要
    delete pdfPage;
  }
  // docは使い終わったらdeleteが必要
  delete doc;
}


```
  
  
  
一方でpdf出力に関しては、これもテキストを出力するのでなければQt自体がもっているpdf出力を使えるので  
以下のようにすればQImageをページいっぱいに描画したpdfが出力できる。  
  
  
  
  
```cpp

exportPagesAsPdf(QString fileName){

  // QtはQPrinterをつかってpdfファイル出力ができる
  QPrinter printer(QPrinter::HighResolution);
  printer.setOutputFormat(QPrinter::PdfFormat);
  printer.setPageMargins(0, 0, 0, 0, QPrinter::Point);// margin 0にして縁なしにする
  printer.setOutputFileName(fileName);
  const int dpi = 72;
  printer.setResolution(dpi);
  QPainter painter;

  for(int i = 0; i < mPages.size(); i++){
      QImage image = mPages[i].image();

      // 仮に毎ページサイズが変わってもOKにしてる
      printer.setPaperSize(image.size(), QPrinter::Point);
      if(i == 0){
          painter.begin(&printer);// 最初のページはnewPage()をいれてはいけないので特別処理
      }
      else{
          printer.newPage();// サイズを指定した後にnewPage()を呼ぶとそのサイズのPageが挿入される
      }
      painter.drawImage(0, 0, image);
  }
}


```
  
  
  
dpiをなぜ72にしたらいいのか実はちょっとわかってないんだが、[popplerのdocumentのPage::renderToImage()](http://people.freedesktop.org/~aacid/docs/qt4/classPoppler_1_1Page.html)のdpiのデフォルト引数が72.0だったので、一緒にしたらいいんじゃないかなぁと思ったらうまくいった。
  
  
QPrinterのAPIをみるとテキストをセットするようなものはないので、  
OCRしたテキストをpdfに埋め込みたい時には多分QPrinterでは無理なんじゃないかな？
  
きっと[Handling PDF](http://qt-project.org/wiki/Handling_PDF)にあるようにほかのthird partyライブラリを
使えばできるんだろうけど。今回はまぁこの辺で。

popplerをhomebrewを使ってインストール


最近、ドキュメントスキャナを購入してから細々と自炊して本・マンガ本の省スペース化を図っている。
  
Windowsは[eTritran](http://no722.cocolog-nifty.com/blog/etiltran/)という素晴らしいソフトがあるが、  
Macで同じような事（簡単なトーンカーブ補正、ページ回転等々）をやろうとした時に、  
ちょうどいいソフトが見つからなかったので、機能は制限されるがQtを使って自分で作ってたりする　→　こんな感じ[ePage](https://bitbucket.org/kohshi/epages/wiki/Home)

今の所zip(jpegのzip化)の解凍はquazipを使って読み込むことができるようになったんだが、    
段々欲が出てきてpdfも読み書きしたくなってきた。  
  
ということでQtにpdfを読み書きする方法があるのかと探すと・・どうもなさそう。  
詳細は[Handling_PDF](http://qt-project.org/wiki/Handling_PDF)に書かれているが、  
出力する事はQPrinterを使ってできるみたい。でも読む方はQtにはなくて3rd partyのライブラリを使わないといけないみたい。  
  
こんな感じで３つほど紹介されてる。

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhe54ytPVtwCEcy1aBYkOlJXniLlbrJCMkE5WjrrxaerFgKueXs0OZXLyKIF2R1DvxV8yva59zU6zWNbQdVHGMWBP9RNWfJWDQ6jGuly-ZXqvYuBVZF8S3CSENL6RKuoEwcVu6mK2ZAATL/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2014-02-17+23.24.45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhe54ytPVtwCEcy1aBYkOlJXniLlbrJCMkE5WjrrxaerFgKueXs0OZXLyKIF2R1DvxV8yva59zU6zWNbQdVHGMWBP9RNWfJWDQ6jGuly-ZXqvYuBVZF8S3CSENL6RKuoEwcVu6mK2ZAATL/s640/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2014-02-17+23.24.45.png" /></a></div>
  
今回は自炊した漫画本をメインで考えてるので出力はQPrinterを使って、読み込む機能があるpopplerを使う事にする。
Qt wrapperがあってQtとの親和性も高そう。
  
で、popplerをソースからコンパイルしてもいいんだが、freetype2が必要だったりlibpngやlibopenjpegが必要だったり
結構依存ライブラリがおおい。なので、この際今まで使った事がなかったhomebrewを使って入れてみようかなと。
  
homebrewとそのインストールついては[パッケージ管理システム Homebrew](http://qiita.com/b4b4r07/items/6efebc2f3d1cbbd393fc)など、いい参考サイトがあるのでそちらをみてもらうとして。
  
コマンド一つでインストールできる所が美しい・・。
  
```

 $brew update
 $brew install poppler --with-qt4

```
  
とすると、デフォルトでは/usr/local/Cellar/以下にpopplerと依存ファイル（qt4も）インストールしてくれます。
楽だなー。
  
なので、.proファイルに以下を追加する事でプログラム中でpopplerを使えるようになります。
  
```

LIBS += -lpoppler-qt4

INCLUDEPATH += /usr/local/Cellar/poppler/0.24.5/include

DEPTHDPATH += /usr/local/Cellar/poppler/0.24.5/lib

```
  
具体的な使い方は次回で。

2014/01/07

QTableViewへ登録するQStandardItemにでユーザ定義型をくるませる

QTableView等のQ*View系のQt Model/View構造で管理されているビューを使用する場合、
もっとも簡単な使い方として、QStandardItemModelへQStandardItemをセットしていく事になる。

* QStandardItem = Table等に表示される1項目
* QStandardItemModel = Itemの集合（row/column/parent/childの概念）

この際に、Tableのセルに表示させる文字列（QString）以外にユーザ定義型をQStandardItem::setDataを使って格納することができる。

個人的にはクラスのポインタを各Itemに格納させておいて、TableView（or ListView）でDrag&Dropして順番を入れ替えた後、
入れ替えた順番でクラスのポインタを順にとってくるという事をしたかった。

[このサイト（QVariant の使い方）](http://qt-project.org/wiki/How_to_use_QVariant_Japanese)によるとポインタはもたせられなくてvoid*にしなさいとあるんだが、実際にはvoid*にしてもうまくいかなかったので追加調査

参考にしたのは以下の2つのサイト

* [Custom QVariant crash on drag in QTreeView](https://qt-project.org/forums/viewthread/22238)
* [QMetaType Class Reference](http://qt-project.org/doc/qt-4.8/qmetatype.html)

今回はポインタだったので不要だったかもしれないが、[こちらのサイト](http://milukiriu2010.blog71.fc2.com/blog-entry-145.html)によるとユーザ定義型の場合は追加で以下の3つが必要となるよう。

* QObjectの継承
* コピーコンストラクタの定義
* 代入演算子の定義

以下ではMyClassのconstポインタをQStandardItemに格納している。

まず、下準備として以下が必要。

```cpp

// const MyClass*をQMetaTypeとして使いますよという宣言
Q_DECLARE_METATYPE(const MyClass*);

// 以下のoperator定義はDrag&Dropをしたい場合に必要
// もしやらないと、"QVariant Invalid type to save" のようなエラーが大量にでる
// see. https://qt-project.org/forums/viewthread/22238
QDataStream& operator<<(QDataStream& out, const MyClass* const& rhs)
{
    out.writeRawData(reinterpret_cast<const char*>(&rhs), sizeof(rhs));
    return out;
}
QDataStream& operator >> (QDataStream& in, const MyClass*& rhs)
{
    in.readRawData(reinterpret_cast<char*>(&rhs), sizeof(rhs));
    return in;
}

// const MyClass*をQMetaTypeとして使う前（たとえばコンストラクタ）に以下を書く
MyApp::MyApp(){
    qRegisterMetaTypeStreamOperators<const MyClass*>("const MyClass*");
}

```

そして、実際に値をセットするときは

```cpp

void MyApp::setData(QList<MyClass*> myClasses){
    QStandardItemModel* model = qobject_cast<QStandardItemModel*>(myTableView->model());

foreach(const MyClass* class, myClasses) {
        QStandardItem* item = new QStandardItem(class->name());
        item->setData(QVariant::fromValue(class));
        model->appendRow(item);
    }
}

```

な感じでセット（myTableView => QTableView*ね）

逆に値を引っ張ってくる時は

```cpp

QList<MyClass*> MyApp::getData(){
    QStandardItemModel* model = qobject_cast<QStandardItemModel*>(myTableView->model());

QList<const MyClass*> myClasses;
    const int COLUMN_NO = 0;// setDataでMyClass*を格納したQStandardItemが入っているColumn番号 = 0
    for (int i = 0; i < model->rowCount(); i++) {
        myClasses.push_back(model->item(i, COLUMN_NO)->data().value<const MyClass*>());
    }
    return myClasses;
}

```

のような感じで取得できる。

2013/12/27

QTableViewでTable内のRowをDrag&DropでMoveだけさせる

年明けにやるんだけど忘れないようにメモ。

Qtで表とかSpreadsheetを追加したい場合はQTableViewというのを使うのが便利なんだけど、
Drag&DropでRowの位置を変更したいという場合結構ありそうな気がするんだけどもわりとやり方がめんどくさい。

以下のサイトでも質問されているけど自分がやりたい方法で実現してない

* [QTableView drag move rows](http://stackoverflow.com/questions/12168610/qtableview-drag-move-rows)
* [QTableView reorder rows in table](http://www.linkedin.com/groups/QTableView-reorder-rows-in-table-1531497.S.218641029)

２番めの投稿にもある通り、QTableView::verticalHeader()->setMovable(true)（setSelectionMovableは古い）すれば、
表のセルでなくてHeaderをDrag&DropすることでMoveできる。
これでもいいんだけど、やっぱりセル自体をDrag&Dropできたほうが直感的。という事で追加で調べてみた。

使うのはQTableViewとQStandardItemModelとQStandardItemというQTableViewを使う場合には
もっともポピュラーだと思われる方法。

QTableViewの配置はQt Designerで↓のように配置して

QTableViewの設定から以下の項目をセット
 
| key | value |
| ---- | ---- |
| QWidget::acceptDrops| true |
| QAbstractItemView::dragEnabled| true |
| QAbstractItemView::dragDropOverwriteMode| false |
| QAbstractItemView::dragDropMode| InternalMove |
| QAbstractItemView::defaultDropAction| MoveAction |
| QAbstractItemView::selectionBehavior| SelectRows |

一つ一つON/OFFしてないので不要なものも入ってるかも。

一見上記の設定だけでもMoveだけを許可してdragDropOverwriteModeをfalseにしてるのでうまくいきそうな感じがするんだが、
このままQStandardItemをセットするとDrag&Dropでセルとセルの間を選ぶとMoveされるんだけど、
セル自体を選ぶと上書きされてしまう。これを防ぐ方法がわからなくて困った。

ヒントになったのは以下

* [QAbstractItemView Class Reference dragDropOverwriteMode](http://qt-project.org/doc/qt-4.8/qabstractitemview.html#dragDropOverwriteMode-prop)

`Note: This is not intended to prevent overwriting of items. The model's implementation of flags() should do that by not returning Qt::ItemIsDropEnabled.`

”これ（＝dragDropOverwriteMode）はitemを上書きするのを防がない。flags()の実装でQt::ItemIsDropEnabledを返さない事で上書きを防げる。”

ということはQStandardItemModelを継承してflags()をreimplementしてQt::ItemIsDropEnabledのFlagを下ろせばいいのかとおもったんだが・・

以下のようにMyItemModelを作ってQStandardItemModelの代わりにnewしてQTableView::setModel()しても現象は変わらない・・。

```cpp

class MyItemModel : public QStandardItemModel
{
public:
  MyItemModel(QObject * parent = 0) : QStandardItemModel(parent){}
  MyItemModel(int rows, int columns, QObject * parent = 0) : QStandardItemModel(rows, columns, parent) {}
  
  virtual Qt::ItemFlags flags()const{
    return (QStandardItemModel::flags() & ~Qt::ItemIsDropEnabled);
  }
};

```

うーん。

じゃあModelをQStandardItemModelに戻して今度は以下のように各QStandardItem::setFlagでQt::ItemIsDropEnabledをOFFしてみたら
Item同士の上書きがなくなった！

```cpp

QStandardItem *item = new QStandardItem(QString("item00"));
item->setFlags(item->flags() & ~Qt::ItemIsDropEnabled);
mpModel->setItem(0, 0, item);

```

こんな感じ。

なんかMoveした瞬間に一瞬一列増えて消えてをしてるような気もするが・・。

2013/12/18

QCustomPlotで凡例をグラフの外に表示→ちょっとめんどい

凡例はデフォルトではグラフ領域の中に表示される＋設定で場所を指定できるみたいだが、
例えば入力を次々変えていってグラフを表示したい場合とか、グラフがどの領域にくるかわからない場合があるんだが。

そんな場合凡例はグラフ内でなくてグラフ外に表示しておいてほしいのでそのやり方を書いてみる。
結果、今の所設定一発っていうわけではなくて以下のページにもあるみたいにLayoutを調整して対応しないと
いけないので、たかが凡例をグラフ外にもっていく割にはめんどい印象・・。

* [Position of legend outside graph](http://www.qcustomplot.com/index.php/support/forum/63)

以下のQCPLegendのページにも以下のように書いてある。

* [QCPLegend Class Reference](http://www.qcustomplot.com/documentation/classQCPLegend.html)

> To move the legend to another position inside the axis rect, use the methods of the QCPLayoutInset. 
> To move the legend outside of the axis rect, place it anywhere else with the QCPLayout/QCPLayoutElement interface.

凡例を軸の内側に動かすためにはQCPLayoutInsetのmehodを使え。外に動かしたい場合はQCPLayout/QCPLayoutElementを使って外に配置しろ。
みたいなことをいってるので多分合ってると思うんだけど。

つまり例えば↓のようにQCPLayoutを使って自分で凡例を配置せよということらしい。

<img src="https://docs.google.com/drawings/d/1rmDaYE2xMOz1pQ5rY9yrx7My3kuHtIX0hPKa4lj30aw/pub?w=480&h=360">
  
↑を実現するには、

1. もともと用意されているグラフを描画するLayoutにColumnを追加してQCPLayoutGridを配置し
2. そこに3つのRowを追加して上下にPadding用のQCPLayoutElementを配置し
3. 中央にQCPLegendを配置

という感じ。例によってHistogramを例にしてコードにすると
  
```cpp: MainWindow.cpp
  // When initialize QCustomPlot

// Moved legend to outside of axis rect
  QCPLayoutGrid *subLayout = new QCPLayoutGrid;  // グラフの右に挿入されるQCPLayoutGrid(subLayout)
  ui.histogram->plotLayout()->addElement(0, 1, subLayout); // (Row, Column) = (0,1)にsubLayoutを追加
  subLayout->addElement(0, 0, new QCPLayoutElement); // subLayoutの(Row, Column) = (0,0)にPadding用QCPLayoutElementを
  subLayout->addElement(1, 0, ui.histogram->legend); // (Row, Column) = (1,0)に凡例（Legend）を追加
  subLayout->addElement(2, 0, new QCPLayoutElement); // 同Paddingを追加
  subLayout->setColumnStretchFactor(0, 0.01);        // subLayoutの横幅はなるべく小さくする
  subLayout->setRowStretchFactor(1, 0.01);           // subLayoutの凡例がはいるRow=1はなるべく小さくする
  ui.histogram->plotLayout()->setColumnStretchFactor(1, 0.01); // subLayoutが入るColumn=1の横幅はなるべく小さくする

```
  
  
もし、上記の設定なしだと以下の様に表示されるが、

上記のようにLayout設定すると以下のようになる。

なんとかグラフ領域の外にもっていけたけど、凡例の右側が切れてたりしてちょっとしっくりこないきもするなぁ。

2013/12/17

Bloggerでの投稿をmarkdownで書く

Bloggerのエディタが使いにくくて投稿しにくいのでなんとかmarkdownでできないかなと思い、
色々調べたら、いくつか参考にさせてもらったけどここ↓を主に参考にさせてもらってmarkdown対応してみました。

* [Ys' Library | JS/HTMLのtipsやガジェットについて書くブログ](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)

基本は、

* htmlを直接記入するエディタモードを使う。
* markdown全体をtextareaで囲み、class="markdown"に割り当てる
* Javascriptでtext文を取得してshowdown.js等のmarkdown -> HTML変換をして置き換える

という方針みたいです。

詳細はリンク先をみてもらうとして、
自分の環境では以下の変更を加えました。

**トップページで複数の投稿が並んでいる際に、1番目の投稿以外はtextareaがそのまま表示されてしまう**

リンク先のサイトだと問題無く表示されていたのですが、自分の環境ではなぜか
一番先頭（最新）の投稿は正しく表示されるが2番目以降の投稿はtextareaにmarkdownでかかれた内容が、こんな感じ↓でそのまま表示されている状態になってしまいました。

リンク先には↓の“HTMLの編集“から</body>の前に以下のjavascriptを挿入するとなってました。

```javascript:
<script src="/path/to/showdown.js"></script>
<script>
var sd = new Showdown.converter(),
      mdEl = document.querySelector('.markdown'),
      converted = document.createElement('div');

converted.className = 'showdown';
converted.innerHTML = sd.makeHtml(mdEl.value);
mdEl.parentNode.replaceChild(converted, mdEl);
</script>
```

でも、自分環境だとどうもダメ（テンプレートのせい？）で、いろいろと試行錯誤した結果以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter();
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

違いを要約すると、querySelector()の代わりにquerySelectorAll()を使って
textareaをNodeListで取得して全てのNodeに対してshowdownのmakeHtml()をかけて置き換えてるだけです。

最終的にはshowdown.jsのextensionのtable.jsを使って（showdownはデフォルトではtableの記述に未対応）以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script src='/PATH TO/extensions/table.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter({extensions: ['table']});
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

注意点としてはextensionのtable.jsは先頭に|がないと表にならない事。

ダメ

> First Header | Second Header | Third Header<br/>
> ------------ | ------------- | ------------<br/>
> Content Cell | Content Cell  | Content Cell<br/>

イケる

> | First Header | Second Header | Third Header |<br/>
> | ------------ | ------------- | ------------ |<br/>
> | Content Cell | Content Cell  | Content Cell |<br/>

これ以外はprettify.jsでのコードハイライトなども以下を参考にさせてもらいました。
どうもありがとうございます(^^)

* [Markdownで投稿した記事のソースコードの見た目をいい感じにする](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)

最後に一点だけ注意点ですが、以下の歯車アイコンでモバイル向けの設定をカスタムにしないと、スマホで見た時にやっぱりtextareaがそのまま表示されちゃうので注意。

以下をカスタムにする。

結構たいへんだったけどやっぱしmarkdownでかけるとすいすい思いのままに書けてとってもグー！

登録: 投稿 (Atom)