YTsudaのブログ

1985生まれ、男。東京で働くWeb制作者

高速でドキュメントを書くためにMarkdown記法を使う on GoogleDrive

Markdown 業務効率化 GoogleDrive

Markdownとは

エンジニアたちがドキュメントを高速で書くために編み出された記法です。

Markdown記法を使うと「見出し」や「リスト」のようなドキュメントの要素を簡単に記述できるようになります。

例えばMarkdownで以下のように記述すると...

## 小見出し
### もう一つ小さい小見出し
- リスト
- リスト
> 引用文引用文引用文引用文引用文引用文

以下のように出力されます

小見出し

もう一つ小さい小見出し

  • リスト
  • リスト

引用文引用文引用文引用文引用文引用文

さて、今回はこのMarkdown記法をGoogleDriveで使う方法をご紹介します。

StackEditをGoogleDriveにインストール

StackEditというブラウザ上でMarkdownが書けるWebアプリがあります。 これがGoogleDriveのプラグインとしても提供されているので、インストールします。

インストール手順

GoogleDriveにログインし「作成」→「アプリを追加」

f:id:YTsuda:20130730145323p:plain

「StackEdit」で検索

f:id:YTsuda:20130730145333p:plain

「+接続」をクリック

f:id:YTsuda:20130730145339p:plain

GoogleDriveに戻ったら「作成」→「StackEdit」

f:id:YTsuda:20130730145343p:plain

レッツMarkdown

f:id:YTsuda:20130730145950p:plain

Markdownの文法はWeb上に山ほどドキュメントがあるので、それらを参考にして書いてみてください。

文章作成やメモ書きにも便利、Markdown記法 - Web Design KOJIKA17

Facebook likeボタンのimageを編集する with Cakephp

CakePHP Facebook

facebookボタンを押した時にピョンと出てくるポップアップの imageを編集したい。

昨日の日記で書いた og:description の編集方法
に習えば、view内で以下のようにヘルパーのmetaメソッド使えばできると考えられる。

echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/page_image.jpg',
    null,
    array('inline' => false)
));

すでに og:image が指定済みの場合

が、現在のプロジェクトでは反映されなかった。 なぜかと思いLayoutファイルをみてみると、すでに内で og:image のメタタグがハードコーディングされていた

<head>
...
<?php
echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/favicon.png'
));
echo $scripts_for_layout;
?>
...
</head>

この状態でさらに、view内からメタタグを追加した場合、メタタグが内に2つ並ぶことになる。 追加されたメタタグは

echo $scripts_for_layout;

の箇所で展開される。

Likeボタンの仕様

//こっちのタグが優先
<meta property="og:image" content="http://example.com/favicon.png />
//下のタグは反映されない
<meta property="og:image" content="http://example.com/page_image.jpg" />

こうして複数の og:image が並ぶことになった時、 Likeボタンのポップアップでは先に書かれている方を利用するようだ。

要件の再定義

通常はLayoutにハードコーディングされている方を表示し、
viewからmetaタグを挿入した時はそちらを優先したい。

順番を変えてみた

そこで、既存のメタタグと $scripts_for_layout の順番を入れ替えてたところ、うまく動くようになった。

<head>
...
<?php
echo $scripts_for_layout;
echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/favicon.png'
));
?>
...
</head>

Facebook Likeボタンのdescriptionを編集する with CakePHP

CakePHP Facebook

facebookボタンを押した時にピョンと出てくるポップアップの descriptionを編集したい。 そんな時は、以下のようなmetaタグをhead内に書くことで編集できる。

<head>
    ...
    <meta property="og:description" content="A description to be used in the share dialog." />
</head>

CakePHPでmetaタグを埋め込む方法

さて、この仕組みをcakeで利用する場合、 それぞれのview内でHtmlヘルパーを使ってcssやjsをhead内に埋め込むようなやり方で metaタグを埋め込みたいという欲求に駆られる。

$this->Html->css('hoge', null, array('inline' => false));

こんな感じのやつ。

Htmlヘルパーのmetaメソッドの使い方

そこで、Htmlヘルパーにmetaメソッドがあるんじゃないかと思って調べたら、ずばりそのものがあった。 descriptionのmetaタグを出力したい時には以下のような形で良いらしい。

echo $this->Html->meta(
    'description',
    'A description to be used in the share dialog.'
);

ただ、"og:description"のような独自のmetaタグを入れたい時、このメソッドには配列でデータを渡す必要があるので、最終的には以下のようなコードになった。

echo $this->Html->meta(
    array(
        'property' => 'og:description',
        'content' => 'A description to be used in the share dialog.'
    ),
    null,
    array('inline' => false)
);

参考

HtmlHelper - CakePHP Cookbook v2.x documentation

PythonとcronでURLの死活監視

Python

指定したURLが生きているかどうか監視する必要に迫られたため、なるべく手軽に導入・管理できるものを探したところ、以下の方法に行き着きました。
環境は Ubuntu-12.04 です。

要件

  • 監視対象のURLリストを外部ファイルで入力したい
  • ステータスコードが 200->404 に変化した時と 404->200 に変化したとき、両方でアラートを出したい
  • アラートはメール送信で
  • できればpythonがいい
  • チェック間隔は1時間ぐらい

Site-Monitor

上記の要件で良いツールがないか探していたところ、githubに良さそうなスクリプトがありました。これを使うことにします。

sanbornm/Site-Monitor - github
https://github.com/sanbornm/Site-Monitor

構築

ということで構築を始めます。

Site-Monitorをclone

上記のリポジトリを任意のディレクトリにcloneします。 今回の例ではホームディレクトリに

$ cd /home/my-name
$ git clone https://github.com/sanbornm/Site-Monitor.git

cloneしてきたディレクトリ内のsitemonitor.pyが実行するスクリプトです。

実行用のディレクトリを作る

実行用のシェルスクリプトや設定ファイル等を置くディレクトリを作りました。

$ cd /home/my-name
$ mkdir site-monitor-worker

監視対象のURLリストを作る

監視対象とするURLのリストを書いたリストのファイルを作ります。改行区切りでURLを一つずつ書くフォーマットになっています。

$ cd /home/my-name/site-monitor-worker
$ touch checklist.txt

checklist.txtの中身

http://example.com/
https://example.com/
http://example.com/blog/110
http://example.com/blog/999999999

実行用のシェルスクリプトを作る

sitemonitor.py は引数が多いスクリプトなので、sitemonitor.pyを叩くシェルスクリプトを別に作って同じディレクトリに置きました。

$ cd /home/my-name/site-monitor-worker
$ touch check-urls.sh

check-urls.shの中身

/home/my-name/Site-Monitor/sitemonitor.py \
-g \
-s 'from-user@gmail.com' \
-u 'from-user@gmail.com' \
-p 'password' \
-d 'to-user@example.com' \
-f '/home/my-name/site-monitor-worker/checklist.txt'

設定内容

アラートのメールをgmailから送るように設定しました。

  • -g アラートメールをgmailから送るフラグ
  • -s アラートメールメールの送信主
  • -u gmailのログインID
  • -p gmailのログインパスワード
  • -d アラートメールの送り先
  • -f 監視対象URLリストへのパス

cronの設定

毎時15分に死活チェックをするよう設定しました。

$ crontab -e

crontabの設定内容

15 * * * * /home/my-name/site-monitor-worker/check_urls.sh > /dev/null 2>&1

通知のロジック

1時間毎にチェックを行い、前回チェック時のステータスと違っていたらアラートメールが飛びます。

Nginx設定ファイルをデバッグするため、任意の変数をログに出力する方法

Nginx

Nginxの設定ファイルでは変数やif文を使用できる。
その変数をデバッグしたい時にログに出力する方法のメモ。

新しいログフォーマットを作る

/etc/nginx/nginx.confの httpブロック内に log_formatの設定を追加する。

http{
    log_format debug_val_format "$debug_val";
    ...
}

※注
include /etc/nginx/sites-enabled/*; よりも前に追加すること

ログを出力する

/etc/nginx/sites-available ディレクトリにある目的の設定ファイルで、 serverブロックに以下の設定を追加する。

$hogehogeという変数を確認したい時の例。

server{
    ...
    set $debug_val "$hogehoge";
    access_log /var/log/nginx/debug_val.log debug_val_format;
    ...
}

ログの確認

設定後 force_reload。 サイトにアクセスすると /var/log/nginx/debug_val.log に $hogehoge の内容が書きだされる。

もっと楽な方法がありそうな気はする。 httpヘッダーに出してしまうとか。

参考

Log - Nginx http://wiki.nginx.org/HttpLogModule

groongaのfilter検索条件でスペースが使えない？

groonga 解決済

groonga で select をする際の条件指定(SQLでいうWHERE句)には、
query と filter という2種類の方法がある。
今回は類似検索を使いたいので、filter を使うことにした。

そこで、ドキュメントのこのあたりを参考にしつつ、
以下のようなクエリを投げてみるがどうもうまくいかない。

$ groonga hoge.db select hoge_table --filter '_id == 1'

以下のようなエラーメッセージが出る

"invalid table name: <==>"

同等の条件をquery方式で指定してみると、こちらは正しくデータを取得できた

$ groonga hoge.db select hoge_table --query '_id:1'

よくわからないので、いろんなクエリを試していたところ、
filter条件文のスペースを消したら動くようになった

$ groonga hoge.db select hoge_table --filter '_id==1'

解決

スペースをエスケープしたら解決した

$ groonga hoge.db select hoge_table --filter '_id\ ==\ 1'

ちなみに、groonga の対話モードからクエリを投げたら、
エスケープしなくてもselectに成功した。

$ groonga hoge.db 
> select hoge_table --filter '_id == 1'

解決2

当記事へのコメントで教えていただいた通り、以下のように
二重のクォーテーションで囲むとエスケープしなくても成功するようになった。

$ groonga hoge.db select hoge_table --filter '"_id == 1"'

これで解決する理由は以下のとおり、引用させていただきます。

ひとつずつスペースをエスケープするよりは'"_id == 1"'という感じで「'"..."'」というスタイルが書きやすいかと思います。これだと、シェルが解釈した後に外側のシングルクォートがとれて「"..."」だけが残って、groongaが解釈した後は内側のダブルクォートがとれて「...」だけが残ります！

一応、groongaのバージョン

"groonga 3.0.3 [linux-gnu,x86_64,utf8,match-escalation-threshold=0,nfkc,mecab,msgpack,zlib,lzo,epoll]"

ubuntuのバージョン

No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 12.10
Release:        12.10
Codename:       quantal

スマホ版webサイトの下部固定バナーをDFPで出したい

未解決 HTML CSS DFP

もっぱら苦戦中の案件。 現在関わっているサイトはバナー広告の出力にDFPスタンダードを利用している。

このサイトをスマホで見た時に、ウィンドウ下部に固定でバナーを掲載したい。 position:fixedされていて、スクロールしてもついてくる、よくあるやつ。

問題はスマホは機種によって画面の横幅が違うことだ。

画面サイズにあわせて広告枠の横幅もフレキシブルに決定し、 クリエイティブはimgタグの style で width:100% として、横幅ぴったりに表示されるようにしたい。

しかし、DFPの広告ユニットは横幅を決めないと作れないし、 クリエイティブはアップロードしたままのサイズで掲載されてしまう。

DFPのクリエイティブを選ぶ箇所で「サードパーティ」を選んで、ごちゃごちゃ書けば できるのかもしれないが、非エンジニアがバナーを更新できなくなってはDFPを使う意味がない。

どうしたものだろうかと思いつつ英語でググる。

3/16日追記

あきらめた＼(^o^)／

画面下部に中央寄せで配置し、解像度の大きいスマホの場合は左右がちょっと空く形になった。 他のサイトのバナーを見てもほとんど隙間あいてるんですよね…