Ellinikonblue.com Weblog

夢は夢のまま終わらせない…

Posted on Nov 20, 2015 at 23:17

WordPress 仕事で得た知識: Graphy カスタマイズ #5

Image:Computer/20150912iPadPro.jpg
 WordPressGraphy と言うテーマを使ってカスタマイズする場合、 どちらかというと、これまでで説明したパンくずナビゲーションがあるかないかは趣味の問題というか、 特に問題を感じない方もいると思いますが、ページめくり (pagination) に関しては、 結構な数の方が Graphy を使っていだすと、 すぐに不満に感じるところではないかと思います。

 正直、Graphy を使うとなった時点で、 一番問題となったのはこの機能が貧弱なことでした。

 Graphy にも、 ページ一杯に記事を表示したときに、過去の記事に遡るために「古い投稿」、 より新しい記事に戻るために「新しい投稿」というリンクはでるのですが、 デフォルトだと 10 個の記事ごとにしかページめくりが出来ません。

 JetPack というプラグインを使って、 無限スクロール (Infinite Scroll) させることもできますが、 根本的に大量の記事を蓄積していった場合、昔の記事ほどたどり着きにくいというサイト構造になってしまいます。

 そこで今風のページめくり機能、最新、最古のページにも数クリックでたどり着け、 その間のページにも出来るだけ少ない遷移でたどり着ける、 このブログ でも 実装しているようなページめくり機能を追加してほしいと言われて、結構悩みました。

 実はこのようなページめくり機能もプラグインで実現することは出来ます。
 ただ今回はこれというプラグインを見つけられなかったこと、 それともう一つ、もとの Graphy 自身の持つ ページめくり機能を無効化してしまうことが、予想以上に手間取りそうだと言うことで、 プラグインに頼ることはやめました。

 調べていくうちに望んでいるようなページめくり機能を実装するための関数が、 実は WordPress にあらかじめ用意されていることを知り、 またそのあと、Graphy をなんとか無効化できないかと、 テーマを構成するファイルをあれこれ眺めていたときにひらめいたので、 この機能は自力で実装することに決めました。

 ただし、この実装方法、Graphy 以外の テーマでの転用は少し難しいかもしれません。

 具体的な方法は次回 (^^)/

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識: Graphy カスタマイズ #4 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #0 」
Posted on Nov 15, 2015 at 21:47

Windows 10 メジャーアップデート!

「 Windows 10 初のメジャーアップデートが一般公開」 ~日本語版でもコルタナが利用可能に
「 Windows 10 インストール用イメージも Build 10586 に差し替わる」 ~ 7/8/8.1 のプロダクトキーでクリーンインストール/アクティベーション可能
(以上、 PC Watch より)

 Windows 10 がリリースされて初のメジャーアップデートが行われました。
 以前にも話題にしましたが、これで Windows 7 の プロダクトキーがあれば、Windows 10 をクリーンインストールできるようになりました。  個人的な話ですが、Windows 10 環境への移行障壁だった地上波デジタル TV の視聴環境も、 nasne を手に入れ、 Windows 7 でですが、快適に TV を視聴できる環境も完成しました。
# タブレットでも見れて非常に便利です (^^)b
nasne 1TBモデル (CECH-ZNR2J01)【メーカー生産終了】
( ソニー・インタラクティブエンタテインメント )
¥17,500
 さぁ SkyLake へ!
…とはいかず w 、今年の 7 月に本業でシステムエンジニアとして復帰させられたもので、 持ち歩くための Windows PC がほしく、今、物色している最中で、年末までには手に入れたいと思っています。

 と言うわけで、 SkyLake プラットフォームに我が家のメインデスクトップを入れ替えるには、 冬のボーナスでは予算が足りなくなりそうです orz

 また当面、使うものですから、安物買いの銭失いは避けたく、 来年の夏のボーナスくらいをあてにして、デスクトップ環境を刷新したいと思っています ^^

 ひとまず年末買う(予定の)Windows 10 PC で、 しっかり経験値を積んで、デスクトップ環境を整えるときの糧にしたいと思っています。

「 バグ修正が進んだ Windows 10 Insider Preview 『 Build 10586 』」 ~ Surface Pro 3 のシャットダウン問題などを修正 ( PC Watch より)

Ellinikonblue.com Weblog
「 Skylake までの長い道のり… #1 」
「 Skylake までの長い道のり… #2 」
「 Skylake までの長い道のり… #3 」
「 まずは nasne を買いました」
Posted on Nov 10, 2015 at 21:07

WordPress 仕事で得た知識: Graphy カスタマイズ #4

 前々回のエントリーで、親テーマ( Graphy )と 同じ動作をする子テーマを作成し、前回のエントリーで Breadcrumb NavXT という プラグインをつかって、ページの上部にパンくずナビゲーションを表示する方法まで説明しました。

 では実際に子テーマをカスタマイズして、パンくずナビゲーションを表示させます。

 勘の良い方は、すでに子テーマの作成を説明したときにお気づきかもしれませんが、 親テーマと同じ動作をする子テーマを作成するだけなら、 ディレクトリを作って、その中に style.css と functions.php というファイルを 作成するだけで出来てしまいます。
 なぜたった二つファイルを作成するだけでこうなるのかというと、 基本的に子テーマはテーマを構成するために必要なファイルがなければ、 親テーマのファイルをそのまま使うからです。

 つまり、オーバーライドしてしまうファイルだけ親テーマからファイルをひっぱってくればいいので、 wp-content/themes/graphy ディレクトリから header.php と言うファイルを一つ、 wp-content/themes/graphy-custom ディレクトリにコピーします。
 今回はそのコピーしたファイルの末尾に Breadcrumb NavXT プラグインが指定する 以下のコードを付け加えました。
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
 基本はこのように親テーマからカスタマイズして上書きしたいファイルを 子テーマへコピーしてカスタマイズしていくのですが、例外があります。
 それが子テーマ作成の時に最初に作った style.css と functions.php です。

 style.css は最初に子テーマのためのメタ情報を書いてしまうので、 このままですと親テーマのスタイルシートを読み込まないので、 functions.php ファイルにおまじないのコードを書くわけです。
# おまじないは子テーマ作りの時に functions.php に書いたコードです。

 ただ functions.php は違います。
 このファイルはたとえ子テーマに同名のファイルがあっても、 先に親テーマの functions.php は必ず読み込まれます。
 親テーマの functions.php が読まれてから、子テーマの同名のファイルを読み込むという動きをするので、 基本、子テーマでは追加したい機能だけをここに追記すればいいことになります。
 ただし、このような動きをするために、親テーマが functions.php に記載して実現している機能は、 削除できないと思った方がいいでしょう(やれば出来ないことはないです)。

 あとは追加したパンくずナビゲーションのためのスタイルシートを追記してやればいいのですが、 このあたりの見栄えの微調整は、ページめくり機能のカスタマイズを説明したあとにまとめてします。

 では次回からはページめくりの機能追加(と言うより機能強化)について説明します。

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識: Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #0 」
Posted on Nov 09, 2015 at 22:43

WordPress 仕事で得た知識: Graphy カスタマイズ #3

Image:Computer/20150912iPadPro.jpg
 前回までで、親テーマと同じ動きをする子テーマを作るところまでお話ししましたので、 いよいよこの子テーマに対して、手を加えていきます。

 まずはパンくずナビゲーション (breadcrumb list)を付加する方から。
 今回採用した Graphy と言うテーマ、 ほぼ唯一と言っていいほど、今時のページ構成を考えると「なぜないんだろう」と思える機能で、 備わってないのが、このパンくずナビゲーション。
 パンくずナビゲーション、もしくはパンくずリストは 個別ページを見たときに、サイト内での位置を示し、サイト内での遷移をサポートするものです。

 WordPress の場合、 テーマがこのパンくずナビゲーションの機能を備えていなくても、 この機能を実現する方法はいくつかあって、今回は Breadcrumb NavXT という プラグインの力を使って実装しました。

 そんなに複雑な機能を提供するプラグインではないですし、 Breadcrumb NavXT の 設定に関しては、以下のサイトをご参照下さい。

AdminWeb 「 Breadcrumb NavXT プラグイン(パンくずリストの表示)」

 問題はこのプラグインを導入すると、生成されるパンくずナビゲーションを表示させるために、 以下のコードを適切な位置に挿入しなければいけないところにあります。
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
 通常、 WordPress のテーマを構成するファイルは 多数のファイルで構成されており、例えば、今回例に挙げている Graphy だと 60 ファイルくらいあります。
 この中から適切な場所に表示するためには、どのファイルを変更すれば良いのか? ある程度、テーマがどういう仕組みで構成されているのかわかっていないと出来ません。

 事前にページの上部に表示させることを決めていたので、 header.php を触れば良さそうだということはなんとなくわかったので、 今回は事なきを得ましたが、このようなテーマをカスタマイズしなければ 機能を提供できないプラグインの採用は、 よくよく WordPress のテーマの仕組みを 理解していないと難しいと思います。

 では実際、前回、たった二つのファイルしか作らなかった子テーマを、 どのようにカスタマイズしていくのか、次回、具体的に説明します。

Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識: Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #0 」
Posted on Nov 05, 2015 at 22:09

Windows 10 2-in-1 端末、どれを買うべきか?揺れる…

「 ASUS 、実売約 32,000 円の 8.9 型 2-in-1 」PC Watch より)

 システムエンジニアとして復帰したために、やはり持ち歩いても苦にならない端末が必要になって、 Windows 10 2-in-1 端末を、この年末までに買うことは決めていたのですが、 昨日までは、ASUSTransBook T100HA日本 HP Pavilion x2 10-n100 を 天秤にかけて、正直、迷っていました。

 実際、店頭で実機( Pavilion x2 10-n100 はまだ未発売なので現行機 Pavilion x2 10-n000 )を触ってみたのですが、 キーボードのフィーリングは明らかに Pavilion x2 10-n100 の方がしっかりしていたので、 これにちょっと傾いていました。

 ただ心のどこかで、ASUS から TransBook T90CHI の後継機はでないのか?…引っかかってはいました。

 でました!今日発表になりました。ただね…  後継機と言うより、オペレーティングシステムを入れ替えた ハードウェアはそのまんまの TransBook T90CHI orz

 どうなのよ、これ?> ASUS

 ただ実売 約 32,000 円前後という大幅にプライスダウンされています。
# Office Mobile になったことが多分に影響していると思われます。

 価格に釣られて、ポチってしまいそうになりましたが、 ちょっと画面が小さすぎやしないか、 やはり SE がもつ小道具として通常サイズの USB ポートが一つもないっていいの?とか、 Atom Z3775 と Atom x5-Z8300 との性能差って一体どれくらい?…疑問はつきません。

 ただ実売 約 32,000 円前後と言うプライスは、これくらいの悩みなら吹き飛ばし兼ねないインパクト… うーん、悩むなぁ… (_ _;>

Ellinikonblue.com Weblog
「 Windows 10 2-in-1 端末を買うぞ!っと…」
「 HP ENVY 8 Note が気になる感じ」
Posted on Nov 05, 2015 at 00:20

nasne 便利です! (^^)b

 先般、購入して使い始めた nasne ですが便利です (^^)b
Image:Computer/20151103nasne.jpg
 とりあえず、クライアントとしては、これも今夏入手した ASUS ZenPad 8.0 Z380KL に torne mobile をインストールして使っていますが、 これが軽快に動く上に、オンタイムで TV を見ても、録画した VTR を見ても、 これといってトラブルもなく、快適に使えています。

 実は ドコモ Xperia Z3 Compact SO-02G にも TV SideView と言うアプリケーションがプリインストールされているのですが、 Playstation Online などのアカウントでログインしないとほとんど何も出来ない代物で、 対して torne mobile はアプリ内課金を済ませなくても、 1 分間なら TV も VTR も見られますし、ほぼフル機能が使えます。
 一度、torne mobile を使っているとこちらの方が明らかに使い勝手が直感的ですし、 ま、タブレットにインストールしていることもあって、torne mobile で十分と言う気がします。

 また、nasne を普通に設定するだけで、 外出時も録画した番組を見ることが出来ます。これにはちょっとびっくり。
 どういう仕組みで見ることができてるのかわからないのと、 パケット代が怖いので使ってませんが、旅行の時とか便利かも…と思いました。

 使い初めて、このところ、腰を据えて TV を見る機会が少なくなってきていたのですが、 タブレットでどこでもいつでも見られると思うと見るんですね。やっぱり。

 競馬関係の番組だけでなく、最近始まった「 機動戦士ガンダム 鉄血のオルフェンス」 まで見始めてしまっています ^^

 そろそろ PC TV with nasne の方もお試し期間が切れるので、 こちらも特にトラブルというトラブルもないので、買ってしまおうかと思っています。
nasne 1TBモデル (CECH-ZNR2J01)【メーカー生産終了】
( ソニー・インタラクティブエンタテインメント )
¥17,500
Ellinikonblue.com Weblog 「 まずは nasne を買いました」
Posted on Oct 29, 2015 at 19:12

WordPress 仕事で得た知識: Graphy カスタマイズ #2

 WordPress でサイトの見栄えを変更するために、 「テーマ」という仕組みが用意されていますが、前回、WordPress 仕事をした際、 Graphy というテーマを ベースにしてサイトを構築しました。

 前回のエントリで WordPress でテーマをカスタマイズしていくときは、 「子テーマ」という独特の作法があって、今回も Graphy の 子テーマを作ってこれをカスタマイズしました。

 なぜ「子テーマを作る」などという手数を踏むかというと、 昨今、 WordPress にはオートアップデート機能があって、 本体はもちろん、プラグイン、テーマもこのスキームで最新のバージョンを簡単に維持することが出来ます。

 ただ、テーマがアップデートされると、カスタマイズした部分との差分だけがアップデートされる…なんてことは当然なく (^^; 、 このため子テーマを作っておけば、親テーマがバージョンアップしても影響が最小限に抑えられ (理由はあとあと説明します)、最悪、親テーマに戻せば大きく表示が崩れることも防げます。

 子テーマ作りはさほど難しくありません。
 WordPress がインストールされたディレクトリには、 wp-content/themes と言うディレクトがあり、基本、 WordPress で使用する テーマのファイルはすべてこれ以下にあります。
 まずこの wp-content/themes ディレクトリに子テーマのためのディレクトリを新たに作成します。
 今回は Graphy の子テーマを作成を例にしますので、 ここでは graphy-custom と言うディレクトリを作成したとします。

 次に作成した graphy-custom ディレクトリ直下に style.css という CSS ファイルを一つ作成します。 中身は以下の通りです。
/*
Theme name: graphy custom
Template:   graphy
*/
 Theme name には作成する子テーマの名前、Template は親テーマの名前です。

 次に functions.php という php ファイルを一つ作成し、以下の内容を記載します。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
実は親テーマとまったく同じ動作をする子テーマの作成作業はたったこれだけで終了です。

 ここまでの作業が終了すれば、新たに作成した子テーマを WordPress の管理画面から選択できるようになります。

 ここからカスタマイズした部分の説明をしていくことにします。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
プライム・ストラテジー株式会社 著
( SBクリエイティブ )
¥2,772
Ellinikonblue.com Weblog
「 WordPress 仕事で得た知識: Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識: Graphy カスタマイズ #0 」
Posted on Oct 26, 2015 at 21:40

まずは nasne を買いました

Image:Computer/20151025nasne.jpg
 Skylake への第一歩!と言うほど強い意志で遂行したわけではないのですが、 nasne ゲットしました!
nasne 1TBモデル (CECH-ZNR2J01)【メーカー生産終了】
( ソニー・インタラクティブエンタテインメント )
¥17,500
 思ったより小さくて、外装の箱も、取り出してみた本体も、ちょっとおしゃれな外付けハードディスクくらいのサイズ。
 正直もう二回りくらい大っきいものを想像してました。このサイズで 1TB の容量があります。

 セットアップも簡単 (^^)b
 B-CAS カード差し込んで、アンテナ線と LAN ケーブルを差し込むだけ。 あとは nasne に割り当てられた IP アドレスにブラウザでアクセスすれば、 設定画面には入れます(ここでチャンネル設定などを行います)。

 Windows PC なら UPnP で「メディア機器」として nasne が見えるので、 プロパティを開けば、IP アドレスは確認できます。
 設定に PlayStation のたぐいの機器は必要ありませんでした。

 まだ体験版での利用ですが、自宅の自作機にインストールした PC TV with nasne でも、 ASUS ZenPad 8.0 Z380KL から torne mobile でも TV 視聴および録画した番組は問題なく視聴できてます。

 問題がないようなので、時間のあるときに PC TV with nasne も torne mobile もライセンスを購入しようかと思っています。

 詳しくはもうちょっと触ってから。。。ということで (^^)/
Posted on Oct 25, 2015 at 22:29

WordPress 仕事で得た知識: Graphy カスタマイズ #1

 前回、WordPress のサイトを構築する際、 ほぼ唯一と言っていいほど、改めて知識を収集して対応した作業が、 「テーマのカスタマイズ」でした。

 テーマとしては Graphy という タイポグラフィにこだわったシンプルなテーマで、シンプルなだけにデザイン的に手を入れる余地もあり、 「真っ白なキャンバス」のように見えたのが、採用にいたった一因です。

 ただそのまま、何も手を加えずに使っているかというとそうではありません。

 これは何も Graphy という テーマの問題ではなく、 WordPress という仕組みそれ自体の 自由度がもたらす問題で、「プラグイン」というロジックの拡張の仕組みと、 「テーマ」というデザインの変更の仕組みをもちながら、これらが完全に独立しておらず、 例えば「テーマ」にロジックを組み込んでしまうことが出来ます。

 これの何が問題かというと、選ぶテーマによって、 機能的に出来ること出来ないことがあって、選んだテーマによっては、 プラグインと機能が重複してしまう、もしくはテーマに手を入れなくては プラグインが使えなくなってしまいます。

 前回のエントリでも書きましたが、WordPress では、 テーマを切り替えることで見栄えだけは簡単に変わります。
 ただ、機能性まで考慮に入れると、特定のテーマを前提に導入するプラグインを決めるので、 実質、見栄えだけのためにテーマを変えるということはおいそれと出来ないということです。

 と言うことで、前回、選んだこの Graphy と言うテーマ、 結構、機能的にも良く出来てはいるのですが、 いろいろディスカッションしているうちに、以下の機能を実装するためにテーマに手を加えざる得なくなりました。
  1. パンくずナビゲーション (breadcrumb list)
  2. ページめくり (pagination)
 またこのようにテーマをカスタマイズする際、「子テーマを作る」という WordPress 独特の作法があります。

 ということで、まずは子テーマ作りから話をまとめます。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
プライム・ストラテジー株式会社 著
( SBクリエイティブ )
¥2,772
Ellinikonblue.com Weblog 「 WordPress 仕事で得た知識: Graphy カスタマイズ #0 」
Posted on Oct 21, 2015 at 20:17

Windows 10 2-in-1 端末を買うぞ!っと…

「 ASUS、2-in-1 の TransBook T100 にメモリ/ストレージ倍増モデル追加」 ~ 42,800 円と低価格な 14 型スタンダードノートも用意
「 日本 HP 、『 Pavilion 』ブランドのゲーミングモデルなど個人向けノート PC 3 機種」
(以下、PC Watch より)

 今年の 7 月から一介のシステムエンジニアとして現場に復帰すことになり、 早三ヶ月が経つわけですが、やはり移動時間が多くなってくることもあって、 持ち歩くことが苦にならない Windows 端末が欲しくなってきています。

 自宅で使っている MacBook Air ではちと重く、 またこれも丸三年使っているので、自分への理屈づけも出来ていて (^^; 、 どれにしようか悩んでいる最中です。

 ひとまずは今のところ ASUS TransBook T100HA を 最右翼に考えているのですが、先般、発表された HP の ENVY 8 Note (日本未発表モデル)や、 すでに 日本 HP から発表になった Pavilion x2 10-n100 も、結構魅力的だなと思っていました。  TransBook T100HA に関しても、 今回、メモリ/ストレージ強化モデルが追加されました。

 明日 22 日は、日本マイクロソフト から Surface の展開について発表もあるみたいだし… これを皮切りにいろいろまだ年末までに出てきそう…う~ん、じっくり考えます。

 たぶん悩んでる今が一番楽しいはずだから… d(^^;

 いや、仕事的には早く欲しいんですけど (^O^;;;

Ellinikonblue.com Weblog 「 HP ENVY 8 Note が気になる感じ 」