鉄馬の工具箱 http://te2uma.com/blog/ te2uma(てつうま)のブログです。調べ物のメモなどを共有します。 en-us Tue, 12 Nov 2013 00:00:00 +0900 http://te2uma.com/blog/2013/11/12/how_to_zip_up_well_a_bag_of_glico_s_maxload.html http://te2uma.com/blog/2013/11/12/how_to_zip_up_well_a_bag_of_glico_s_maxload.html <![CDATA[グリコのプロテイン「マックスロード」のチャックを楽に閉じるテクニック]]>

グリコのプロテイン「マックスロード」のチャックを楽に閉じるテクニック

大容量でコスパがよいグリコのホエイプロテイン「 MAXLOAD(マックスロード) 」。チョコレート風味の方を飲んでいますが、ちょっと甘めなもののココアみたいで飲みやすく、お気に入りです。

ただ一点だけ難点があって、袋のサイズに対してチャックの作りが小さいせいか、端から丁寧に閉じないと微妙に開いたままになっていることが多々ありました。

3kg入りで飲み切るまでに時間がかかるため、しけってしまわないか心配ですよね。かといって、毎回念入りに閉じて確認するのもめんどくさい。

そこで試しに、以前100円ショップで買って放置していた「レトルトパック絞り」(レトルトパックに入っているカレーなどをうまく絞り出すための道具、下図参照)を使ってみたところ、すばやく簡単にチャックを閉じることができました。

../../../_images/pouch_squeezer.jpg

100円ショップで買った「レトルトパック絞り」( 同じやつが楽天市場でも売っているみたい

ちょっとした投資でストレスから解放されるので、同じようにお悩みの方は、ぜひお試しください!

../../../_images/zip_up_maxload.jpg

こんな感じで、さっと袋を閉じられる

(最終更新日:2013/11/12)

]]>
Tue, 12 Nov 2013 00:00:00 +0900
http://te2uma.com/blog/2013/09/12/inexpensive_notes_with_dot_grid.html http://te2uma.com/blog/2013/09/12/inexpensive_notes_with_dot_grid.html <![CDATA[安価で気軽に使えるドット方眼紙のノート]]>

安価で気軽に使えるドット方眼紙のノート

一般的なグリッドタイプのセクションペーパーよりドット方眼の方が好きなんですが、市販されているノートの種類自体が少なく、あったとしてもロディアや伊東屋で売っている少しお高めの商品しかなくて不便でした。

長らく、もっと安くて気軽に使えるドット方眼のノートを探していたところ、先月偶然100円ショップの「ダイソー」で発見しました。これです。

../../../_images/inexpensive_notes_with_dot_grid01.jpg ../../../_images/inexpensive_notes_with_dot_grid02.jpg

なんと100円なのに80枚綴じでかなりお得(一枚あたり1円ちょい)。残念ながら薄くて裏移りしてしまうので、実質片面しか使えないのですが、それでも十分なボリュームです。リングタイプなので、ビリっと破いて使うこともできます。

ダイソー以外で見かけたことがなかったので、つい6冊もまとめ買いしてしまいました。新宿の小さめな店舗で購入できたので、ダイソーならどこでも売っているのかも。

強いていえば、少々ノートに厚みがあるのと、100円ショップの商品なので、いつ廃番になってしまうかが不安なところですが、コスパは現状最強クラスでしょう。

(最終更新日:2013/09/12)

]]>
Thu, 12 Sep 2013 00:00:00 +0900
http://te2uma.com/blog/2013/09/09/how_to_adjust_the_width_of_tinkerer_s_images_for_mobile.html http://te2uma.com/blog/2013/09/09/how_to_adjust_the_width_of_tinkerer_s_images_for_mobile.html <![CDATA[Tinkererで作成したブログ上の画像をスマホ対応させる]]>

Tinkererで作成したブログ上の画像をスマホ対応させる

Tinkererで作成したブログは、レスポンシブWebデザインに対応しているので、特別な設定を行うことなくスマホに適した形式で閲覧できますが、横幅の長い画像が記事に埋め込まれている場合に、画像が横にはみ出してレイアウトが崩れてしまう場合があります。

CSS3のメディアクエリを使って次のように指定すると、この問題を回避できます。

@media screen and (max-width: 480px){
    .section img {
        height: auto !important;
        width: 100% !important;
    }
}

ここではiPhoneを想定して、「画面解像度の横幅が480px以下の場合に、記事内の画像の横幅と高さが親要素の横幅に対して100%になる」ように指定しています。

なお、原稿中で(reStructuredTextで)指定した画像サイズは、インラインCSSとしてアウトプットされる(設定が最優先される)ため、その設定を上書きするために「!important」宣言を付け加えています。

(最終更新日:2013/09/09)

]]>
Mon, 09 Sep 2013 00:00:00 +0900
http://te2uma.com/blog/2013/09/08/how_to_use_lcj_rxc.html http://te2uma.com/blog/2013/09/08/how_to_use_lcj_rxc.html <![CDATA[RX100Ⅱのジャケットケース「LCJ-RXC」のストラップの付け方]]>

RX100Ⅱのジャケットケース「LCJ-RXC」のストラップの付け方

ソニーのデジカメRX100Ⅱ(DSC-RX100M2)に対応したジャケットケース「LCJ-RXC」ですが、 最近の製品は付属マニュアルが簡略化されていることもあり、 ストラップの付け方が初めよく分かりませんでした

一般的な仕組みなので分かってしまうとどうってことはないのですが、 似たような方もいるかと思い、メモしておきます。

私がはまったポイントは、下図の Bパーツ です。購入時点で肩当ての根元付近にあったために気づかず、Aパーツだけでなんかやけに緩いな、と考えていました。

../../../_images/how_to_use_lcj_rxc.png

それさえ分かれば、後は上の①~⑦の手順どおりに紐を通し、長さを調整すれば終了です。

Bパーツは表と裏があるので注意してください。構造上、中央の柱部分がへこんでいるほうが表側にあたるはずです。

なお、チュートリアルの動画を ソニーの製品ページ の動画カタログで参照することもできます。

(最終更新日:2013/09/07)

]]>
Sun, 08 Sep 2013 00:00:00 +0900
http://te2uma.com/blog/2013/08/11/tracking_outbound_links_with_google_analytics.html http://te2uma.com/blog/2013/08/11/tracking_outbound_links_with_google_analytics.html <![CDATA[Googleアナリティクスで外部リンクのクリック数をうまいこと計測する]]>

Googleアナリティクスで外部リンクのクリック数をうまいこと計測する

Googleアナリティクスで外部サイトへのリンクを計測するには、計測対象のリンクに手動でタグを設定する必要があります(参考: Googleアナリティクスのヘルプ)。しかし、CMSなどの場合に、ユーザー自身にその設定を手打ちさせるのは現実的ではないですし、サーバーサイドの処理をかませるのも煩雑になり面倒です。

そこで、JavaScriptでDOM操作を行い、クライアントサイドで処理させてしまうと、管理が楽になり便利。ここでは、次の前提でその手順を解説します。

  • 外部サイトへのリンクは target="_blank" が指定されており、別ウインドウで開く
  • Googleアナリティクスの解析タグは、次のように<head>部分で外部ファイルとして読み込んでいる(/PATH/TO/の部分は適宜読み替えのこと)
<script type="text/javascript" src="/PATH/TO/google_analytics.js"></script>

外部リンクをクライアントサイドで動的に計測用に置き換えるコード

Googleアナリティクスの設定ファイル(ここではgoogle_analytics.js)を次のように記述します。

/* デフォルトの非同期トラッキングコード部分 */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); //個々のトラッキングID
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* /デフォルトの非同期トラッキングコード部分 */


/* ヘルプで例示されているコード部分(一部改変) */
function trackOutboundLink(link, category, action) {
  try {
    _gaq.push(['_trackEvent', category , action]);
  } catch(err){}

  // ワークアラウンドで、Safariだけ同一ウインドウで画面遷移
  if (navigator.userAgent.indexOf('Safari') != -1
      && navigator.userAgent.indexOf('Chrome') == -1) {
    setTimeout(function() {
      document.location.href = link.href;
    }, 100);
  } else {
    // ポップアップブロック回避のため、
    // setTimeout()の外でwindow.open()を呼び出しておく
    var win = window.open('', '_blank');
    setTimeout(function() {
      win.location.href = link;
    }, 100);
  }
}
/* /ヘルプで例示されているコード部分 */


/* クライアントサイドで動的にリンクの設定を書き換える部分 */
function myOnLoad(){
  var links = document.getElementsByTagName('a');
  for (var i=0;i<links.length;i++) {
    if ('target' in links[i].attributes) {
      if (links[i].getAttribute('target') == '_blank') {
        var str = "trackOutboundLink(this, 'Outbound Links', '"
          + links[i].getAttribute('href') + "'); return false;";
        links[i].setAttribute('onClick', str);
      }
    }
  }
}

if (window.addEventListener)
{
  window.addEventListener('load', myOnLoad, false);
}
else if(window.attachEvent)
{
  window.attachEvent('onload', myOnLoad);
}
else
{
  window.onload = myOnLoad;
}
/* /クライアントサイドで動的にリンクの設定を書き換える部分 */

修正(2013/09/09)

非同期処理中にwindow.open()で別ウインドウを開くとブラウザのポップアップブロックに引っかかるので、先に別ウインドウを開いておくようにコードを一部修正しました。

修正(2013/09/10)

iOSのSafariでは、上記の方法でのポップアップブロックの回避が難しかったので、ひとまず同一ウインドウで画面遷移するように修正しました。新規ウインドウにフォーカスが移ると、親ウインドウでのJavaScriptの処理が一時停止状態になってしまうような挙動を示したため(親ウインドウにフォーカスを戻すとsetTimeout()内の処理が再度動き出す感じ)。Mac OSのSafariは未確認です。

str変数で、trackOutboundLinkに第2~第3引数で渡している値は、それぞれカテゴリラベル名とイベントアクション名です。後で集計しやすい値を設定してください。ここでは、ラベル名を「Outbound Links」とし、イベントアクション名をリンク先のURLとしています。

上記を組み込むと、例えば

<a href="http://example.com/hoge/" target="_blank">外部サイト</a>

といったリンクがあった場合に、次のように動的に書き換えられます。

<a href="http://example.com/hoge/" target="_blank" onclick="trackOutboundLink(this, 'Outbound Links', 'http://example.com/hoge/'); return false;">外部サイト</a>

外部リンクのクリック数を確認する

上記で計測した値は、Googleアナリティクスのレポート画面で、「コンテンツ」-「イベント」-「上位のイベント」をクリックし、設定したカテゴリラベル名(ここでは「Outbound Links」)をクリックすると、詳細が確認できます。

../../../_images/google_analytics_events.png
]]>
Sun, 11 Aug 2013 00:00:00 +0900
http://te2uma.com/blog/2013/07/07/development_environment_on_windows_for_laravel_app_with_centos.html http://te2uma.com/blog/2013/07/07/development_environment_on_windows_for_laravel_app_with_centos.html <![CDATA[CentOSで走らせるLaravelアプリの開発環境を、Windows上で構築する]]>

CentOSで走らせるLaravelアプリの開発環境を、Windows上で構築する

Lavavelで作ったWebアプリをVPSなどのCentOS上で走らせる場合に、同等の開発環境をローカルのWindowsマシンで構築する手順を紹介します。

VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する 」の続きになっているので、併せてそちらも確認してください。

メモベースなので、リライト途中です。

PHP5のインストール

PHPおよび関連モジュールをインストール。

sudo yum -y install php php-mbstring php-mysql

Webサーバーの設定ファイルを書き換え。オリジナルは別名で保存。

sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.orig
sudo vi /etc/httpd/conf/httpd.conf

設定ファイルを次のように書き換え。

DirectoryIndex index.html index.html.var
↓
DirectoryIndex index.html index.html.var index.php
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
↓
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
sudo cp /etc/php.ini /etc/php.ini.orig
sudo vi /etc/php.ini
short_open_tag = Off
↓
short_open_tag = On
expose_php = On
↓
expose_php = Off
max_execution_time = 30
↓
max_execution_time = 300
error_reporting  =  E_ALL & ~E_DEPRECATED
↓
error_reporting  =  E_ALL & ~E_NOTICE
;default_charset = "iso-8859-1"default_charset = "UTF-8"
upload_max_filesize = 2M
↓
upload_max_filesize = 20M
;date.timezone =
↓
date.timezone = Asia/Tokyo
;mbstring.language = Japanese
↓
mbstring.language = Japanese
;mbstring.internal_encoding = EUC-JP
↓
mbstring.internal_encoding = UTF-8
;mbstring.http_input = auto
↓
mbstring.http_input = auto
;mbstring.http_output = SJIS
↓
mbstring.http_output = pass
;mbstring.encoding_translation = Off
↓
mbstring.encoding_translation = On
;mbstring.detect_order = auto
↓
mbstring.detect_order = auto
;mbstring.substitute_character = none;
↓
mbstring.substitute_character = none;

Webサーバーの再起動。

sudo /etc/rc.d/init.d/httpd restart

インストールしたPHPの確認

echo "<?php phpinfo(); ?>" > /var/www/html/info.php

ブラウザで http://192.168.56.101/info.php にアクセスしてみる。 IPアドレスは「 VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する 」の 設定に合わせてあるので、適宜読み替えてください。

Laravelのインストール

Mcryptライブラリのインストール

curl -OL http://ftp.riken.jp/Linux/fedora/epel/RPM-GPG-KEY-EPEL-6
curl -OL http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm

sudo rpm --import RPM-GPG-KEY-EPEL-6
sudo rpm -i epel-release-6-8.noarch.rpm

rm RPM-GPG-KEY-EPEL-6
rm epel-release-6-8.noarch.rpm

sudo yum -y install php-mcrypt

Laravelのダウンロード

sudo yum -y install unzip
mkdir ~/www
cd ~/www
curl -OL http://laravel.com/download
unzip -q download
rm download
mv laravel-laravel-ff7f6f6/ laravel/

Laravelの設定変更

vi laravel/application/config/application.php

keyに適当な32文字を指定。

'key' => 'YourSecretKeyGoesHere!',
↓
'key' => 'xxxxoxxxxoxxxxoxxxxoxxxxoxxxxoxx',
sudo chown -R apache:apache laravel/storage
sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.orig
sudo vi /etc/httpd/conf/httpd.conf
DocumentRoot "/var/www/html"
↓
DocumentRoot "/home/admin/www/laravel/public"
<Directory "/var/www/html">
↓
<Directory "/home/admin/www/laravel/public">
sudo apachectl configtest
sudo service httpd restart

↓これをやらないと403エラーが出る。

chmod 755 ~
]]>
Sun, 07 Jul 2013 00:00:00 +0900
http://te2uma.com/blog/2013/07/07/development_environment_on_windows_for_python_web_app_with_centos.html http://te2uma.com/blog/2013/07/07/development_environment_on_windows_for_python_web_app_with_centos.html <![CDATA[CentOSで走らせるFlaskまたはDjangoアプリの開発環境を、Windows上で構築する]]>

CentOSで走らせるFlaskまたはDjangoアプリの開発環境を、Windows上で構築する

FlaskまたはDjangoで作ったWebアプリをVPSなどのCentOS上で走らせる場合に、 同等の開発環境をローカルのWindowsマシンで構築する手順を紹介します。

VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する 」の続きに なっているので、併せてそちらも確認してください。

複数のWebアプリを管理しやすいように、pythonbrewで仮想環境を構築し、利用します。 バージョンなどは適宜読み替えてください(ただ、バージョンによってうまくいかないことがあるので注意)。

vimの設定

vi(vim)でPythonスクリプトを編集しやすいように設定します。

デフォルトのvimは機能制限版なので、拡張版をインストール。

sudo yum -y install vim-enhanced

vimの設定ファイルを編集。

vi ~/.vimrc
filetype plugin on
filetype indent on
autocmd FileType python setl autoindent
autocmd FileType python setl smartindent cinwords=if,elif,else,for,while,try,except,finally,def,class
autocmd FileType python setl expandtab tabstop=4 shiftwidth=4 softtabstop=4

「.bash_profile」を編集。

vi ~/.bash_profile

以下を末尾に追加。

alias vi='vim'

「.bash_profile」の再読み込み。

source ~/.bash_profile

Python環境の仮想化

まず、pythonbrewをインストール。

curl -kL http://xrl.us/pythonbrewinstall | bash
echo '[ -s "$HOME/.pythonbrew/etc/bashrc" ] && source "$HOME/.pythonbrew/etc/bashrc"' >> $HOME/.bash_profile
source ~/.bash_profile

Pythonのインストールに必要なモジュール一式をインストール。

  • readline-develを入れておかないと、Pythonシェルで入力履歴を呼び出せない。
sudo yum -y install zlib-devel bzip2-devel openssl-devel sqlite-devel gcc make wget readline-devel

pythonbrewの管理下にPythonをインストール。

2.x系で最新の「2.7」の中で他との相性がよさそうだった「2.7.2」を利用しています。新しいリビジョンのものを使うとどこかでこけたりすることあり。

pythonbrew install -f --configure="--with-threads --enable-shared --with-zlib" --no-setuptools 2.7.2

sudo echo "$HOME/.pythonbrew/pythons/Python-2.7.2/lib" | sudo tee -a /etc/ld.so.conf.d/python2.7.2.conf
sudo ldconfig

pythonbrew switch 2.7.2

Pythonのパッケージ管理システムをインストール。

wget http://python-distribute.org/distribute_setup.py
python distribute_setup.py
rm distribute*
easy_install pip

試しにmercurialをインストール。この手順は省いてもよいです。

pip install mercurial

mod_wsgiのインストール

mod_wsgiに必要なモジュールをインストール。

sudo yum -y install httpd-devel

mod_wsgiのインストール。mod_wsgiは、さまざまなWebアプリから使うので、仮想環境ではないPythonを指定。

wget http://modwsgi.googlecode.com/files/mod_wsgi-3.3.tar.gz
tar vzxf mod_wsgi-3.3.tar.gz
cd mod_wsgi-3.3
./configure --with-apxs=/usr/sbin/apxs --with-python=$HOME/.pythonbrew/pythons/Python-2.7.2/bin/python
make
sudo make install
cd ..
rm -rf mod_wsgi-3.3*

ユーザーディレクトリにPythonの仮想環境を置いている関係で、ホームディレクトリの実行権限をいじらないと、後でうまく動かないです。

chmod o+x $HOME

Python仮想環境の構築

仮想環境は次のように作成します。VENVNAMEとしていますが適宜読み替えてください

pybrew venv create VENVNAME

仮想環境を利用するには次のようにします。

pybrew venv use VENVNAME

コマンドプロンプトの先頭に、「(仮想環境名)」が表示されるようになります。

補足

仮想環境を抜けるには、

deactivate

と入力します。

mod_wsgiの設定とテスト

同様に、ADMINUSERNAMEの部分は適宜読み替えてください。「 VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する 」の手順どおりに行っている場合は「admin」のはずです。

sudo vi /etc/httpd/conf.d/wsgi.conf
LoadModule wsgi_module modules/mod_wsgi.so
WSGIPythonHome /home/ADMINUSERNAME/.pythonbrew/venvs/Python-2.7.2/VENVNAME
WSGIPythonPath /home/ADMINUSERNAME/.pythonbrew/venvs/Python-2.7.2/VENVNAME/lib/python2.7
/usr/sbin/apachectl configtest
sudo service httpd reload

TESTFILEDIRの部分は適当なディレクトリ名を割り当ててください (以下同様)。

sudo vi /etc/httpd/conf.d/wsgi.conf

以下を末尾に追加します。

WSGIScriptAlias /testwsgi /home/ADMINUSERNAME/TESTFILEDIR/testwsgi.wsgi
/usr/sbin/apachectl configtest
sudo service httpd reload
cd ~
mkdir TESTFILEDIR
vi ~/TESTFILEDIR/testwsgi.wsgi
def application(environ, start_response):
    status = '200 OK'
    response_headers = [('Content-type', 'text/plain')]
    start_response(status, response_headers)
    return ["WSGI App test is OK!"]

http://192.168.56.101/testwsgi にアクセスしてメッセージが表示されればOKです。

なお、「 VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する 」の手順と異なるIPアドレスに開発サーバーを指定した場合は、192.168.56.101の部分を読み替えてください(以下同様)。

Flaskの設定とテスト

pip install flask
sudo vi /etc/httpd/conf.d/wsgi.conf

以下を末尾に追加します。

WSGIScriptAlias /testflask /home/ADMINUSERNAME/TESTFILEDIR/testflask.wsgi
 /usr/sbin/apachectl configtest
sudo service httpd reload
vi ~/TESTFILEDIR/testflask.py
 # -*- coding: utf-8 -*-
#!/usr/bin/env python
import os, sys
from flask import Flask

app = Flask(__name__)
app.config['DEBUG'] = True

@app.route('/')
def index():
    return 'Flask App test is OK!'

if __name__ == '__main__':
    app.run()
vi ~/TESTFILEDIR/testflask.wsgi
 # -*- coding:utf-8 -*-
import sys, os
sys.path.append('/home/ADMINUSERNAME/TESTFILEDIR')

from testflask import app as application

http://192.168.56.101/testflask にアクセスしてメッセージが表示されればOK。

Djangoの設定とテスト

pip install django
cd ~/TESTFILEDIR
django-admin.py startproject testdjango
sudo vi /etc/httpd/conf.d/wsgi.conf

以下を末尾に追加します。

WSGIScriptAlias /testdjango /home/ADMINUSERNAME/TESTFILEDIR/testdjango.wsgi
/usr/sbin/apachectl configtest
sudo service httpd reload
vi /home/ADMINUSERNAME/TESTFILEDIR/testdjango.wsgi
import os
import sys
sys.path.append('/home/ADMINUSERNAME/TESTFILEDIR/testdjango')

os.environ['DJANGO_SETTINGS_MODULE'] = 'testdjango.settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

http://192.168.56.101/testdjango にアクセスしてメッセージが表示されればOK。

]]>
Sun, 07 Jul 2013 00:00:00 +0900
http://te2uma.com/blog/2013/07/07/centos_on_windows_with_virtualbox.html http://te2uma.com/blog/2013/07/07/centos_on_windows_with_virtualbox.html <![CDATA[VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する]]>

VirtualBoxでWindowsにCent OS 6.4の開発環境を構築する

VPSなどを借りてWebアプリケーションをCentOS上で走らせる場合、ローカル環境にも本番環境に近いCentOS環境を構築できると便利です。そこで、仮想化ツールの「VirtualBox」を使って、WindowsにCentOSの仮想化環境を構築する手順を紹介します。

最終的には、開発環境のサーバーをバックグラウンドで実行し(IPアドレスは192.168.56.101)て、rootではない管理ユーザー(ユーザー名:admin)としてSSHクライアントで接続し、利用する形にもっていきす。

IPアドレスやユーザー名は必要に応じて適宜読み替えてください。

なお、Webアプリの開発環境を想定しているので、セキュリティなどはあまり考慮していませんし、必要最低限のものしか入れていません。

  • さくらのVPSにあわせて、CentOS 6.4(Final)をインストール
  • 検証OSはWindows Vista/32bit、Windows 7 SP1/32bit

「VirtualBox」のインストール

VirtualBoxのダウンロードページ で、VirtualBox 4.2.16 for Windows hostsの「x86/amd64」から「VirtualBox-4.2.16-86992-Win.exe」をダウンロードし、実行します。バージョン番号は適宜読み替えてください。

設定はすべてデフォルトのものを選択した、という前提で進めます。

ホストキーの設定

Happy Hacking Keyboard(HHK)など、右Ctrlキーがないキーボードを使っている場合は、VirtualBoxのウィンドウから抜け出せなくなる可能性があるため、あらかじめホストキーを変更しておく必要があります。

[ファイル]-[環境設定]の「入力」で、ホストキーの右のボックスをクリックし、ホストキーに設定したキーを押下してください。

注意

仮想マシンのウィンドウを操作中にマウスカーソルが消えた場合は、入力がキャプチャーされているので、あわてずにホストキー(デフォルトは右のCtrlキー)を押すこと。

CentOSのインストールディスクの入手

ISOディスクイメージを日本の ミラーサイト から入手します。例えば、JAISTのFTPサーバーにある32ビット版のネットインストーラーは以下です。

仮想マシンの作成

Virtual Boxを起動し、[新規]ボタンを押して手順を進めます。

名前を入力し(「CentOS」など)、タイプに「Linux」、バージョンに「Red Hat」を選択してください。

ネットワークの設定

作成した仮想マシンを選択した状態で、上部の「設定」ボタンをクリックします。

「ネットワーク」で、アダプタ1に「NAT」、アダプタ2に「ホストオンリーアダプタ」を指定します。アダプタ2は、「ネットワークアダプタを有効化」をオンにすると選択できるようになります。

CentOSのインストール

VirtualBoxマネージャーで作成した仮想マシンを起動し、「起動ハードディスクを選択」ウィンドウで、フォルダの形をしたボタンから先ほどダウンロードしたネットインストーラーを指定し、起動します。

以降、次の手順に従ってインストールを進めてください(触れていない部分があればデフォルト値)。

操作説明

  • Tabキーや矢印キーでカーソルを移動し、Enterキーで項目を選択できる
  • 項目一覧では、頭文字のキーを押すことで、カーソルをジャンプできる
  • このUIではテキストのコピペはできないので直打ちする
  1. 「Install or upgrade an existing system」を選択
  2. Disc Found: 「Skip」
  3. Choose a Language: 「English」
  4. Keyboard Type: 「jp106」
  5. Installation Method: 「URL」
  6. Networking Device: 「eth0」を選択。
  7. Configure TCP/IP: (デフォルト)
  8. URL Setup: 「ftp://ftp.jaist.ac.jp/pub/Linux/CentOS/6.4/os/i386/」(※上述の例の場合/適宜読み替え)
  9. Retrieving: (ディスクイメージのダウンロードに時間がかかるので、しばし待つ)
  10. CentOS: 「OK」
  11. Warning: 「Re-initialize all」
  12. Time Zone Selection: 「Asia/Tokyo」
  13. Root Password: (任意のパスワード、confirmにも同じものを)
  14. Partitioning Type: 「Replace existing Linux system」
  15. Writing storage configuration to disk: 「Write changes to disk」
  16. Package Installation: (しばし待つ)

Completeにきたら、いったんストップ。

上部のメニューから「デバイス」-「CD/DVDデバイス」-「CentOS-6.4-i386-netinstall.iso」を選択して、ネットインストーラーをアンマウントし(取り外し)、「Reboot」を選択します。

補足

rootのパスワードを指定する際に、単語が含まれているなど、安全性の低いパスワードを指定すると「Wead Passwork」というダイアログが表示される。「Cancel」で入力し直すか、「Use Anyway」でそのまま手順を進めること。

CentOSの初期設定

仮想マシンが再起動したら、rootでログインします。

localhost login: root
Password: (さっき設定したやつ/※入力文字は画面に表示されない)

ホストオンリーアダプターを有効にします。

vi /etc/sysconfig/network-scripts/ifcfg-eth1
ONBOOT=no
↓
ONBOOT=yes


BOOTPROTO=dhcp
↓
BOOTPROTO=static


(※以下を末尾に追加)
IPADDR=192.168.56.101
NETMASK=255.255.255.0
/etc/init.d/network restart

この段階で、ようやくputtyなどのSSHクライアントを使って外部から入れるようになる。 ここの例でのIPアドレスは192.168.56.101。

以降、バックグラウンドで仮想マシンを起動し、SSHクライアントで接続して使うので、ひとまず

shutdown -h now

と入力するなどして仮想マシンを落とし、VirtualBoxマネージャーも閉じる。

VirtualBoxのバックグラウンド実行

VirtualBoxのバージョンに合った「 VBoxHeadlessTray 」をダウンロードしてインストールする。 この記事の例では「VBoxHeadlessTray42Setup.exe」。

スタートメニューからインストールした「VBoxHeadlessTray」を実行し、対象の仮想マシンを選択して「OK」ボタンをクリックする。

補足

「Power on machine」で、VBoxHeadlessTrayの立ち上げと同時に仮想マシンも起動するかどうかを選択できる。オフにすると、仮想マシンの立ち上げが保留されるので、スタートアップにVBoxHeadlessTrayを登録しているけれどもリソースの関係で必要な時だけ仮想マシンを立ち上げたい、といった場合に便利。

SSHクライアントでのログイン

バックグラウンドで仮想マシンを起動した状態で、puttyなどのSSHクライアントからログインする (コピペが使えるようになる)。

ホスト名(IPアドレス)は「192.168.56.101」、ユーザー名は「root」を指定。

なお、当然のことながら仮想マシンの起動中はログインできない。状況はVirtualBoxマネージャーを立ち上げると、プレビューで確認できる。

その他の環境構築

管理ユーザーの追加

ここでは「admin」という名前の管理ユーザーを追加する前提で話を進めます。

useradd admin
passwd admin

管理者グループのみがrootになれるようにする

usermod -G wheel admin
vi /etc/pam.d/su
#auth       required        pam_wheel.so use_uid
↓(行頭の#を削除)
auth        required        pam_wheel.so use_uid

sudoを使えるようにする

visudo
## Allows people in group wheel to run all commands
# %wheel        ALL=(ALL)       ALL
↓(行頭の#を削除)
## Allows people in group wheel to run all commands
%wheel        ALL=(ALL)       ALL

新しく作った管理ユーザー(ここではadmin)でログインし直して、

su -

でrootになれること(入力するパスワードはrootのもの)、 を確認。

exit

で元のユーザーに戻れる。

sudo

も実行できるか確認しておく(こっちで入力するパスワードは自分のもの。ここではadminのもの)。

CentOSの更新

sudo yum -y update

iptablesの設定(ファイアウォール)

設定を間違えるとsshでアクセスできなくなることがあるので注意!

sudo iptables -L

vi iptables-init.sh
#!/bin/sh

iptables -F
iptables -X

iptables -P INPUT DROP
iptables -P OUTPUT ACCEPT
iptables -P FORWARD DROP

iptables -A INPUT -i lo -j ACCEPT
iptables -A OUTPUT -o lo -j ACCEPT

iptables -A INPUT -s 10.0.0.0/8 -j DROP
iptables -A INPUT -s 172.16.0.0/12 -j DROP
#iptables -A INPUT -s 192.168.0.0/16 -j DROP

# iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT

iptables -A INPUT -p tcp --dport 22 -j ACCEPT
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
iptables -A INPUT -p tcp --dport 8000 -j ACCEPT
iptables -A INPUT -p tcp --dport 9418 -j ACCEPT

iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
sudo sh iptables-init.sh
rm iptables-init.sh

sudo iptables -L
sudo iptables-save | sudo tee -a /etc/sysconfig/iptables
sudo service iptables restart

SELinuxを無効にする

無効にしておかないと、mod_wsgiの設定まわりなどではまったりする。

sudo vi /etc/selinux/config
SELINUX=enforcing
↓
SELINUX=disabled

サーバーを再起動する

sudo reboot

Apache 2のインストール&設定

sudo yum -y install httpd

sudo service httpd start
sudo chkconfig | grep httpd
sudo chkconfig httpd on
sudo chkconfig | grep httpd

3: のところがonになればOK。

仮想サーバーとのファイル共有

WinSCP 」を使うと、ssh経由でファイルをやりとりできます。

puttyのようにホスト名に「192.168.56.101」を指定し、ユーザー名とパスワードを入力します。

ドキュメントルートの権限変更

デフォルトのドキュメントルートは「/var/www/html」。

root所有になっているので、管理者アカウントで読み書きできるように所有者を変更します。

sudo chown -R admin:admin /var/www

例えば、適当なindex.htmlを書いて、WinSCPを使って /var/www/html にコピーし、 ブラウザで http://192.168.56.101/ にアクセスすると確認できる (文字コードがUTF-8になっていないと文字化けすることアリ)。

]]>
Sun, 07 Jul 2013 00:00:00 +0900
http://te2uma.com/blog/2013/07/03/like_postever_on_pc_with_fastnote.html http://te2uma.com/blog/2013/07/03/like_postever_on_pc_with_fastnote.html <![CDATA[iPhoneアプリの「PostEver」と同じことをPC上でやる方法]]>

iPhoneアプリの「PostEver」と同じことをPC上でやる方法

アイデアってふいに思いついて、すぐに揮発してしまうので、EvernoteにさっくとメモれるiPhoneアプリ「 PostEver 」を重宝しています。

ただ、PCの前に座って作業している際は、PCアプリの方が便利なので、「 Fastnote 」というフリーウェアを併用しています。

で、Fastnoteで投稿したメモの表示形式を、PostEverに合わせられると気持ちよいので、カスタマイズしてみました。以下、その手順です。

  1. Fastnoteの左下にある設定ボタンをクリックして、「設定」ダイアログボックスを表示。
  2. 「上級者向け」タブ(右の方に隠れています)で、「カスタマイズを有効にする」をオンにし、次のように書き換え。
<タイムスタンプ><改行>
<本文><改行>
<改行>

↓

<本文><改行>
<font color="#c0c0c0" size="1"><タイムスタンプ><改行><改行></font>
  1. 「ノート設定」タブで、タイムスタンプ設定の「表示形式」を次のように書き換え。
[HH:mm:ss]

↓

HH:mm
  1. 「ノートブック設定」タブで、ノートブック名設定の「ノートブック名」を次のように書き換え。
yyyy年のメモ

↓

"PostEver"

注意

※”“”でくくらないと、「s」が秒に変換されてしまうので注意。

おまけ

標準機能としてはついていないようなのですが、次のようにすると、いつでもポップアップ的にアプリを呼び出せて、はかどります。ご参考まで。

  1. ショートカットをデスクトップに作成する(デスクトップじゃないとうまくいかないことがあるようです)。
  2. 作成したショートカットを右クリックして、「プロパティ」を選択。
  3. 「ショートカット」タブの「ショートカットキー」に、任意のキーコンビネーションを入力。他とかぶりにくそうなもの。私は「Ctrl + Shift + Z」にしています。
  4. 以降、設定したキーコンビネーションを入力するだけで、Fastnoteが呼び出せます。

参考文献

]]>
Wed, 03 Jul 2013 00:00:00 +0900
http://te2uma.com/blog/2013/07/03/ipad_apps_shutdown_incorrectly.html http://te2uma.com/blog/2013/07/03/ipad_apps_shutdown_incorrectly.html <![CDATA[Ultrathin Keyboard CoverでiPadアプリがよく落ちる場合は?]]>

Ultrathin Keyboard CoverでiPadアプリがよく落ちる場合は?

色々なBluetoothキーボードを渡り歩いて、最近は「 Ultrathin Keyboard Cover 」に落ち着きました。携帯時にiPadと併せた際の一体感や、キータイプの感触がよく、なにより磁石でかっちりと固定されるので、ラップトップらしく膝の上でも使えるのが取材などで重宝します。

ただ、ハードにタイプしていると、ちょいちょいアプリが不正終了することがあり、それが唯一の大きな不満でした。特に、メールアプリとかは最悪。

で、少し調べたところ、スペルチェックをオフにするとよくなることがあるらしく、試したら確かに落ちなくなった気がします。

「設定」アプリで、「一般」-「キーボード」-「スペルチェック」をオフにするだけ。

同じような現象でお悩みの方は、ぜひお試しください。

検証環境

  • iPad(第三世代、MC707J/A)
  • OSのバージョン: 6.1.3
]]>
Wed, 03 Jul 2013 00:00:00 +0900
http://te2uma.com/blog/2013/04/16/mindjet_for_android_freemind.html http://te2uma.com/blog/2013/04/16/mindjet_for_android_freemind.html <![CDATA[Mindjet for Androidで、既定のファイル形式をFreeMindに変更してもうまくいかない場合は?]]>

Mindjet for Androidで、既定のファイル形式をFreeMindに変更してもうまくいかない場合は?

Android版のMindjet は、既定のファイル形式を FreeMind (.mmファイル)に変更できるため、PCと同期を取って作業する場合に便利です。次の手順に従って設定します。

既定のファイル形式をFreeMindに変更

(検証環境は、Nexus 7+Android 4.2.2+Mindjet バージョン3.0です)

  1. Mindjet for Androidのトップ画面で、右上の「…」ボタンをタップし、「Settings」を選択。
  2. 「STORAGE」の「Other」をタップ。
  3. 「GENERAL」の「Default file format」をタップし、「Freemind」を選択。
../../../_images/mindjet_setting.png
  1. 戻るボタンを複数回タップし、設定画面を抜けます。

以降、新規に作成するマップはすべてFreeMind形式で用意されます。

設定を変更したにも関わらず、うまくいかない場合

ただし、一点だけ注意点があります。

データの保存先をMindjetのクラウド上に指定している場合は、上記の設定が無視され、新規に作成するマップがすべてMindjet形式になってしまいます。デフォルトでは「(Last Name) reader account」というタブを選択している状態がそれに当たります。

適宜、Device(ローカル)やDropboxといった保存先を選択しましょう。ローカルおよびクラウドストレージの有効化/無効化は、前節の手順2.で表示される設定画面で変更できます。

Mindjetのクラウドを利用しない場合は、Settingsのメニューを使ってログアウトしてしまってもよいでしょう。タブが非表示になります。

]]>
Tue, 16 Apr 2013 00:00:00 +0900
http://te2uma.com/blog/2013/04/10/embed_image_in_tinkerer.html http://te2uma.com/blog/2013/04/10/embed_image_in_tinkerer.html <![CDATA[Tinkererで作ったブログのエントリーに画像を埋め込む]]>

Tinkererで作ったブログのエントリーに画像を埋め込む

特に公式ドキュメントで言及されていなかったのですが、エントリーに画像を埋め込みたい場合は、原稿(rstファイル)と同じディレクトリに画像をアップしておき、imageディレクティブ、またはfigureディレクティブで指定すればよいようです。

例えば、原稿が /path/to/blog/2013/04/10/manuscript.rst にある場合は、/path/to/blog/2013/04/10/picture.png に画像をアップし、次のように(相対パスの形で)ファイル名だけを原稿内で記述します。

.. image:: picture.png

キャプションをつける場合はこちら。

.. figure:: picture.png

   キャプション

tinker -bでビルドすると、自動的に /path/to/blog/blog/html/_images/ にファイルがコピーされ、公開サイトで画像を表示することができます。各エントリーの画像が同一ディレクトリにアップされるようなので、ファイル名は一意になるようにつけておいた方がよいかもしれません(要検証)。

]]>
Wed, 10 Apr 2013 00:00:00 +0900
http://te2uma.com/blog/2013/04/09/sugarsync_disk_capacity.html http://te2uma.com/blog/2013/04/09/sugarsync_disk_capacity.html <![CDATA[ファイルを削除してもSugarSyncのディスク容量が増えない場合は?]]>

ファイルを削除してもSugarSyncのディスク容量が増えない場合は?

SugarSyncでは、 自動的に5世代前までファイルの履歴を保存する ため、普通にファイルを削除しただけでは、ディスクの空き容量が復活しません。完全にデータを削除するには、別途ゴミ箱を空にするような処理を行い、バックアップを消去する必要があります。

SugarSyncからファイルを完全に削除する

注: この手順では、デスクトップクライアントのバージョン2.0以降を想定しています)

  1. スタートメニューや通知領域のアイコンから、SugarSyncのデスクトップクライアントを起動します。
  2. 左上のメニューから「SugarSync」-「削除済みのアイテムを表示」を選択し、「削除済みアイテム」ウィンドウを表示します。
../../../_images/sugarsync_client.png
  1. 完全に削除して構わないファイルやフォルダを選択して、右下の「完全に削除」ボタンをクリックし、さらに「完全に削除」ボタンをクリックします。すべて不要な場合は、左下の「すべて選択」ボタンを使ってもよいでしょう。
../../../_images/sugarsync_delitem.png
  1. バックアップが消去され、デスクトップクライアントの下部に表示される使用済み容量も回復しているはずです。

補足

「削除済みアイテム」ウィンドウでは、タブごとに 非共有ファイル (削除済みのアイテム)、 共有ファイル (プライベート共有済みアイテム)を分けて管理しているようです。必要に応じて、共有ファイルの方のバックアップも削除しておきましょう。

(最終更新日:2013/04/09)

]]>
Tue, 09 Apr 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/31/buy_kindle_book_from_amazon_com.html http://te2uma.com/blog/2013/03/31/buy_kindle_book_from_amazon_com.html <![CDATA[「Purchases from the Amazon.com Kindle Store are not available for your current country settings.」と表示され、Kindle Editionの本が購入できない場合は?]]>

「Purchases from the Amazon.com Kindle Store are not available for your current country settings.」と表示され、Kindle Editionの本が購入できない場合は?

amazon.comのKindleアカウントをamazon.co.jpのものにマージ した後、amazom.comのサイトからKindle Editionを買おうとした際に、最初は

Purchases from the Amazon.com Kindle Store are not available for your current country settings. ……

といったメッセージが出て、うまくいきませんでした(再現できないので条件が違う可能性あり)。

ここに「country settingを変えろ」といった趣旨のリンクがあったのでクリックしたら、「設定が変更できなかったのでサポートに問い合わせろ」と表示されたように記憶しています。

この場合は、 amazon.co.jp のサイトの方で同じ洋書を探せば、普通に買えるようです。

私の場合は、あれこれしているうちに、 amazon.com のサイトでも、

Kindle titles are available for JP customers on Amazon.co.jp. Continue shopping on the Kindle Store at Amazon.co.jp.

と表示され、不具合が発生しなくなりました。

買おうと思った Maffetone先生 の本『 The Big Book of Endurance Training and Racing 』は、ちょうど現在の為替レート換算のようだったので、 ドル建て でも 円建て でも変わりなさそうです(2013/03/31時点)。

(最終更新日:2013/04/09)

]]>
Sun, 31 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/29/tinkerer_with_social_button.html http://te2uma.com/blog/2013/03/29/tinkerer_with_social_button.html <![CDATA[Tinkererで作ったブログにソーシャルボタンを追加する]]>

Tinkererで作ったブログにソーシャルボタンを追加する

テンプレートの拡張ファイルを置くディレクトリ「_templates」をブログファイルのルートに用意し、その中にpage.htmlを作成して、各種ボタンを記述していきます(参考: Tinkererをカスタマイズする )。 [1]

ここでは、テンプレートの編集を簡略化するため、各エントリの日付・タイトル上にソーシャルボタンを挿入する前提で話を進めていきます。

vi _templates/page.html
{% extends "!page.html" %}

【 …省略… 】

{%- block body %}
    【★ここに以降の節で紹介するタグを入れていく★】

    {{ super() }}
{%- endblock -%}

はてなブックマークボタンを挿入する

はてなブックマークボタンの作成・設置について 」のページでタグを作成します。

URLとタイトルの部分は、エントリーごとに動的に生成する必要がありますが、 Sphinxのグローバル変数 を使うことで対応できます。URLは「【ブログトップのURL】{{ pagename }}{{ file_suffix }}」、タイトルは「{{ title }}」とすればよいです。

例えば、このブログで「シンプル/ブックマーク数あり」のボタンを設置する場合は、次のように記述します。

<a href="http://b.hatena.ne.jp/entry/http://te2uma.com/blog/{{ pagename }}{{ file_suffix }}" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }}" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ツイートボタンを挿入する

Twitter社の素材ページ でタグを作成します。特にカスタマイズの必要がなければ、「コードのプレビューを見る」のソースコードをコピペするだけ。

Facebookの「いいね!」ボタンを挿入する

facebook developersの「 Like Button 」のページでタグを作成します。「URL to Like」の部分は、前述と同様に「【ブログトップのURL】{{ pagename }}{{ file_suffix }}」を指定しますが、「Get Code」でコードを生成したタイミングで「{{」「}}」の部分が実体参照にエスケープされてしまうので、この部分はコードを生成してから書き換えます。

なお、Send Buttonを外したい場合は、別途JavaScript SDKの設置やアプリケーションIDの取得などが必要となるので、『 XFBML版Facebookの「いいね!」ボタンを設置する。 』を参考に設定してください。

JavaScript SDKを設定する場合、「 たった一言で「いいね!」ボタンが爆速に!全ブロガーに必須の呪文。 」を参考に、非同期読み込みの設定「js.async = true;」も追加しておいた方がよさそうです。


[1]Tinkerer(というかSphinx)で使用しているテンプレートエンジン「 Jinja2 」を触るのは初めてですが、 Django を参考に作られているらしく、Djangoの知識を活かせて使いやすかったです。しかも、Perlの Template Toolkit のようにタグ前の改行を詰める機能もあるようで個人的に便利な印象。

(最終更新日:2013/04/09)

]]>
Fri, 29 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/27/laravel_debug_how_to.html http://te2uma.com/blog/2013/03/27/laravel_debug_how_to.html <![CDATA[Laravelでデバッグする際のヒント]]>

Laravelでデバッグする際のヒント

Laravelの ログ出力クラス を使うと、実行途中の値の確認などがやりやすいので、デバッグに便利です。

Logクラス の書式は次のとおり:

Log::write('ERROR_TYPE', 'ERROR_MESSAGE')
    ERROE_TYPE: エラーの種類(エラーレベル)。ERROR、WARNING、INFO、DEBUGなどが一般的。
    ERROR_MESSAGE: 表示するエラーメッセージ。

ショートカットとして、以下も定義されています。

Log::ERROR_TYPE('ERROR_MESSAGE');

ログの出力先は「【Laravelプロジェクトのルート】/storage/logs」で、「YYYY-MM-DD.log」といったファイル名で保存されます。

基本的には、次のように使うとよさそうです。

Log::debug('表示したいエラーメッセージ');

複数の個所に仕込む場合は、種類の部分をラベルみたいに使って次のようにしてみてもよいかもしれません。

Log::a('Aポイントまで通過');
Log::b('Bポイントまで通過');

dd()

Laravelのヘルパーメソッドに dd() というものもあるみたいです。「与えられた変数をダンプして、スクリプトを止める」と説明されているので、手っ取り早く変数の中身をブラウザ上で確認したい場合にはよいかもしれません。

dd()の定義部分 を読むと、

die(var_dump($value));

とシンプルな実装。ただ、Chromeで試したら日本語が文字化けした(文字エンコードをShift_JISから手動でUTF-8に切り替える必要があった)のと、スクリプトがそこで中断してしまうのとで、使いどころが少し難しい可能性も。

(最終更新日:2013/04/09)

]]>
Wed, 27 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/27/tinkerer_categories_tags.html http://te2uma.com/blog/2013/03/27/tinkerer_categories_tags.html <![CDATA[Tinkererのエントリにカテゴリとタグを設定する]]>

Tinkererのエントリにカテゴリとタグを設定する

Tinkererで新規エントリ(ポスト)を作成すると、次のような項目があらかじめ文末に入力されています。

.. author:: default
.. categories:: none
.. tags:: none
.. comments::

公式ドキュメントの「 Tinkering 」のページによると、この「categories::」と「tags::」の後ろにある「none」の部分に、カンマ区切りで記述することで、当該ポストのカテゴリやタグを指定できます。

それぞれ文末にリンクが表示され、同一キーワードを持つエントリで絞り込んだリストを表示できるようになりますが、使い分けがイマイチ不明なので、その辺りは別途要調査。

(最終更新日:2013/04/09)

]]>
Wed, 27 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/27/tinkerer_sintaxhighlight.html http://te2uma.com/blog/2013/03/27/tinkerer_sintaxhighlight.html <![CDATA[Tinkererでソースコードをハイライト表示する]]>

Tinkererでソースコードをハイライト表示する

Tinkererをインストールすると、Sphinxとともにシンタックスハイライターの「 Pygments 」が組み込まれるので、既定のreStructuredText(以下、reST)の書き方に従えば、自動的にソースコードがハイライト表示されます。

記述方法は「 Pygments による コードハイライト表示 」が参考になります。

具体的には、まずソースコード部分をreSTの「 リテラルブロック 」に指定します。これには直前の段落末尾に「::」(コロン2連続)を書けばよいです。

次のように「::」単独で記述する場合と、「::」の前に文章がある場合とで挙動が異なり、前者はレンダリング時に非表示になり、後者は「:」と一つだけコロンが残ります。これは、日本ではあまりなじみがありませんが 英語独特の用法 に由来するものだと思われます。通常は前者を使っておけばよいです。

::

(ソースコード)
例えば次のように記述します::

(ソースコード)

次に、対象のリテラルブロックより前に

.. highlight:: c

のような「highlightディレクティブ」という指定を行うと、以降のリテラルブロックがすべてハイライト表示されるようになります。これは一度書くだけで、次のhighlightディレクティブで設定が上書きされるまで有効です。

.. sourcecode:: c

「c」の部分はプログラミング言語の指定で、ここではC言語を選択しています。同様に「bash」「python」「html」など、さまざまなものが指定できます。

サポートしている言語は公式ページの「 Supported languages 」に列挙されており、「highlight::」の後に指定するキーワードは、「 Available lexers 」に記載されている各言語の「Short names:」を指定すればよさそうです(明確な文献が見当たらなかった)。

また、次のようなcode-blockディレクティブを代わりに使うことで、部分的にプログラミング言語を指定できます。エイリアスの「sourcecode」でもOKです。

.. code-block:: python

これは直後のリテラルブロックだけに対して有効になるようです。その後の設定は、直前のものが適用されます。ソースコードの種類が混在する場合に便利。

【追記】なお、code-blockを使うときは、これ自体が次にリテラルブロックが来ることを意味しているようで、直前の「::」は不要なようです(入れると重複しておかしくなる)。

イメージとしてはこんな感じ:

段落1。

.. highlight:: python

::

(Pythonのコード)

段落2。

::

(Pythonのコード)

.. code-block:: html

(HTMLのコード/↑直前に「::」が入らない)

::

(Pythonのコード)

行番号の表示といったその他のノウハウは、sphinx-users.jpのページ などを参照のこと。

ちなみに、デフォルトだとハイライト部分の文字がとても小さくなるので、CSSをカスタマイズする必要がありそうです。

(最終更新日:2013/07/08)

修正履歴

  • 2013/07/08: 誤)「sourcecode」が「highlight」のエイリアス、正)「code-block」のエイリアス。
]]>
Wed, 27 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/26/install_fbcomments_to_tinkerer.html http://te2uma.com/blog/2013/03/26/install_fbcomments_to_tinkerer.html <![CDATA[Tinkerer 1.1以降でFacebookのコメントプラグインを組み込む方法]]>

Tinkerer 1.1以降でFacebookのコメントプラグインを組み込む方法

Tinkerer 1.1 になって、一部のエクステンションが tinkerer-contrib に分割され、同梱されなくなったようです。fbcommentsも対象に含まれていて、従来と組み込み手順を変える必要がありました。

具体的には、 fbcomments.rst に記載されている手順に従います。

まず、適当なディレクトリに移動し、tinkerer-contribのファイル一式をクローンして取得。

cd ~/work
hg clone ssh://hg@bitbucket.org/vladris/tinkerer-contrib

ブログのルートディレクトリ直下に_extsディレクトリを作成し、取得したファイルに含まれるtinkerer-contrib/fbcomments/fbcomments.pyをコピーします(ここでは、~/myblog/にブログファイル一式があるものとする)。

mkdir -p ~/myblog/_exts
cp tinkerer-contrib/fbcomments/fbcomments.py ~/myblog/_exts/

conf.pyを編集し、次のように書き換えます。

vi ~/myblog/conf.py
extensions = ['tinkerer.ext.blog', 'tinkerer.ext.disqus']extensions = ['tinkerer.ext.blog', 'fbcomments']

_templates/page.htmlで、ヘッダー領域にプラグイン用のmetaタグを追加します。【App ID】の部分はFacebookのアプリIDを取得し、適宜書き換えること。

vi ~/myblog/_templates/page.html
{% extends "!page.html" %}

~(略)~

{%- block extrahead -%}
    {{ super() }}
    <meta property="fb:app_id" content="【App ID】"/>
{%- endblock -%}

ブログを再構築すると、記事ページ下部にFacebookのコメント枠が表示されるようになります。

cd ~/myblog
tinker -b

参考文献

(最終更新日:2013/04/09)

]]>
Tue, 26 Mar 2013 00:00:00 +0900
http://te2uma.com/blog/2013/03/26/first_post.html http://te2uma.com/blog/2013/03/26/first_post.html <![CDATA[Tinkererを使ってブログ立ち上げ]]>

Tinkererを使ってブログ立ち上げ

Sphinx (Python製のドキュメント作成ツール)の練習を兼ねて、Sphinxを使ってブログを生成するツール「 Tinkerer 」で、ブログを立ち上げてみました。

少し触った感じ、シンプルで使いやすそう。デフォルトのテーマは、レスポンシブWebデザインにも対応しているようです。

ちなみに「Tinkerer」は何と読むんだろう。「ティンカラー」または「ティンカー」?

]]>
Tue, 26 Mar 2013 00:00:00 +0900