月別: 2015年10月

HTMLソース中の改行が無視されるけど半角空白になってしまって困るという件

先週、このブログを Markdown形式で書き始めて気になっていたことだけど、
HTMLのソース中の改行って表示上は無視されるんだと思っていたんだが、
そうではなく空白文字として扱われてしまう。

どういうこと？

例えば、以下のようなコード。
表示すると2つ目の段落にはソースコードの改行部分で空白が間に入ってしまう。

<div>
今日はとってもよい天気でした。
</div>
<div>
今日はとっても
よい天気でした。
</div>

Firefoxでの結果

もちろんこれは、単語を空白で分かつ英語の文書を書く場合は
妥当な挙動だということは分かる。
例えば以下で、改行が完全に無視されてしまって、
“Internetencyclopedia” とか “non-profitWikimedia” になるのは困るもの。

<p>
Wikipedia is a free-access, free-content Internet 
encyclopedia, supported and hosted by the non-profit
Wikimedia Foundation.
</p>

英語と日本語じゃ、適切な挙動が違うってことだね。

なんとかならないか

ブラウザがなんとかしてくれないものか。
日本語か英語かを判断して、適切な挙動(１つの空白にするか、完全に無視するか)
をしてれればよいのにと思って、
各ブラウザで試したり、CSSをいじってみたりしたけどダメ。
現状では各ブラウザ理想的な挙動にはなっていないようだ。
空白があいてしまう。

検索もいろいろしてみた結果、Firefox の Bugzilla に同様の指摘が上がっていた。

そこからリンクされている CSS Text Module Level 3 というのが、
まだドラフト版だけど、まさにこの挙動について規定されていた。

4.1.2 Segment Break Transformation Rules
4.1.2 区分分断の変換規則
区分分断(以下、単に分断と記す)は縮退可能であり、分断の前後の文脈に依存して、
一個のスペース(U+0020)に変換されるか、または除去される。

  • 分断の[前、後]の文字のいずれもが、次のいずれも満たすならば、分断は除去される：
    • 東アジア圏の字幅プロパティは[F,W,H (Aではない)] のいずれかである、かつハングルでない


CSS Text Module Level
3
日本語訳 – CSS Text Module Level 3 （日本語訳）

まだドラフトだから、各ブラウザまだ対応してないのかなぁ。

雑感

そもそも、HTMLの段落部分は、ソース上でも改行せずに書いたらいいやんけ。
でも行分けて書いておいた方が、文の順序の入れ替えとか楽(特にvimだと)なので、
いやだけど、しようがないのかなぁ。。。

あとは、
最近は HTML を直接エディタで書くことも少なくなってきて、
Markdown や Doxygen のコメント形式などから変換してHTMLが出力されることが
ほとんどなので、
その変換の過程で、段落内の改行は取っちゃえばいいのかね。

現状だと、Markdownやdoxygenコメント中の改行は、
htmlソース中でもそのまま改行文字として残るみたいなので、
結果1文字空いてしまうことが起こってしまうんだけど。
この変換プログラムぐらいは自分でいじれそうだから、
自分のブログなんかはそういう風に改造してしまうってのが
当面の策かなぁ。

すっきりしないですが。

Windowsでインストーラーなしのソフトをどこに置くか

yamy とか PuTTY とか、
インストーラーがついていなくて自分で解凍して適当なディレクトリに配置する
ようなソフトウェアを、Program Files の中に手動で置いていたけど、
それだと不都合があることがわかってきたのでまとめておく。

これらのプログラムは、設定変更されたときに実行ファイルと同じ場所に
設定ファイルを書き出すらしい。
どうも Program Files の中のファイルは権限的に書き込みできないようなので、
反映しない。エラーも出ない。
自分で置いたディレクトリなのに…。

環境

  • 環境: Windows 7
  • ユーザーアカウント制御の設定: 既定 – プログラムがコンピューターに変更を加えようとする場合のみ通知する (上から2番目)
  • yamyなど、インストーラーを持たない、かつ、実行ファイルと同じディレクトリのファイルに書き込みをしようとする場合

調査

yamy の設定ファイル を例に説明する。

yamy には設定を選べるUIがあって、これを編集するUIもある。

yamyの選択メニュー

yamyの選択肢設定画面

ただ、現状、これに追加しようとしても反映しない。
おそらく c:\Program Files\yamy\yamy.ini に書き込まれるはず。
これの権限を調べると、一般ユーザーには「読み取りと実行」しかついていない。
このせいかなぁ。
Program Files以下の権限

ためしに c:\ProgramPortable\ 以下に入れてみる。
このディレクトリは、単に c:\ 以下に何も考えずにディレクトリを作っただけ。
入れ方は、ダウンロードフォルダ内で zip を展開して、
できたディレクトリを「移動」した。

あ。うまくいった。
Authenticated Users に変更がついているからかな。
ProgramPortable以下の権限

おそらく、c:\ の権限より、 c:\Program Files の権限の方が
厳しいものになっているからだと思う。

Windows 7新時代：第8回　Windows XP → 7移行のアプリケーション・トラブル解決法 (1/2) – ＠IT
これのケース3に書かれていることだと思う。

場所は関係なくて、結局アクセス権限の問題なんだろうけど、
まあこれでうまくいったし、
Program Filesの中に入れてそれぞれ権限考えるのはちょっと面倒なので、
手動で入れるものは c:\ProgramPortable に入れるようにしよう。

もちろんこのPC使うのが自分だけだから、あまり考えずにそうしているわけだけど。
そもそも Program Files 以下に設定置くようなプログラムは、
マルチユーザーでは使えないのか。
だったら、もういっそ個人ディレクトリの下に置いたほうが正解なのなかぁ。

とりあえず、以下の方針で行こう。

  • インストーラーがついているソフトはそれに従う。 Program Files など
  • インストーラーがついてないものは、c:\ProgramPortableに入れる
  • インストーラーがついてないものは、c:\Users\ユーザー名\ProgramPortable に入れる

WordPress Markdownプラグインで勝手に改行される問題

WordPressを設置して、記事を Markdown で書くために、
Jetpackを入れて、その中の Markdown モジュールを有効にした。

ただそれだと、改行の挙動が想定と違っていた。
通常の Markdown だと、(空行でない) 単なる改行は無視されるはずと思っていたが、
<br/> に変換されてしまっている。

これをなんとか通常の挙動にしたい。

起こっていること(想像)

以下は、ちゃんと調べずに、挙動からの推測で書いている。

WordPressは、DB上で各記事を「テキスト」編集の形式のまま保持している。
それを出力時に加工して出力している。
通常は、空行で区切って段落(<p>)とするのと、段落内の改行を<br>に変更する。
wpautop というらしい。

markdownプラグインを入れた場合は、
markdown → wpautop という順番で処理され、
markdownの方もそういう加工が後段に入ることは意識してあるので、
あえてmarkdownの方では <p>タグをつけていない。
おそらくこの挙動は、途中からmarkdownプラグインを導入した場合でも、
過去のエントリを崩さないためだと思う。

ただ、今回は最初から全エントリをmarkdown形式で書いていくので、
この辺、無視してしまってもよい。

対応方法

対応方法としては、

  1. markdownの方で<p>タグも出力するようにして、wpautop は完全に無効にする
  2. markdownの方は現状のまま(<p>タグがつかない)、wpautopで<p>タグだけつける

が考えられるけど、調べたら 2 の方法でやっているブログが見つかったので、
とりあえずはその方法で行う。

やってみる

テーマは Twenty Fifteen を使っているので、
WordPressの管理画面 ＞ テーマの編集 から
functions.php を選んで、以下の記述を追加する。

// 記事の自動整形を無効にする
// https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpautop
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

これだと、<p>～</p> も <br/>も自動付与されなくなる。
結果 jetpack の markdown では、<p> までも付かなくなってしまった。

次に、<br> の処理だけを止めるようにする。

// 記事の自動整形のうち、<br>の付与だけをやめる。
// http://blog.sfpgmr.net/entry/%E6%98%A8%E6%97%A5%E3%81%8B%E3%82%89markdown%E8%A8%98%E6%B3%95%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B
function wpautop_nobr($txt) {
    return wpautop($txt, false);
}
remove_filter('the_content','wpautop');
add_filter('the_content','wpautop_nobr');
remove_filter('the_excerpt','wpautop');
add_filter('the_excerpt','wpautop_nobr');

これだと期待どおり、<p>がついて<br>がつかないという動作になった。
とりあえずはこれでOk。

残る課題

今回、テーマの functions.php に追加したが、
本来テーマによらない挙動のはずなので、
もっと適切な(テーマによらない)場所に記載するのが適切だと思うのだが、
そこがどこなのか。

ブログ始めました。WordPressのセットアップ。

主に勉強したことをまとめてアウトプットしていくことが大事だと思って、ブログを始めようと思います。

レンタルサーバに WordPress をセットアップしたので、そのメモ。

簡単なので、メモ残すこともなかったぐらいだったけど。

ゴール

WordPress でブログを立てる。

要件

  • サーバ: さくらのレンタルサーバ
  • ドメイン: ムームードメインで取得した entosen.tokyo
  • サービスURL: http://www.entosen.tokyo/b/
  • 同ホストで別ドメインのサービスもするかもしれないので、ドキュメントルートはサブドメインを切る形でやる
  • 記事はmarkdownで書く

ブログ以外のサービスも同じドメインでやるかもしれないと思って、
ブログは /b/ 以下に作ることにした。

やったこと

ドメインの設定

ドメインはすでに取得済みだったので、設定から。

“entosen.tokyo” を解決するネームサーバはここ(さくらのDNS)だと設定する。

参考

ドメインを利用(他社で取得・管理のドメイン)｜さくらインターネット公式サポートサイト

  • ムームードメイン＞ネームサーバ設定変更＞「GMOペパボ以外のネームサーバを使用する」
    • ここで、さくらのレンタルサーバで指定されているDNSサーバを登録。

確認

反映するまでに時間がかかるが、
反映されれば whois コマンドで以下のように出るはず。

% whois entosen.tokyo
Domain Name:ENTOSEN.TOKYO
...省略...
Name Server:NS1.DNS.NE.JP
Name Server:NS2.DNS.NE.JP
...省略...

OK。

さくらのサーバのDNSの設定(Aレコード)

  • さくらのサーバコントロールパネル＞ドメイン設定＞新しいドメインの追加
  • 他社取得したドメインを移管せずに使う・属性型JPドメインを使う（さくら管理も含む）
  • ドメイン追加に進む
  • ドメイン名に取得したドメイン名 entosen.tokyo を入力

これで、entosen.tokyo と www.entosen.tokyo が DNSに登録されるらしい。

確認。

さくらのネームサーバー上を確認

>nslookup entosen.tokyo ns1.dns.ne.jp
サーバー: ns1.dns.ne.jp
Address: 210.188.224.9

名前: entosen.tokyo
Address: 219.94.129.220

>nslookup www.entosen.tokyo ns1.dns.ne.jp
サーバー: ns1.dns.ne.jp
Address: 210.188.224.9

名前: entosen.tokyo
Address: 219.94.129.220
Aliases: www.entosen.tokyo

デフォルトのネームサーバーで確認。反映には時間がかかる。
>nslookup entosen.tokyo

権限のない回答:
名前: entosen.tokyo
Address: 219.94.129.220

>nslookup www.entosen.tokyo

権限のない回答:
名前: entosen.tokyo
Address: 219.94.129.220
Aliases: www.entosen.tokyo

ブラウザでも確認

バーチャルホストの設定

同じレンタルサーバで別ドメインのサービスもするかもしれないので、
entosen.tokyo は、バーチャルドメインとして別ディレクトリに
ドキュメントルートが来るように設定する。

  • さくらのサーバコントロールパネル＞ドメイン設定＞entosen.tokyo の「変更」
  • 「マルチドメインの対象のフォルダをご指定ください」 → “/entosen” を指定。

これで、 ~/www/entosen がドキュメントルートのディレクトリになる。

WordPress のインストール

これに従ってやったら、簡単にできたわ。

WordPressでブログを始めよう！｜さくらインターネット公式サポートサイト

WordPress の設定

ざっと見て、大事そうなところは設定した。

  • 設定＞一般設定
    • WordPressアドレス → http://www.entosen.tokyo/b に (wwwを追加)
    • サイトアドレスも同様
    • 日付は YYYY-MM-DD 形式
    • 時刻フォーマットは24時間形式
  • 設定＞パーマリンク設定
    • パーマリンクは 「投稿名」に。

パーマリンク名は、間にカテゴリを入れようかと迷ったけど、
やはりカテゴリは将来変えたくなることもあるだろうと思って、
投稿名だけで行くことにした。

WordPressをインストールしたら最初に設定しておきたい22項目 ｜ ワードプレスの使い方！初心者めっちゃ入門ガイド【ハイパー】

akismetプラグインの設定

[WordPressコメントスパムを排除するプラグイン『Akismet』2014版 ｜ ワードプレスの使い方！初心者めっちゃ入門ガイド【ハイパー】]
(http://wordpress.siyouyo.com/plugin/1290/)

WP Multibyte Patch の有効化

Markdownで投稿できるように
→ JP Markdown プラグインを使う。

https://ja.wordpress.org/plugins/jetpack-markdown/

あれ!? markdownでは、普通に改行した場合は改行にならないと思ってたんだけど、
なんか改行されてるね。
これについては 別エントリで。