文系SE修行ログ

これは面白い試み、WordPressでWeb新聞を作るプラグイン。
単純に新聞風のCSSテーマにするだけでなく、印刷するときにうまく一枚に収まるようにプリント用CSSを設定してある。
こちらのサンプルを「印刷プレビュー」してみるとよく分かる。
→ サンプル新聞 Type2

新聞作成プラグイン / テーマ for WordPress

WordPressでオリジナル新聞を簡単に作成することができるプラグインとテーマです。
Webだけでなく、A4用紙印刷に最適化されていますので、実際に印刷して新聞として配布することも簡単です。
また、マガジン風デザインなどのテーマを適用することで、幅広いプリントメディアとしてもお使いいただけます。
「WP Newspaper Plugin and Theme」でWebメディアとプリントメディアの融合を、是非、お楽しみください
（WPNP » 新聞作成プラグイン / テーマ for WordPress - WordPress 新聞作成プラグイン/テーマ）

1枚以内に収めるために、字数をうまく調節しながら作成しなければ行けないが、WordPressのプレビュー機能は再現性が高いのでこの点は特に問題はなさそう。
それより気になるのは、5記事固定で設定されているらしいところ。新聞風ならいいが、実際に新聞として印刷するとなると、A4に5記事は一つ一つのスペースが少なすぎて何も書けない。

ともあれ、試みとしても面白いし、学級新聞レベルならうまく機能するだろう。
（…昔はわら半紙にプリントした学級新聞があったものだけど、今の時代はみんなデジタルでやっているのだろうか。）

関連する投稿

• 続々・投稿記事リストでサブメニュー (0)
• 人の作ったWordPressテーマにご用心！ (0)
• WordPressのWYSIWYG強化プラグイン (0)
• WordPressで月ごとに違った画像を表示してみる (0)
• WordPressでカテゴリごとに別のデザイン (0)

いやー、びっくりした。

自分のRSSがどんな風に出力されているか、試しに確認してみたら、ドイツ語だった。翻訳プラグインが暴走しているのか？ と思ったけど、読んでみると自分の投稿とは全く関係ないフィードだった。（第2外国語ドイツ語）

すぐに気付いたんですが、昨日切り替えたデザインの作者が、ヘッダーのRSS部分を自分のサイトのRSSにこっそり差し替えてたんですね。その辺の野良デザインじゃなくて、ちゃんとオフィシャルのWordPress › WordPress Themesから持ってきたんだけど、こういうこともあるんですねぇ。そりゃそこまでチェックできないしな。

フッターに自分の所への著作権リンクがあるくらいは、掲示板スクリプト等でもおなじみだからいいんですけど、まさかRSSを書き換えるとは思わなかった。そんなことしてそれほどメリットがあるとも思えないんですが…。

しかし、RSS程度ならまだいいですが、もっと凶悪なスクリプトを仕込まれていたら、もっと悲惨なことになっていただろう。

関連する投稿

• WordPressの新聞プラグイン/テーマ (0)
• 続々・投稿記事リストでサブメニュー (0)
• wp-pagenavi がなぜか表示されない場合 (0)
• WorPressにphpMyAdminを組み込むプラグイン (0)
• WordPressの管理画面が生まれ変わる『Admin Management Xtended』 (0)

『ブラッディ・マンディ』というドラマが始まりました。これはマガジンで連載している漫画の実写化で、天才ハッカーの主人公が、警視庁の秘密部隊と協力しながら事件の捜査をする、という漫画的ドラマだそうです。

だいたい、ドラマや映画で「ハッカー」というと、「それはねぇよ」というような妙な描かれ方をされていますが、このドラマは意外と考証、設定がしっかりしているようです。
こちらの記事で、主人公の「ハッキングシーン」が分析されてます。

休み時間の藤丸のクラック

休み時間にクラック用スクリプトを書いてクラックするみたいです。

直後に実際に攻撃スクリプトを実行します。 この番組，相当Pythonが好きなようです（笑）藤丸のターミナルには「falcon@ws2 # nasm sc3.asm」と「falcon@ws2 # python -i atk3.py web25.boucka.ru 2323 -f sc3」で既存の脆弱性を狙いリモートアタック。見事にroot権限を取得し攻撃先に侵入しました。多分オーバーフローさせて参照先アドレスを攻撃者の任意のものに書き換えて，書き換えた参照先に攻撃者の任意のスクリプトを置いておけば成功する脆弱性なのかなーっと思います。

ちなみに藤丸は侵入直後の「/var/www」ディレクトリで「ls -al」コマンドを発行しています。表示されるファイルは「.htpasswd」と「index.html」…。.htpasswdを公開ディレクトリに置いてあるし，.htaccessは無いし…よくわからないですね（笑）何の意図でしょうか。

rootなのでシャドーパスワードを走査できますね。「brute_des」でパスワードを探している様子が伺えます。

内部からポートスキャンしたのが監視システムにバレたらしく，藤丸は焦って自分の実行させているコマンドをkillしようとします。ターミナルには

「kill -9 $」や「>>>connkill() Stopping…」のような画面が見えます。 killが成功したようですが，ログの改ざんなどはしっかりやったのでしょうか…汗
（「ブラッディ・マンデイ」を考察する:高校生サーバー管理者の考察日誌 - CNET Japan）

ツッコミが細かい…。
映画『バトル・ロワイヤル』だと、ハッキングするシーンでただ延々と「ll」コマンドを入力しているだけだったりしたもんですが、これはドラマのメイン・モチーフだけあって、ちゃんと分かる人を制作スタッフに入れてやっているのでしょうね。

それにしてもちょっと気になったのは、このCNETの記事のライターである「高校生サーバー管理者」氏は、ドラマの主人公と同じく高校生なんですね。
ちょっと調べてみると、自宅サーバーを使って無料ホスティングサービスをやっているようです。

ホーム - ABELレンタルサーバーサービス
これ、デザインこそシンプルなテンプレートですけど、サービス内容はかなり充実してます。システム的にも、自動会員登録からWeb上のオリジナルコンパネまで作り込んでいるようで、素晴らしい物があります。

運営者情報を見てみると本当にまだ高校生なんですね。
運営者情報 | AbelProject

か、格好良いじゃないですか。
我々が社会人になってから、えっちらおっちらサーバ周りの勉強を始めている一方、物心ついたときから普通にネット環境があって、趣味の自宅サーバで無料ホスティングを始めてしまう高校生もいるわけです。こりゃーうかうかしてられません。

後生畏るべし。焉（いずく）んぞ来者（らいしゃ） 来者（らいしゃ）の今に如かざるを知らんや。

関連する投稿

• 人の作ったWordPressテーマにご用心！ (0)
• WordPressの新聞プラグイン/テーマ (0)
• WordPressのプラグインがエラーで動かなくなった！ (4)
• WordPressで月ごとに違った画像を表示してみる (0)
• WordPressでカテゴリごとに別のデザイン (0)

やっぱりなんだかんだ言って、Webサイトなりアプリケーションなりでユーザーにとって最も重要なのはデザインだったりするわけですよ。

しかもそのデザインというのは、見た目の綺麗さというよりも使いやすさ、ユーザーインターフェース（UI）です。開発側は往々にして機能最優先でこちらを二番手ぐらいにしてしまいますけど、両方大事なわけです。

先日、実家で新しい体重計を買ったんですが、この体重計、体脂肪から骨密度、筋肉量や基礎代謝まで図れる多機能体重計なんですが、これらの数値が１秒ごとにめまぐるしく２周表示されて、それで消えてしまう。こっちはどれがどの数値だかもよくわからず、慌ててメモして後で見なくてはいけない。

これは、機能が良くてもUIが粗悪なために、ユーザーに要らぬストレスを抱かせてしまっている典型的な例ですね。この体重計は聞いたことがない海外メーカーの安物でした。

ユーザー体験を決定的に左右するのは、機能それ自体よりもそのデザイン、インターフェースである、ということで、Web制作においてもモックアップ作成時から意識し愛知来たいところです。

上野氏は「とりあえず半分適当でもいいので、見た目を作ってそれを叩き台に」してみようと話す。まずはデザインを起こすということで、HTMLから作ってもよし、Photoshopなどのグラフィックツールでユーザーインタフェースを起こしてみてもよい。

　上野氏はモックアップ作成時の注意点として、「UIデザイン原則」を守ることが重要だと強調している。この原則は、

1. ユーザーに主導権を与える
2. 直接操作の感覚を与える
3. 一貫性を高める
4. 目に見えるようにする
5. 操作を可逆的にする
6. モードを減らす
7. エラーを回避する
8. マジョリティに最適化する
9. ユーザーの作業を加速化する

ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - page3 - builder by ZDNet Japan

関連する投稿

• 旧ブログからWordpress2.6への記事ログ移行 (0)
• 天才高校生サーバー管理者 (0)
• 人の作ったWordPressテーマにご用心！ (0)
• WordPressテンプレートの条件分岐 (0)
• WordPressの新聞プラグイン/テーマ (0)

メニューカテゴリごとに、ヘッダー画像なり見出しのスタイルなりを変えるのは、特に企業Webサイトを運用する際にはおそらく必須の仕様となる。

通常、僕はこういう際にはBODYタグなどにそのカテゴリのIDを出力して、CSSで

body#category {
background : url(....jpg)
}

などとして指定している。

WordPressをCMSとして運用する際は、

><?php $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>

と記述すると、カテゴリースラッグ（カテゴリURL用の別名）が出力できるので、これを利用して

body id=”company”

などとすることができる。

それにしても、カテゴリースラッグの変数って「nice name」なんですね。ナイスネーム…。ナイススティックを連想させます。（高校の頃よく食べてました）

関連する投稿

• WordPressで月ごとに違った画像を表示してみる (0)
• 続々・投稿記事リストでサブメニュー (0)
• WordPressの新聞プラグイン/テーマ (0)
• WordPressの同一カテゴリ内の記事リスト (0)
• WordPressで記事分割のカスタマイズ (0)

以前、IE6で透過pngを扱うことのできるJavaScriptライブラリを紹介した。（システム修行ブログ» ブログアーカイブ » IE6用透過pngデザイン）

が、実はメニュー部分でこれを使ったとき、Aタグのhover属性には有効にならないことが判明した。

試行錯誤の結果、こちらのサイトを参考に（CSSでブログデザイン IE6で透過PNGをロールオーバー）、JavaScriptではなく、CSSハックとの合わせ技で、IE6のときだけDirextX機能、アルファイメージローダーで画像を貼り付けるという手法で解決。

IE6透過pngテスト2
素晴らしい。『CSSでブログデザイン』様、ありがとうございます。

関連する投稿

• IE6用透過pngデザイン (0)
• WordPressの新聞プラグイン/テーマ (0)
• WordPressで月ごとに違った画像を表示してみる (0)
• WordPressでカテゴリごとに別のデザイン (0)
• 続々・投稿記事リストでサブメニュー (0)

概要。
季節・月ごとに違うデザインにしたいとき、トップページの画像（フラッシュ）を、月替わりで表示させたい場合のテンプレート記述。

<img src="image05.jpg">

などにして、月ごとの画像を出力するときに、数字部分を動的に切り替える。
「05」「06」などの文字列出力切り替えなので、css等にも応用可能。

インデックス(index.php)

インデックスページには、普通にindex.phpにPHPでdate関数を記述すれば出力される。便利ですね。

1

<?php echo date("m") ;?>

記事ページ

記事ページはちょっと厄介で、上記の記述だと、常に現在の日付で表示されてしまう。過去の記事は、そのときの月で表示されないと季節感が狂ってしまう。

リファレンスによると、the_dateというオリジナル関数でその記事の日付が取得できるらしい。

# 書式： # 説明： 記事の投稿/更新日を出力。PHPの日付文法が使用できる。同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される。# 位置： ループ内（テンプレートタグ/the date - WordPress Codex 日本語版）

ループの中だけ、ということなので、while文で囲む。さらにここでは月だけ出力したいので、引数はmをとって次のようになる。

1
2
3

<?php while (have_posts()) : the_post(); ?>
<?php the_date('m'); ?>
<?php endwhile; ?>

header.php

ちなみに上記記述部分はヘッダーの中にあったんだけど、header.phpは共通パーツになってしまうので、該当部分をindex.phpとsingle.phpにそれぞれ切り分けて解決。

関連する投稿

• WordPressでカテゴリごとに別のデザイン (0)
• 続々・投稿記事リストでサブメニュー (0)
• WordPressの新聞プラグイン/テーマ (0)
• WordPressの同一カテゴリ内の記事リスト (0)
• WordPressで記事分割のカスタマイズ (0)

Joomlaの記事表示・配置部分のテンプレートの場所を突き止めた。
「テンプレート」といっても、いわゆるテーマのテンプレートではなく、例えばカテゴリ内の記事をどのようにリスト配置するか、などのデフォルト挙動を司るテンプレートのことだ。

/components/com_content/views/

以下に、配置関連のテンプレートがおいてある。

例えばセクションのトップページの表示テンプレートならこの位置にある。

/components/com_content/views/section/tmpl

これでデザインの自由度は相当程度上がる。というよりここが修正できないと、実際にオリジナルデザインで運用するにはちょっと厳しい。

しかしテンプレートとは言っても、かなりのスパゲッティコードでしかもテーブルコーディングなので、それはそれでちょっと厳しい。

例↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
defined('_JEXEC') or die('Restricted access');
$cparams =& JComponentHelper::getParams('com_media');
?>
<?php if ($this->params->get('show_page_title')) : ?>
<div class="componentheading<?php echo $this->params->get('pageclass_sfx');?>">
	<?php echo $this->escape($this->params->get('page_title')); ?>
</div>
<?php endif; ?>
<table class="blog<?php echo $this->params->get('pageclass_sfx'); ?>" cellpadding="0" cellspacing="0">
<?php if ($this->params->def('show_description', 1) || $this->params->def('show_description_image', 1)) :?>
<tr>
	<td valign="top">
	<?php if ($this->params->get('show_description_image') && $this->section->image) : ?>
		<img src="<?php echo $this->baseurl . '/' . $cparams->get('image_path') . '/'. $this->section->image;?>" align="<?php echo $this->section->image_position;?>" hspace="6" alt="" />
	<?php endif; ?>
	<?php if ($this->params->get('show_description') && $this->section->description) : ?>
		<?php echo $this->section->description; ?>
	<?php endif; ?>
		<br/>
		<br/>
	</td>
</tr>
<?php endif; ?>

関連する投稿

• WordPressのサーバ移行 (0)
• WordPressで月ごとに違った画像を表示してみる (0)
• WordPressでカテゴリごとに別のデザイン (0)
• Joomlaの新規アカウントで「E_NOLOGIN_ACCESS」 (0)
• Joomla!エディターの切り替え方 (0)

マークアップエンジニア/CSSコーダーにとって、透過pngは鬼門である。

しかしクリエイティブ氏からこういうデザインを実現したい、という要望を受けた。
こういう場合、通常なら透過した部分をそのまま画像として切り出すのだけど、今回は背景画像が動的に切り替わるとのことで、メニュー部分を半透明にする必要がある。

そこで今まで試していなかったIE6用のJavaScriptライブラリを試してみることにする。
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

しかし、透過pngはIE6がなぜか対応していないので問題になる。現状のシェアでは、まだIE6を無視するわけにはいかない。

そこでkづあんのJavaScriptライブラリ「alphafilter.js」を導入してみると…。

IE6透過pngテスト
うまくいきました。

方法も、JavaScriptを読み出したら

画像のclass名にalphafilterを指定

    <img src="./sample.png" class="alphafilter" alt="" />

背景の透過ＰＮＧの場合は次のように行います。

    <p class="alphafilter">内容</p>

（IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌）

と、とてもシンプル。これは素晴らしい。
僕もいつかはこういう、人の役に立つ素晴らしい何かを作れたら、と思いつつ今日も勉強勉強である。

関連する投稿

• WordPressで月ごとに違った画像を表示してみる (0)
• WordPressでカテゴリごとに別のデザイン (0)
• IE6で透過pngのCSSマウスオーバー (0)
• 続々・投稿記事リストでサブメニュー (0)
• WordPressの新聞プラグイン/テーマ (0)