フォーカスが input か textarea にあるときはその最後にタイムスタンプを挿入し、それ以外ではタイムスタンプをプロンプトで出すブックマークレットを書いてみた。
シンプルな日時のものは、「2010-11-18 0:19」 という表示。
ISO 8601 は、「2010-11-17T15:20:17.694Z」 のような表示。
ISO 8601 版は、toISOString を使っているので、ECMAScript 5 に対応している Firefox, Google Chrome など最近のブラウザでのみ動作する。(IEは9以降?) タイムゾーンは、ECMAScript 5 の仕様で UTC のはず。ただしブラウザによってミリ秒があったりなかったり表記が変わる。
シンプル版
ブックマークレットの内容
(function(){
var d = new Date();
var dt = d.getFullYear() + '-'
+ (d.getMonth()+1) + '-'
+ d.getDate() + ' '
+ d.getHours() + ':'
+ d.getMinutes();
var e = (document.activeElement || window.getSelection().focusNode);
if (e && e.tagName.toLowerCase()=='textarea' || e.tagName.toLowerCase()=='input') {
e.value = e.value + '' + dt;
} else {
var x = prompt('', dt);
}
})();
ブックマークレット→ timestamp
ISO 8601 形式
ブックマークレットの内容
(function(){
var d = (new Date()).toISOString();
var e = (document.activeElement || window.getSelection().focusNode);
if (e && e.tagName.toLowerCase()=='textarea' || e.tagName.toLowerCase()=='input') {
e.value = e.value + '' + d;
} else {
var x = prompt('', d);
}
})();
ブックマークレット→ timestamp
サーバ側に rsync が入っていなかったので lftp でミラーリングアップロードしてみる。
チュートリアルを参考にしながら書いてみた。
とりあえず、
- 実行時のログを取っておく
- lftp のコマンドはまとめる
という方針で。
ユーザ、パスワード、ホスト、ディレクトリなど変えてあります。
#!/bin/bash
DATE=`/bin/date '+%Y%m%d-%H%M'`
/opt/local/bin/lftp -f "./lftp_commands" 1> "./logs/mirror_$DATE.log" 2> "./logs/error_$DATE.log"
open -u username,password sftp://example.com/
mirror -R --only-newer --verbose -X .DS_Store /path/to/local_dir/ /path/to/remote_dir
close
quit
20101115追記
3.0 へのアップデートが来ていたので入れてみたら、ボタン類が変わっているので別のプラグインを探すかも。
20101115追記ここまで
シンタックスハイライトをするためのプラグイン SyntaxHighlighter Evolved を導入。
処理の違いなどで、似たようなプラグインがいろいろあるのだけど、
- JS で処理がいい
- 多くの言語に対応しているもの
- プレインテキストをポップアップか切り替えで表示が出来るもの
というあたりで選んだ。
対象部分を <pre>
ではなく、 […] で書くタイプのプラグインだと、プラグインが外れたときにおかしな表示になったりはするけど、< や > などをエスケープしてくれるという利点があるので、そちら優先で。
ハイライトに対応している言語のリスト
Brush name |
Brush aliases |
ActionScript3 |
as3, actionscript3 |
Bash/shell |
bash, shell |
ColdFusion |
cf, coldfusion |
C# |
c-sharp, csharp |
C++ |
cpp, c |
CSS |
css |
Delphi |
delphi, pas, pascal |
Diff |
diff, patch |
Erlang |
erl, erlang |
Groovy |
groovy |
JavaScript |
js, jscript, javascript |
Java |
java |
JavaFX |
jfx, javafx |
Perl |
perl, pl |
PHP |
php |
Plain Text |
plain, text |
PowerShell |
ps, powershell |
Python |
py, python |
Ruby |
rails, ror, ruby |
Scala |
scala |
SQL |
sql |
Visual Basic |
vb, vbnet |
XML |
xml, xhtml, xslt, html, xhtml |
Ogg については、Wikipedia やサイトに説明がある。
Mac OSX (10.6) と MacPorts 環境で、Ogg のエンコーダのインストールと変換をしてみた。
$ sudo port install vorbis-tools
$ oggenc hoge.aiff
ソースが MP3 からの変換には対応していないけど、AIFF と WAV は確認。
OS X で再生するためには、ここにある、QuickTime コンポーネントをインストールするか、VLCメディアプレーヤーで再生する。
html5 では属性(attribute)が真偽値の場合には属性値の省略が出来る。
値に true, false を指定することは出来ないので、値を false にするときは属性を書かない。
以下はすべて同じ。
<label><input type=checkbox checked name=cheese disabled> Cheese</label>
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>
2.5 Common microsyntaxes — HTML5より引用:
The values “true” and “false” are not allowed on
boolean attributes. To represent a false value, the attribute has to
be omitted altogether.
Here is an example of a checkbox that is checked and disabled.
The checked
and disabled
attributes are the
boolean attributes.
<label><input type=checkbox checked name=cheese disabled> Cheese</label>
This could be equivalently written as this:
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
You can also mix styles; the following is still equivalent:
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>
サイドバーで使うようなプラグインで、ウィジェットがなく関数のみが提供されているものは、自分でウィジェット化しておくと、管理画面から取り外し出来るので便利です。
関数をラップするだけだったら、ほとんど Widgets API « WordPress Codex のサンプルそのままで、ウィジェット名とウィジェットの出力部分を変更するだけです。
ということで、関数だけでウィジェットがない Compact Archives プラグインをウィジェットにしてみます。コード中のcompact_archive('numeric');
は、Compact Archives 提供のの関数です。
テーマの functions.php
class MyCompactArchive extends WP_Widget {
function MyCompactArchive() {
parent::WP_Widget(false, $name = 'MyCompactArchive');
}
function form($instance) {
$title = esc_attr($instance['title']);
echo '<p>';
echo '<label for="' . $this->get_field_id('title') . '">' . _e('Title:');
echo '<input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></label></p>';
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}
function widget($args, $instance) {
extract( $args );
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if ($title) {
echo $before_title . $title . $after_title;
}
echo '<ul class="compact-archives-widget">';
compact_archive('numeric');
echo '</ul>';
echo $after_widget;
}
}
add_action('widgets_init', create_function('', 'return register_widget("MyCompactArchive");'));
以前書いたものをテンプレートの扱いから見直し。WordPress で「フロントページ」を固定ページにして、投稿をサブディレクトリにまとめたときのテンプレートなどについて。
WordPress でサイト全体を管理しつつ、トップページ(例: www.example.com/)はサイトのトップとしてバナーや特集へのリンクなどを載せたくて、いわゆるブログ的な部分はサブディレクトリ(例: www.example.com/blog/)にまとまっているようにしたい。
フロントページを固定ページにした時に指定するための、「blog」、「top」 というページをあらかじめ作成し、「管理画面」>「設定」>「表示設定」から「プロントページの表示」を変更。
「フロントページの表示」を「固定ページ」にして、「フロントページ」に先ほどつくった「top」、「投稿ページ」に「blog」に指定。
このときのコンディショナルタグやテンプレートは、
|
「top」ページ (=フロントページ) |
「blog」ページ |
is_home() |
false |
true |
is_front_page() |
true |
false |
is_page |
true |
false |
テンプレート階層 |
ページと同じ。 pagename.php > page-slug.php > page-id.php > page.php |
home.php > index.php |
WordPress で、is_home() は投稿ページのホームディレクトリにいるかの条件で、is_front_page()はサイト全体についての条件。
「blog」ページは「Page」でつくるけどページ扱いはされない。is_page は false になり、「page-blog.php」を作っても適用されない。URLを決めるためのプレイスホルダーと考えればいいのか。
あとはブログ部分のURLを統一するために「パーマリンク設定」で、「/blog」を挟んでおく。
例えば、
/blog/archives/%post_id%
/blog/?p=%post_id%
など。
WordPress で body のクラスに category-hoge とか、single とか paged とかつける方法。
もっと単純なやつを自作して使っていたけど、2.8以降はテンプレートタグで。
テンプレート内で、body の部分を
<body <?php body_class(); ?>>
に置き換えれば、適宜クラス名をつけてくれる。
サイトの構成によって違うだろうけど、ホームだと、
class="home blog"
親があり子があるページだと、
class="page page-id-35 page-child parent-pageid-33"
というような感じで出てくる。
書き出されるクラスは多いので一覧はCodexを参照。
自分でクラス名を追加したいときは引数に指定するか、フィルターで。
直接指定
<?php body_class('class-name'); ?>
配列で指定
<?php $classes = array('hoge', 'fuga'); ?>
<body <?php body_class($classes); ?>>
フィルターも用意されている。
add_filter('body_class','my_class_names');
function my_class_names($classes, $class) {
//略
}