2012年12月27日木曜日

TEDの字幕は解決したけどfuluはダメだの巻

TEDが見られるようになったのに気を良くして、fuluもお試し期間を利用して字幕が読めるか確かめてみました。同じ字幕だからうまく行くだろうというのは、「皮相浅薄」で事はそう簡単ではありませんでした。有難いことに、こちらに解決の記載がありました。



$ sudo apt-get install ttf-arphic-uming
$ cd /usr/share/fonts/truetype/arphic
$ sudo cp ../takao-mincho/TakaoMincho.ttf uming.ttc

導入前




uming 導入後




uming 上書後




但し linux-mint をインストールした直後にこの作業をすると文字化けは治りませんでした。文字化けを回避するには、すべてのアップデートを導入した後にこの作業を実施しなければなりませんでした。もちろん、chromeの flush のプラグインの PPAPI は無効にしました。ちなみに、アップデートを導入する前にこのフォント入れ替え作業を行なってしまった場合でも、sudo apt-get remove ttf-arphic-uming してから再度導入すればちゃんと表示されました。

ttf-arphic-uming は中国語用のフォントらしいのですが、これで文字化けは少し発生するものの字幕が表示されるということは、中国語用フォントというのは日本語フォントを包含しているものなのでしょうか。また、中国語のフォントを導入しないと見られないのは flush のせいなのか、fulu の字幕設定に使っているフォントに問題があるのかも謎です。fulu から渡されるフォント情報が、見るシステムによって変わるとも思えないので、flush の実装がおかしいのでしょうか。また、アップデートモジュールの何が影響しているのかも不明です。お呪いのように、教えていただいた方法で文字化けは解決しましたが、内容の理解は全くできず「皮相浅薄」です。フォント関係の知識を深めないといけませんね。

2012年12月19日水曜日

電源管理とリモートデスクトップ再び

先日、windows8の電源管理でスリープを妨げていた srvnet サービスを電源スリープより優先順位を下げてスリープできるようにしたが、「鹿を追う者は山を見ず」で、スリープさせることにこだわりすぎて、本来、自分がやりたかったことは実現できていませんでした。



  1. テレビ録画予約のタイミングで目覚めて、録画が終了したらスリープさせたい。
    ⇒1時間に1回位のタイミングで意図せず目覚めてしまう。
    ⇒リモートデスクトップからは録画に失敗してしまう。

  2. 遠隔操作したい時に目覚めさせ、リモートデスクトップで操作したい。
    ⇒1時間に1回位のタイミングで意図せず目覚めてしまう。
    ⇒リモートで録画再生しても、操作内容がテレビ画面に繁栄されない。

  3. リモートデスクトップからスリープさせたい。
    ⇒RDP接続は快適なものの、メニューからスリープを選べない。

  • リモートから録画できなくなった原因と対処


    録画機に設置してあるスマートカードは管理者権限のユーザ1人しか利用できないらしい。RDPでリモート接続すると二重ログインの扱いとなってしまい、スマートカードにアクセスできずに録画に失敗していたようです。

    対処療法ですが UltraVNC を導入してみると、リモートの操作がテレビ画面にそのまま反映され、テレビ視聴、録画も問題なく行うことができました。 また、リモートよりスリープやシャットダウンの指定もできます。そもそも、RDPとVNCは、仮想画面と実画面という根本的な差異があるのですね。しかし、RDPの快適さになれた後はVNCの重さが気になります。



    そこで、情報検索中に出会った chrome のリモートデスクトッププラグインを試してみることにしました。これは、VNCと同じで実画面の遠隔操作をブラウザ内で実現したものです。これが意外や本家のVNCよりレスポンスが良好で、VNCが紙芝居的に動くの対して少しジャミジャミするくらいで表示されます。おまけに remmina でのリモート接続ではうまくいかなかった音声も聞こえてきます。リモート接続で動画をみるのが目的ではありませんが、反応が良いのには越したことがないので、これを利用することにしました。



    ただし、RDPやVNCは、録画機がスリープ状態であっても、接続にいくと目覚めてくれますが、chrome のリモートデスクトップで接続した場合は、目覚めてくれませんでした。この対策については、次の電源制御と絡めて対応しました。

  • 意図しないタイミングで目覚める件の対処


    録画サーバがスリープから意図しないタイミングで目覚める件は、我が家にある携帯、複合機、妻のMACなどから接続要求が発せられているのではないかと推測するのですが、ネットワークをモニタして解析する力がないので、一つずつ電源を落として数時間様子をみるくらいしか原因究明方法が思いつきません。時間もかかるし、なんと言ってもぉ妻様まで巻き込むことになるので、こんな実験は不可能です。

    そんなときに出会ったのが、Magic Packet というスリープを解除させる専用の通信コマンドです。パソコンがWakeOnLANという機能に対応している場合、ネットワーク接続に対して目覚めさせる方法とMagic Packetだけに反応して目覚めさせる方法の2種類が選択できるらしいのです。そこで、録画サーバをMagicPacket だけに反応するように設定しました。



    リモートマシンからは Magic Packet 送信ツール(powerwake)で解除させることにしました。

    $ sudo apt-get install powerwake
    $ powerwake xx-xx-xx-xx-xx-xx
    

    サーバーのMACアドレスは、検索>cmd>ipconfig で表示される物理アドレスで参照しました。
    $ ipconfig/all|more
    

    ひと手間増えましたが、意図せず勝手に目覚めを繰り返すよりは、はるかに気持ちが楽になりました。

    以上で、「録画のタイミングでの起動、停止」と「遠隔操作が必要な時に起動、停止」が行え、勝手に目覚める問題も解消しました。chrome のリモートデスクトップを導入しなければ、気づかなかったかもしれないので「棚から牡丹餅」な気分です。



2012年12月15日土曜日

.face 撮り直したい!

imac で mint を使っていますが、最近はインストールする際に isight を認識してポートレートを作成してくれます。いい顔して撮ったつもりなのですが、少ない髪の毛がちと乱れているのに気づいて撮り直したくなりました。どうやら、ホームディレクトリの .face というファイルに保存されているようです。

インストールの際に自動で認識するくらいだから標準にインストールされるアプリがあるのだろうと思い、メニューの中を探してみても、どうも該当するものが見当たりません。ubuntu、imac、isight、.face などのキーワードでネットで検索してもどうもしっくりしたものに当たりません。

しばし悩んだ後に、最近は skype などでデレビ電話(古い言葉)するのが一般的なのを思い出して、ubuntu、webcam などのキーワードで検索してみました。古い記事はあっても、最近は悩んでおられる方は少ないみたい。話題にもならない小ネタに悩む自分に相変わらずガックリです。

でも、どうやら cheese やら motion やらの文字を見つけ、はたと思い出しました。そう、はるか昔(1年前)、この imac を妻から譲り受けたときに 、同じ事に悩んで cheese を見つけてインストールしたことを。物忘れって怖いですね。そう言えば、まだ三十路だった頃、半年くらい前まで家に遊びに着ていてくれた後輩から電話がかかって、名前も存在も思い出せずに「ごめんなさい」といって電話切ったことがありました。その後、1年くらいしてから、電話の主は後輩だったのを思い出して落ちこみました。それに比べれば軽いです。

Mint でのログイン画面のポートレートの入れ替え方法は、
メニュー>システム管理>ユーザアカウントから写真をクリックして、写真を選択します。トリミングの機能までついています。どうせならココで isight も起動してくれればと思います。ちなみに、ここで写真を入れ替えても.face は更新されませんが、画面ロック時の画面はユーザアカウントで指定した写真が表示されてます。.face の謎は深まりこそすれ、解決されることはありませんでした。



しかし、波平さんって54歳だったのかぁ〜。タラちゃんのおじいちゃんだもんね。。。。

2012年12月14日金曜日

すうどぅぁ〜ず

昔、「スーダラ節」というのが流行ったことがあるらしい。既に人生後半を泳いでいる私が子供だった頃に、昔流行った曲としてテレビで紹介されていました。子供ながらに、その恐ろしいばかリの晴れっぷりに驚いた覚えがあります。その後、テレビの対談番組でこの歌を歌っていた植木等という人をみましたが、すごく生真面目で硬い感じのする人でビックリした覚えがあります。「あの声で蜥蜴食らうか時鳥 」です。(ちと違うか。。)



見かけによらないといえば、usermod コマンドです。ubuntu12.10での強制断捨離 事件以来、快適な環境探し地獄に陥っておりますが、virturalbox をインストールした際も「usb を有効にするにはこれをしなさい」指示に従い、グループにユーザ追加を行いました。



昔育ちのですので、直接 /etc/group を触ろうかとも思いましたが、最近は etc 周りも色々複雑になっているので、コマンドを調べて追加しました。

# groupadd vboxusers
# usermod -G vboxusers naoki

この時は、これで無事エラーも出なくなり事無きを得ました。しかし、後日 mint のアップデートマネージャから更新がある旨の連絡を受け、ダブルクリックしてパスワードを入力したあと全く反応がなくなりました。gui が壊れたのかと思い、コマンドラインから実行しようとすると sudo も叱られます。非常に焦りました。
$ sudo -s
[sudo] password for naoki: 
naoki is not in the sudoers file.  This incident will be reported.
$

幸い su コマンドのパスワードは、インストールしたての場合、メインユーザと同じになっていたので root になることができました。sudo のコースしかなかったらと思うとゾッとします。しかし、インストール後は root と デフォルトユーザのパスワードが同じであることを知らなかった私も相変わらずです。インストール時にユーザと root のパスワードは別に入力するユーザインタフェースのが良いのでしょうが、個人で使う場合には簡単であることのほうが重要なのでしょう。

パッケージマネージャが起動できなかった原因ですが、例の usermod の実行前後で、以下のようなことが起こっていました。

# diff group group.bk
5c5
< adm:x:4:
---
> adm:x:4:naoki
18c18
< cdrom:x:24:
---
> cdrom:x:24:naoki
21c21
< sudo:x:27:
---
> sudo:x:27:naoki
23c23
< dip:x:30:
---
> dip:x:30:naoki
35c35
< plugdev:x:46:
---
> plugdev:x:46:naoki
46c46
< lpadmin:x:107:
---
> lpadmin:x:107:naoki
63c63
< sambashare:x:125:
---
> sambashare:x:125:naoki
65d64
< vboxusers:x:1001:naoki

なんと、インストール時に設定されていた group 属性が全部初期化されて、指定したグループだけになっていました。ご存知な方には、当たり前の話なのだと思いますが、せめて更新時に警告でも出して頂けるとありがたいです。たしかに、add とかいう名前のコマンドではないので追加するだけと思い込むのが悪いのですが、影響が大き過ぎますよね?

2012年12月13日木曜日

仮想画面を大きくしてxubuntuを使いたい!

TEDの日本語字幕が□になる件で、仮想マシン上のMINTを使って感じたのですが、仮想マシンのMINT上でフラッシュを見るのは辛いという事です。他のパッケージでの状況を見るために xubuntuでもインストールをして見ましたが、パッケージインストール、再起動、プラグイン確認などの動作確認を行うにはこちらのほうが快適に作業できました。「過ちては改むるに憚ることなかれ」というほどでもないですが、ホストOSはMINT、ゲストOSはxubuntuが好み組み合わせということになりました。

以前、xubuntuを仮想マシンのゲストOSの候補にしなかった理由の一つに、仮想マシンの画面サイズが小さいということがあったのですが、GestAdditions 機能を使うことで全画面表示も簡単にできたので、制約もなくなりました。昔は、vmware を使用していたのですが、vmwareでも同じような仕組みを利用していたにも関わらず、virturalbox での機能を見過ごすというのは、相変わらずです。

  • 仮想CDのマウント

    デバイス>GestAdditions をクリックすると仮想CDがマウントされる。


  • GestAdditions の導入

    端末の特権ユーザにて VBoxLinuxAdditions.run を起動してインストールする。


  • 再起動後前画面表示

    仮想ウインドウ枠をダブルクリックすると全画面表示になる。パッケージの更新でこの機能が無効になることがあるので、その場合は再度 GestAdditions をインストールする。


  • ホストのメモリ使用量

    ホストがMINT14、ゲストをxubuntuで、それぞれOS上でchromeを立ちあげていますが、メモリ使用量やCPU使用率は結構低くて快適です。

Mint14でTEDみたい(よね?)

エンジニアにおすすめのTED」に触発されてTEDでも見て前向きになってみようと思った。玉に前向きなことをしようとすると突き落とされる星の下に生まれてしまった化石人間は、やっぱり、ちゃんと突き落とされました。

  • せっかくみようと思ったのに、日本語字幕が□です。ウインドウズではFirefoxでもchromeでもちゃんと表示されています。でも、リモートデスクトップではさすがに動画は苦しいので、軽い気持ちでMintでも見られるようにできないかなと調べ始めました。



  • いろいろネットで調べてみると、FLASHと日本語フォントは昔から問題が多かったらしく、いろいろと情報がでてくる。12.04 までは大体以下の4点で解決できるらしいのですが、12.10からは無理っぽいっていう感じの情報までしか辿れませんでした。



  • かなり滅入ったので、気分転換に外にゴミ出しにでかけ、冷たい夜風にあたっていたら、ふと「仮想マシン上でも同じように発生するのだろうか?」という疑問がわいてきました。部屋に戻り、仮想マシン上の各種 ubuntu でTEDを見てみると普通に日本語表示されていました。なんと自分のホストマシンだけの問題だったのですね。



  • 何かのパッケージの導入過程で発生していると思われるので、ホストマシンと同じパッケージを一つずつ導入しながら様子をみてみました。最初は、TEDの画面で日本語を選択した時だけ化けてしまうので、日本語パッチの導入を疑っていましたが、導入しても影響はありませんでした。

  • 次々と問題なくインストールは続き、最後に photoshp 用に wine を導入したら、ついに文字化けが発生しました。wine のインストール中に問い合わせがあるマイクロソフトコアフォントが怪しいと当たりをつけ、 /usr/share/fonts/truetype にインストールされていた同フォントを、大胆にもバッサリ削除してみました。すると、TEDの日本語字幕がちゃんと表示されました。chrome もPPAPI側のプラグインを "about:plugins" から無効にすると同様に表示されました。



  • という成り行きでしたが、日本人でMint14とwineとTED(fuluもかな?)を所望しない限りは発生しないわけですから、あまり話題にもならないのかもしれません。今回の対処方法は、フォント周りの事がよくわかっていないのでなんか問題も発生しそうですが、とりあえず、これで使おうと思っています。フォント周りを綺麗に解決するのは課題ですね。(その前に修正パッチが出回るでしょう。きっと。。)

2012年12月11日火曜日

即販価格のwindows8(3300円)

ウインドウズ8を「朱を奪う紫」に例えるならば、「開けて悔しき玉手箱」になろうとも果敢に挑まなければ、化石人間の生息場所は狭まるばかりである。なんていう前向きな話ではなく、今ならアップグレードが3300円というマイクロソフトの即販戦略にやられたのである。「飛んで火にいる夏の虫」である。とはいうものの、ウインドウズ8は結構気に入りました。

朱を奪う紫


  • 私にとって一番良かったのは、即販価格でもプロフェッショナル版なので、標準のリモートデスクトップが使えるようになったことです。標準のリモートデスクトップ(RDP)は、ホストマシンに接続されているディスプレイのサイズに関係なく、リモートマシンの画面サイズでつかえるので、綺麗で広いマックの画面サイズで操作が可能になりました。また、VNCに比較して、リモートマシン上でブラウザやオフィスを使う気になれる軽快感もいいですね。


  • 次に良かったのは、コマンドや設定画面が検索窓から呼び出せることです。メニュー階層を辿らなくても1アクションで機能を呼び出せるので、NT、XP、VISTA、WINDOWS7と世代が変わるたびに、微妙にメニューの操作感が変って困った覚えがある私としては便利です。


  • もうひとつのお気入りは、起動速度と全般の軽快感の向上です。おそらく、VISTA、WINDOWS7より確実に軽いと思います。世代を経る度に、速度向上のアナウンスとは裏腹に重くなっていった過去のリリースの苦々しさを味わうことはなかったです。



開けて悔しき玉手箱


  • マイクロソフトアップデートが「更新失敗」と「更新前の復活」を繰り返す無限地獄に陥ってしまいました。

    クリーンブートという方法でマイクロソフト以外のサービスを停止して、マイクロソフトアップデートの各更新プログラムを一つずつ手動で更新していくという気の遠くなるような作業を繰り返した結果、KB2770917という更新プログラムをインストールするとこの現象が発生することが解りました。



    私の場合は、MagicTV というソフトと干渉を起こしていたようで、このソフトを削除することで無事にインストールできました。そもそも MagicTV などは使っていなかったのだが、マシンを購入した時からデフォルトでインストールされていたようです。

  • 正常に動作しだしたのも束の間。今度は指定時間が過ぎてもスリープモードに入らないという現象に陥りました。こちらは、powercfg.exe という電源管理ツールで、srvnet というサービスが阻害していることが解り、同ツールで電源管理とサービスのプライオリティを変更することで対処できました。知らない事ばかりとはいえ、やはり、こういうトラブルに遭遇せずに過ごすには、現状維持に甘んじるが一番なのでしょう。

    コマンドプロンプトを管理者モードで開くのは、ファイルエクスプローラのファイルメニューから選ぶのですね。



    電源管理ツールでスリープを邪魔しているサービスと優先順位の入れ替え。


2012年12月6日木曜日

virtualbox には、Mint かも!

ミイラ取りがミイラになってしまった。

ubuntu12.10 へのアップグレードの失敗で強制断舎利させられてからひと月。ちょっとした実験にはいつも virtualbox を使わせて頂いていたが、まだインストールしていないのを思い出してインストールしてみた。

ubuntu12.10 は、私の core2duo の imac 上では、ちょっと使う気になれないほどの重さになっていた。そこで、virtualbox 上でも快適に使えるパッケージ探しが始まった。比較しているうちに LinuxMint が気に入ってしまい、ホストOSまで入れ替えてしまった。

  1. 比較環境
    • ホストマシンはメモリ3.8G、CPUはCore2Duo 2.8GHz
    • ホストOSはLinuxMint14(64bit)
    • VirtualBox 4.2.4 r81684
    • ゲストOS割当てメモリは1.3G

  2. 比較結果 

    パッケージ ログイン画面 ログイン完了 ブラウザ起動 メモリー
    lubuntu 30秒 5秒 5秒 419M
    xubuntu 30秒 10秒 5秒 520M
    ubuntu 31秒 27秒 15秒 879M
    LinuxMint 32秒 24秒 6秒 717M

  3. lubuntu

    デフォルトで導入されているソフトも軽量なものが選択されていて軽快に動作します。ただ、フォント、見栄え、導入ソフトなどを考えると、どうしてもハードの資源が足りない場合の選択肢ということにしました。


  4. xubuntu

    軽くて、見栄えもよくこれにしようかと思いましたが、仮想画面が imac の画面サイズの大きさにできないのが残念でした。きっと設定があるのでしょうが調べるのも大変なので第2候補としました。また、ホストOSの ubuntu12.10 に xubuntu を導入して利用してみましたが、一緒に導入していると軽快さがあまり感じられませんでした。


  5. ubuntu

    起動時間とかは他のパッケージと大差はないが、ログインしてからの unity3D のソフトシュミレーションの重さが効いて、仮想環境上では使う気になれず。なぜか、何回か起動に失敗したりもしました。


  6. LinuxMint

    起動時間やログイン時間は ubuntu オリジナルとあまり変わらないが、一旦ログインしてからの各アプリの速度は xubuntu 並に軽快です。menu の検索も早く、かなりお気に入り。また、仮想環境でもインストール直後から imac のフルサイズの画面サイズで使えるのもよいです。結局ホストOSもこれにシチャイました。


2012年12月3日月曜日

wordpress の header.php(後半)

今日は、header.phpの後半部の読書です。body 以下の内容なので style シートと密接に絡みます。オリジナルなテーマ作りに繋がるといいなと思ってます。
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
  <header id="branding" role="banner">
      <hgroup>
        <h1 id="site-title"><span><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span></h1>
        <h2 id="site-description"><?php bloginfo('description'); ?></h2>
      </hgroup>
      <?php
        // Check to see if the header image has been removed
        $header_image = get_header_image();
        if ($header_image) :
          // Compatibility with versions of WordPress prior to 3.4.
          if (function_exists('get_custom_header')) {
            // We need to figure out what the minimum width should be for our featured image.
            // This result would be the suggested width if the theme were to implement flexible widths.
            $header_image_width = get_theme_support('custom-header', 'width');
          } else {
            $header_image_width = HEADER_IMAGE_WIDTH;
          }
          ?>
      <a href="<?php echo esc_url(home_url('/')); ?>">
        <?php
          // The header image
          // Check if this is a post or page, if it has a thumbnail, and if it's a big one
          if (is_singular() && has_post_thumbnail($post->ID) &&
              (/* $src, $width, $height */ $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array($header_image_width, $header_image_width))) &&
              $image[1] >= $header_image_width) :
            // Houston, we have a new header image!
            echo get_the_post_thumbnail($post->ID, 'post-thumbnail');
          else :
            // Compatibility with versions of WordPress prior to 3.4.
            if (function_exists('get_custom_header')) {
              $header_image_width  = get_custom_header()->width;
              $header_image_height = get_custom_header()->height;
            } else {
              $header_image_width  = HEADER_IMAGE_WIDTH;
              $header_image_height = HEADER_IMAGE_HEIGHT;
            }
            ?>
          <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
        <?php endif; // end check for featured image or standard header ?>
      </a>
      <?php endif; // end check for removed header image ?>
      <?php
        // Has the text been hidden?
        if ('blank' == get_header_textcolor()) :
      ?>
        <div class="only-search<?php if ($header_image) : ?> with-image<?php endif; ?>">
        <?php get_search_form(); ?>
        </div>
      <?php
        else :
      ?>
        <?php get_search_form(); ?>
      <?php endif; ?>
      <nav id="access" role="navigation">
        <h3 class="assistive-text"><?php _e('Main menu', 'twentyeleven'); ?></h3>
        <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
        <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to primary content', 'twentyeleven'); ?>"><?php _e('Skip to primary content', 'twentyeleven'); ?></a></div>
        <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e('Skip to secondary content', 'twentyeleven'); ?>"><?php _e('Skip to secondary content', 'twentyeleven'); ?></a></div>
        <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
      </nav><!-- #access -->
  </header><!-- #branding -->
  <div id="main">
  1. body_class関数(wp-includes/post-template.php)
    body タグのclassを表示ページによって動的に切り替えている。クラスの内容は get_body_class関数から取得しており、複数のクラス名が返却されることがあるが、body_class はそれらをスペース区切りで連結している。HOME を開いた時には、twenty eleven では以下のように展開されている。
    <body class="home blog single-author two-column right-sidebar">
    
    ここで指定されているクラスは、twenty eleven では、使われていないクラスもあった。故に、自分でスタイルをカスタマイズする際には、HOME,SINGLE,SEARCH などに応じて展開される組み合わせを認識して、必要なクラスの定義を css に定義することになる。(参照)

  2. <div id="page" class="hfeed">
    "#page" は style.css に定義されているが、"hfeed"はどこにも定義されていない。インターネット上で調べてみると、テーマ twenty ten では利用されていた記載があるが、現在の twenty ten のスタイルシートには見つけることができない。もはや必要のないクラスなのか、カスタマイズを見据えたものなかわからない。

  3. header タグ
    「header 要素は、通常は、セクションの見出し(h1–h6 要素や hgroup 要素)を入れることを想定しています。しかし、これは必須ではありません。header 要素は、セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。」このタグは、html5 で拡張されたようだ。(参照) 

    また、header タグ内で使われている role 属性も HTML5 から追加された属性。そのタグに記載される内容を表すキーワードを記載するらしい。(参照)

  4. hgroup タグ
    「hgroup 要素は、セクションの見出しを表します。この要素は、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、h1–h6 要素のセットをグループ化するために使います。」 これも HTML5 の拡張。なぜ必要なのか今ひとつわからなかったが、こちらに丁寧な説明があった。

  5. span タグ
    「<SPAN>タグはそれ自身は特に意味を持っていませんが、 <SPAN>~</SPAN>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。」とあるが、ここでは特にクラス指定などでスタイルを適用していないので、文書に構造的意味合いの付加・補強の意味合いが強いのであろう。

  6. get_header_image 関数(wp-includes/theme.php)
    ヘッダイメージのURL取得関数。管理画面よりランダム設定がされていれば、ランダムなURLが返却される。(参照)

  7. function_exists 関数(PHP)
    これはPHPの関数なんですね(参考)

  8. get_theme_support 関数(wp-includes/theme.php)
    custom_header が定義されていれば、その定義配列から width 値を取り出している。wordpress 3.1 以降の実装らしく日本語版のcodexは見当たらなかった。(参照)

  9. HEADER_IMAGE_WIDTH,HEADER_IMAGE_HEIGHT(wp-content/themes/twentyeleven/functions.php)
    twentyeleven_setup 関数内で $custom_header_support 配列にカスタムヘッダーの各種デフォルト値を設定している。管理画面よりカスタムヘッダーが設定されていない場合は、この配列に設定された値がそれぞれ、HEADER_IMAGE_WIDTH,HEADER_IMAGE_HEIGHT に設定される。

  10. has_post_thumbnail 関数(wp-includes/post-thumbnail-template.php)
    ポスト記事にサムネール画像があるかどうか判定する関数。ここでは、サムネール画像がある場合、サムネールを表示し、なければ、オリジナル画像を表示する判定に使用している。(参照)

  11. wp_get_attachment_image_src 関数(wp-includes/media.php)
    添付ファイルの表示用データを取得する。返却値にはイメージファイルのURL、幅、高さの順に格納されている。第2パラメータの画像サイズには、thumbnail, medium, large or full の文字列指定ができるが、ここでは、先に取得した画像表示エリアのサイズを渡している。ここで返却される画像サイズが、先に取得した画像表示エリアよりも大きければ、thumbnail サイズに変更するためである。(参考)

  12. get_the_post_thumbnail 関数(wp-includes/post-thumbnail-template.php)
    投稿記事/ページ編集画面で設定した投稿サムネイルを取得する。ここは、対象サムネール画像が先に取得した表示エリアよりも大きい場合に、サムネールサイズに変更している。返却値はhtmlのソースコードである。(参照)

  13. header_image 関数(wp-includes/theme.php)
    get_header_image 関数を呼び出しているのみ。get_header_image関数は、カスタムヘッダーのデフォルトイメージの url または、ランダムヘッダーのurlを出力する。(参照)

  14. get_header_textcolor 関数(wp-includes/theme.php)
    get_theme_mod 関数を呼び出しているのみ。get_theme_mod関数は、カスタムヘッダーのデフォルトテキストカラー名を出力する。(参照)

  15. get_search_form 関数(wp-includes/general-template.php)
    サイト内検索のテンプレートを読み込んで出力する。テンプレートはsearchform.phpで、存在しない場合はデフォルトのサイト検索コードが出力される。(参照)

  16. nav タグ
    ナビゲーションであることを示し、ウェブサイト内の他のページへのリンクや、ページ内リンクなど記載する。文書に構造的意味合いの付加・補強を目的とするHTML5で導入されたタグ。(参照)

  17. wp_nav_menu 関数(wp-includes/nav-menu-template.php)
    これは、ここを参考にもう少し調べよう。

2012年11月28日水曜日

wordpress の header.php(前半)

歳を取ってくると好奇心や探究心を維持するのが難しいです。6、70歳になっても元気に山登り、果てはヒマラヤまで登っちゃう人がいるのだから体力もさることながら、精神の若さが素晴らしいですね。などと関心しつつ読書を始めたいと思います。でも、長いので半分ずつ。。。
<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
  /*
   * Print the <title> tag based on what is being viewed.
   */
  global $page, $paged;
  wp_title('|', true, 'right');
  // Add the blog name.
  bloginfo('name');
  // Add the blog description for the home/front page.
  $site_description = get_bloginfo('description', 'display');
  if ($site_description && (is_home() || is_front_page()))
    echo " | $site_description";
  // Add a page number if necessary:
  if ($paged >= 2 || $page >= 2)
    echo ' | ' . sprintf(__('Page %s', 'twentyeleven'), max($paged, $page));
  ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
  /* We add some JavaScript to pages with the comment form
   * to support sites with threaded comments (when in use).
   */
  if (is_singular() && get_option('thread_comments'))
    wp_enqueue_script('comment-reply');
  /* Always have wp_head() just before the closing </head>
   * tag of your theme, or you will break many plugins, which
   * generally use this hook to add elements to <head> such
   * as styles, scripts, and meta tags.
   */
  wp_head();
?>
</head>
  1. 条件付きコメント(12行目〜23行目)
    単なるコメントと思いきや、wikipediによれば「条件付きコメント(じょうけんつきコメント)とは、Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメントである。条件付きコメントは、マイクロソフトのInternet Explorer 5ブラウザーで初めて登場し、バージョン9までサポートされた。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事が明らかにされた。」だそう。身勝手に規約外の仕様作って身勝手に廃止とは、なんという事だろう。wikipedia の説明に出てくるダウンレベルとは、IE5以下とその他のブラウザを指すそうで、名付けからしてタカビーな感じです。おまけにIE10で自らダウンレベルに陥るとはどうなっているのでしょう。

  2. language_attriutes関数(wp-includes/general-template.php)
    該当部分のソースコードを確認してみると、以下のように dir 属性と lang 属性に変わっている
    
    
    
    
    
    
    
    
    • html タグの属性 id は、ブラウザの種類を特定するためにここで設定しているよう。積極的に利用している部分はスタイルシートの#ie8関連と思われるので、後々の対応しやすさも含めた定石コードなのでしょう。
    • html タグの属性 dirとは、「html要素に dir="" を追加すると、文書全体の書字方向を指定できます。」(参照)
    • html タグの属性 lang とは、「html要素に lang="" を追加すると、文書全体の言語を示すことができます。」(参照)

  3. メタ情報(25行目〜26行目)
    METAタグはヘッド領域に記述されるタグで、文書で使用されている言語や文字コードの指定、キーワードや説明などを埋め込む事ができます。参照)
  4. グローバル変数($page、$paged)
    WordPressのページ関係のグローバル変数。(参照)

  5. wp_title 関数(/wp-includes/general-template.php)
    単体記事、日付ベースのアーカイブ、カテゴリ、著者ページのそれぞれに対応したタイトルを出力する関数。(参照)

  6. bloginfo関数(wp-includes/general-template.php)
    使用中のWordPressブログに関するさまざまな情報を出力。 (参照)

  7. get_bloginfo関数(wp-includes/general-template.php)
    使用中のWordPressブログに関するさまざまな情報を出力。bloginfo が標準出力するのに対し、get_bloginfoは情報を返す関数。bloginfo関数は、"echo get_bloginfo( $show, 'display' );" しているのみ。ここでは、description(「一般設定」管理画面で指定したブログの説明文)を取得している。(参考)

  8. is_home 関数(wp-includes/query.php)
    この条件分岐タグは、サイトのメインページ(ホームページ)が表示されているかどうかを判定します。これは TRUE または FALSE の値を返す boolean 関数です。(参照)

  9. is_front_page 関数(wp-includes/query.php)
    この条件分岐タグは、サイトのフロントページが表示されているかどうかを判定します。これは TRUE または FALSE の値を返す boolean 関数です。TRUE を返すのは、管理画面の 設定 > 表示設定 > フロントページの表示 にて、「最新の投稿」を選択していて現在最新の投稿ページが表示されている場合と、「固定ページ」を選択していて現在「フロントページ」に指定したページが表示されている場合です。(参照)

  10. link rel(profile,stylesheet,pingback)
    「head 内で使う meta、link のまとめ」から仕入れた情報ですが、pingback は仕組みが良くわからないです。profile はその必要性も良くわからないです。今後の課題です。
    • rel="profile" は Google のSocial Graph から派生したフォーマット(XFN)ようだが、本家の Social Graph のサービスは停止しているため、取り扱い状況が曖昧の状態の様子。
    • rel="stylesheet" は、リンク先のスタイルシートの適用。
    • rel="pingback" は、web バブリッシングソフトウェアがユーザに代わって、リンク先のサイトにリンクを張ったことを通知し、リンク先にリンク元のドキュメントへの逆リンクの自動生成を可能にするもの。(参照)

  11. is_singular 関数(wp-includes/query.php)
    シングルページ (固定ページ、個別投稿ページ、添付ファイルページ) の判定で、is_single()、is_page() 、is_attachment() のいずれかが真である場合

  12. get_option 関数(wp-includes/option.php)
    optionsデータベーステーブルから、指定したオプションの値を取得する安全な方法です。希望するオプションが存在しない場合は、値が関連付けされず、FALSE が返されます。 (参照)

  13. wp_enqueue_script 関数(wp-includes/script-loader.php)
    コメントリプライ用のジャバスクリプト(comment_reply.js)の参照タグの出力キューに登録。キューはユニークに維持されるため、重複ロードが避けられるようになっている。参照タグの出力 wp_head 関数で行われている。(参照)

  14. wp_head 関数(wp-includes/general-template.php)
    内部は、do_action('wp_head');を実施しているのみ。ラベル毎にサービス関数が仕掛けられたテーブルから"wp_head"に一致するサービス関数を実行することにより、ヘッダ内に必要な link や script を出力する。
    デフォルトで登録されているサービス関数は以下と思う。
    default-filters.php:add_action( 'wp_head',             'wp_enqueue_scripts',              1     );
    default-filters.php:add_action( 'wp_head',             'feed_links',                      2     );
    default-filters.php:add_action( 'wp_head',             'feed_links_extra',                3     );
    default-filters.php:add_action( 'wp_head',             'rsd_link'                               );
    default-filters.php:add_action( 'wp_head',             'wlwmanifest_link'                       );
    default-filters.php:add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
    default-filters.php:add_action( 'wp_head',             'locale_stylesheet'                      );
    default-filters.php:add_action( 'wp_head',             'noindex',                          1    );
    default-filters.php:add_action( 'wp_head',             'wp_print_styles',                  8    );
    default-filters.php:add_action( 'wp_head',             'wp_print_head_scripts',            9    );
    default-filters.php:add_action( 'wp_head',             'wp_generator'                           );
    default-filters.php:add_action( 'wp_head',             'rel_canonical'                          );
    default-filters.php:add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
    default-filters.php:    add_action( 'wp_head', 'wp_no_robots' );
    
    

2012年11月20日火曜日

PaaS(openshift)を試してみる

日経 Linux 12月号に「PaaSはここまで使える」の連載記事が、無料で利用できる openshift の紹介だったので早速利用してみた。ひょっとしたら地球の裏側にひっそりとあるかもしれない仮想マシンに wordpress 環境を構築し、ssh でログインできたりするのは、ちょっと感動的です。ってインターネットの時代、隣の席のマシンにアクセスするのも、遠く離れたマシンにアクセスするのもさして違いはないのだろうけれど。それにしても、無料っていうのはすごいです。
  1. Openshift のクライアント環境作成(ubuntu12.10)
    日経 Linux には、「クライアントOSは、Fedora、Redhat」が良いと記載があったが、OpenShiftのページには、windowsやmac へのクライアントツールも紹介されている。もちろん、ubuntu の記載もあった。

    まず、Openshift のクライアントツールの利用には、ruby と git のインストールする。
    $ sudo apt-get install ruby-full rubygems git-core
    
    openshift クライアントは、ruby でできているらしいので、ruby のパッケージ管理ツール gem でクライントツールをインストールする。
    $ sudo gem install rhc
    

  2. Openshfit の仮想マシン環境のセットアップ
    ◇まずは、OpenShift のアカウント作成

    ◇アプリケーションの選択1(PHP)

    ◇アプリケーションの選択2(MySql)


  3. Openshfit クライアントの設定
    サーバーにアプリケーション環境の PHPとMySqlの導入が完了したら、クライアントでOpenshiftクライアントの初期設定を行う。自動的にSSHのキーを作ってローカルとサーバーに配置してくれる。また、git の初期設定を実施する。
    $ rhc
    $ cd ~/work
    $ git config --global user.email "userid@xxxxx.or.jp"
    $ git config --global user.name "userid"
    

    関連として以下の記事をざっと参照しておくと理解しやすいかも。
    ◇git の説明
    ◇shh の説明

  4. Server に wordpress をインストール
    ◇git clone で OpenShift アプリケーション環境のダウンロード
    $ git clone ssh://5e2448xxxxxxx@wp-naoki.rhcloud.com/~/git/wp.git/
    

    ◇github から wordpress のサンプルをダウンロード
    $ git remote add upstream -m master git://github.com/openshift/wordpress-example.git
    $ git pull -s recursive -X theirs upstream master
    

    ◇git push で wordpress をアップロード
    $ git push 
    

    ◇ブラウザで動作確認

2012年11月19日月曜日

ためしに「買い物カゴ」プラグイン

wordpress への買い物カゴ設置というのは plugin だけで簡単に設置できるという噂。特にすぐに必要というわけでものないけれど、wordpress の twentyeleven のソースコード読みはちょっと中断して、買い物カゴ設置がどのようなものなのか先に見てみよう。



  1. 買い物カゴの plugin ってどんなのがあるのだろう。
    まずは、「wordpress、買い物カゴ」で検索してみると、このサイトにであった。宣伝ぽい気もするけどとりあえず導入してみることにした。


    そして、plugin を解凍してディレクトリに配置
    $ ~/ダウンロード$ unzip  WP-OliveCartBasic-1.0.9.zip
    $ ~/ダウンロード$ cd /var/www/wordpress/wp-content/plugins
    $ sudo -s
    # cp -rp ~/ダウンロード/WP-OliveCartBasic-1.0.9/plugins/wp-olivecart .
    # chown -R www-data:www-data wp-olivecart
    

  2. wordpress へ plugin 導入
    管理画面のplugin画面に olivecart が増えているので有効化すると、olivecart の管理メニューが増えた。


  3. 記事を投稿
    • 投稿画面のツールメニューに「カート」が増えている。


    • 「カート」ツールを押すと、商品別に「在庫管理」、「挿入ボタン」がある。


    • とりあえず、投稿記事に「在庫管理」と「挿入ボタン」をつけて更新



  4. 投稿の確認
    カートボタンが追加されてる。けど、在庫状況が表示されていない。なおかつ、決済してもメールが飛んでこない。



  5. 在庫非表示の対処
    • 在庫表示部分のHTMLコードを見てみると
      <div class="entry-content">
      <p>あいうえお<br />
      <img src="http://naomusi.mydns.jp/wordpress/wp-content/plugins/wp-olivecart/stock.php?number=2-M-white" /><br />
      <input name="button" type="submit" value="カートに入れる" onclick="postIn('2-M-white')" /></p>
      </div><!-- .entry-content -->
      

    • stock.php を直接叩いてみると
      $ php -q stock.php
      PHP Fatal error:  Call to undefined function imagecreatefromgif() in /var/www/wordpress/wp-content/plugins/wp-olivecart/stock.php on line 31
      

    • imagecreatefromgif 関数を検索
      ここに出ている通り、gd ライブラリがPHPに導入されていないらしい。ubuntu には、これに従って導入してみる。
      $ sudo apt-get install php5-gd
      $ sudo /etc/init.d/apache2 restart
      

  6. とりあえず sendmail をインストールしてみる。
    $ sudo apt-get install sendmail
    
    以上であっけなく、メールが届いた。sendmail はセキュリティや設定などがよくわからないがとりあえず良しとしよう。

2012年11月18日日曜日

wordpres の index.html

wordpress のオリジナルテーマ作成の下調べとして index.html の中身を見てみよう。



<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */
get_header(); ?>
    <div id="primary">
      <div id="content" role="main">
      <?php if (have_posts()) : ?>
        <?php twentyeleven_content_nav('nav-above'); ?>
        <?php /* Start the Loop */ ?>
        <?php while(have_posts()) : the_post(); ?>
          <?php get_template_part('content',get_post_format()); ?>
        <?php endwhile; ?>
        <?php twentyeleven_content_nav('nav-below'); ?>
      <?php else : ?>
        <article id="post-0" class="post no-results not-found">
          <header class="entry-header">
            <h1 class="entry-title"><?php _e('Nothing Found','twentyeleven'); ?></h1>
          </header><!-- .entry-header -->
          <div class="entry-content">
            <p><?php _e('Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.','twentyeleven'); ?></p>
            <?php get_search_form(); ?>
          </div><!-- .entry-content -->
        </article><!-- #post-0 -->
      <?php endif; ?>
      </div><!-- #content -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  • get_header() ってなんだ?
    「このタグは、現在のテーマディレクトリから header.php ファイルを読み込みます。このファイルがないときは、wp-content/themes/default/header.php を読み込みます。」だそうです。 (wordpress codex 日本語版より)  内容についてはソースが長そうなので次に回そう。初期画面のカバー写真より上を作っているのだろう。。

  • have_posts() ってなんだ?
    「(ループ内か、ループの前でのみ使用可能) 表示する投稿が残っているかを示す。」だそうです。

  • if(): endif/while(): 〜 endwhile ってなんだ?
    PHPはPerlと同じで "if() {}"、"while() {}" のように記載するものとばかり思っていたので、最初 endif や endwhile を見た時は、wordpress の拡張機能かと思った。でも PHP は別構文が用意されているんですね。知らなかった。

  • twentyeleven_content_nav() ってなんだ?
    function twentyeleven_content_nav( $nav_id ) {
      global $wp_query;
      if ( $wp_query->max_num_pages > 1 ) : ?>
        <nav id="<?php echo $nav_id; ?>">
          <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
          <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
          <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
        </nav><!-- #nav-above -->
      <?php endif;
    }
    
    投稿記事が複数ページに渡る場合に、前ページ、次ページの案内を出す部分みたいだな。。
  • get_template_part() ってなんだ?
  • 「(ヘッダー、サイドバー、フッター以外の)テンプレートパーツをテンプレートに読み込みます。子テーマ で多重定義して簡単にセクションを再利用できます。テーマのその名前のテンプレートパーツをインクルードします。name を指定した場合は、特定の部分をインクルードします。{slug}.php ファイルが無い場合は、インクルードしません。 パラメータに関しては、"{slug}-{name}.php" を呼び出します。 」(参照) か。

  • _e() ってなんだ?
    メッセージの国際化対応関数なんですね。(参照)

  • <article> はなんだ?
    「<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。」(参照) か。コメントとか引用とかにつかうのかな。ここも参照かな。

  • get_search_from() ってなんだ?
    「テーマの searchform.php を使用して検索フォームを表示します。テーマに searchform.php が無い場合は、WordPress はビルトインの検索フォームを表示します。」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The template for displaying search forms in Twenty Eleven
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?>
      <form method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">
        <label for="s" class="assistive-text"><?php _e('Search', 'twentyeleven'); ?></label>
        <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e('Search', 'twentyeleven'); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e('Search', 'twentyeleven'); ?>" />
      </form>
    

  • get_sidebar() ってなんだ?
    「このタグは、現在のテーマディレクトリから sidebar.php ファイルを読み込みます。このファイルが無いときは、wp-content/themes/default/sidebar.php を読み込みます。」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The Sidebar containing the main widget area.
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    
    $options = twentyeleven_get_theme_options();
    $current_layout = $options['theme_layout'];
    
    if ('content' != $current_layout) :
    ?>
        <div id="secondary" class="widget-area" role="complementary">
          <?php if (! dynamic_sidebar('sidebar-1')) : ?>
    
            <aside id="archives" class="widget">
              <h3 class="widget-title"><?php _e('Archives', 'twentyeleven'); ?></h3>
              <ul>
                <?php wp_get_archives(array('type' => 'monthly')); ?>
              </ul>
            </aside>
    
            <aside id="meta" class="widget">
              <h3 class="widget-title"><?php _e('Meta', 'twentyeleven'); ?></h3>
              <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
              </ul>
            </aside>
    
          <?php endif; // end sidebar widget area ?>
        </div><!-- #secondary .widget-area -->
    <?php endif; ?>
    

  • get_footer ってなんだ?
    「このタグは、現在のテーマディレクトリから footer.php ファイルを読み込みます。このファイルが無いときは、 wp-content/themes/default/footer.php を読み込みます。 」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The template for displaying the footer.
     *
     * Contains the closing of the id=main div and all content after
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?>
      </div><!-- #main -->
      <footer id="colophon" role="contentinfo">
          <?php
            /* A sidebar in the footer? Yep. You can can customize
             * your footer with three columns of widgets.
             */
            if (! is_404())
              get_sidebar('footer');
          ?>
          <div id="site-generator">
            <?php do_action('twentyeleven_credits'); ?>
            <a href="<?php echo esc_url(__('http://wordpress.org/', 'twentyeleven')); ?>" title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'twentyeleven'); ?>" rel="generator"><?php printf(__('Proudly powered by %s', 'twentyeleven'), 'WordPress'); ?></a>
          </div>
      </footer><!-- #colophon -->
    </div><!-- #page -->
    <?php wp_footer(); ?>
    </body>
    </html>
    

2012年11月15日木曜日

ブロックのポジション

今日はブロックのポジション指定とブロックを使ったメニューを確認。blogger で文章中に使うことはないだろうけれど、自作ホームページ作成などには必要になるかもしれないし。。



  • ベースブロックの指定位置に表示
    段落 <p> とかは、デフォルトスタイル指定で上下左右にマージンが取られているのか。。
    
    

    りんご

    みかん
    ぶどう

    りんご

    みかん
    ぶどう

  • ブロックを並べてメニューの元を作成 ブロックの上にカーソルが来た時にバックグラウンドカラーを変更するには、hover 属性で変更か。。
    
    
      

  • サブメニューの非表示化
    
    
      

  • javascript でサブメニューの表示オン・オフ
    表示のオン・オフは動作するけれど、非表示エリアにマウスカーソルが乗っても反応してしまう。
    
    
    
      

  • カーソル反応位置の調整
    非表示エリアにマウスカーソルが乗っても反応しないように、postion : absolute を追加。しかし、アンカー<a>のサイズが文字サイズに。。
    
    
    
      

  • アンカーサイズの調整
    
    
    
      

2012年11月14日水曜日

ブロックのレイアウト

blogger に彩りを添えるべく、今日はブロックレイアウトの確認をしよう。



  • 二個のブロックならべ
    
    

  • 三個のブロックならべ
    
    
    中央
    中央

  • 左サイドバー風
    
      

  • 右サイドバー風
    
    

  • 両サイドバー風
    
    
    中央
    中央

  • 両サイドバー風+フッター
    
    
    中央
    中央

2012年11月13日火曜日

ブロックの確認と修飾

プログラムコード表示でHTMLデビューしたので、今日はブロックの修飾機能の確認です。今後に生きるかはわかりませんが。。



  • まずは段落の範囲から
    
    

    今日も眠い

    今日も眠い

  • ボックスの幅指定
    
    

    今日も眠い

    今日も眠い

  • ボックスの背景指定
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの背景表示エリア
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(破線)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(角丸)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(シャドウ)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(シャドウ+ぼかし)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • 画像に合わせたボックス表示
    
    

    紅葉

    紅葉

  • ボックスに合わせた画像表示
    
    

    紅葉

    紅葉

2012年11月12日月曜日

ブログへのプログラムコード表示

ブログの作成ページでも基本的なページは作れるけれど、プログラムコードの表示エリアを罫線で囲みたいとか、ここの文章の文字の色は変えたいとかは「作成」タグではできないみたい。他の人のページを見ると罫線で囲ったり、色変えたり、画像を並べたり綺麗に配置されてる。blog を書く人にとっては、HTML や CSS はごく当たり前に使うものなのですね。ここは私も「HTML」編集画面デビューしよう。まずは、プログラムコードの囲み枠から!



  1. プログラムコード用の罫線囲み 一番に使いたいのがプログラムコード表示エリアを罫線で囲むこと。pre タグの CSS 定義が Blogger で有効かたしかめてみる。
    こんなコードを書いてみると。。。
    <style type="text/css">
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    </style>
    <pre>
    $ ls -l
    </pre>
    
    こんな結果なりました。
    $ ls -l
    
    常に失敗はつきもので、html タグを pre の中に記述する時に"<",">" は "&lt","&gt" に置き換えないとうまく表示されないのですね。というわけで本当はこのように記載しています。
    &ltstyle type="text/css"&gt
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    &ltstyle&gt
    &ltpre&gt
    $ ls -l
    &ltpre&gt
    
  2.  
  3. Open Source Java script(SyntaxHighlighter)
    プログラムコードの囲み表示について検索していたら、便利そうな javascript に出会った。これを導入しておけば、先ほどコードも以下のように綺麗に整形されてラクラクです。
    <style type="text/css">
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    </style>
    <pre>
    $ ls -l
    </pre>
    

    導入方法は沢山の人が紹介しているけれど一応記載しておこう(ここ)
    •  テンプレートの「HTMLの編集」を選択

    •  テンプレート編集>HTMLの編集を続行

    •  </header> 前にコードペーストし保存

    • 実際に貼り付けるのは必要なコードのモジュールだけ
      <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
      <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
      
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
      
      
      <!-- 
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
      -->
      
      <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
      SyntaxHighlighter.all();
      </script>