Ellinikonblue.net Devlosxom

ここはまだ壮大な夢の途中…

Posted on Dec 09, 2011 at 17:35

Facebook の「いいね!」ボタンも足してみた

 ちょっと前から、流行に乗って あっちこっち でも ソーシャルサービス系のボタンを設置しているのですが、 やり始めたときは Facebook は 対策考えないと対応できないように思っていたのですが、 別の目的でソースをいじり始めて煮詰まったときに、 気分転換に Facebook を見たら、 思いの外簡単に設置できるように変わった(?)みたいなので、試した見たらできてしまった (^^;>

 まず head フレーバーに以下のおまじない。
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 <body> タグの直後が理想と書いてあったので、素直にそこに設置。 レイアウト的には特に問題はありませんでした。

 で、すでに設置してあるのを含めて、 先般、 さらした story フレーバーの一部を以下のように変更。 他のボタンの順番も入れ替えたので、全部さらしときますが、 Facebook のは一番下の三行。
<!-- はてなブックマークボタン -->
<a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="$blog_title - $title"
  data-hatena-bookmark-layout="vertical"
  title="このエントリーをはてなブックマークに追加"><img
  src="http://b.st-hatena.com/images/entry-button/button-only.gif"
  alt="このエントリーをはてなブックマークに追加"
  width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"
  charset="utf-8" async="async"></script>
<!-- Tweet Button(Tweeter Official) -->
<a href="http://twitter.com/share" class="twitter-share-button"
  data-url="$url$path/$fn.$default_flavour"
  data-counturl="$url$path/$fn.$default_flavour"
  data-text="$blog_title - $title"
  data-count="vertical" data-lang="en">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Google +1 -->
<g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>
<!-- Facebook Like Button -->
<div class="fb-like" data-href="$url$path/$fn.$default_flavour"
  data-send="false" data-layout="box_count"
  data-show-faces="true"></div>
 Facebook からコードをもらうと data-width と言う引数があるのですが、これはなくてもいいみたい。 取得したコードは 450 とか言う値が与えられてて 思いっきりレイアウトを崩してくれたので抹殺したけど、 特に問題なく表示されています。

 これで一通りそろったかな>ソーシャルサービス系リンク対応
 え!? mixi ?…そんなサービスあったなぁ (<面倒なので遠い目しておく… (^^;> )

Posted on Nov 15, 2011 at 23:01

2011 年 11 月時点の story フレーバーをさらしておく

 zenback 対応 やソーシャルサービス系リンク対応などどうもうまくいっているようなので、 一次成果物としてstory フレーバーをさらしておきます。

 何かのご参考に。ご参考にされる方がいればの話ですが… f^^;
<div class="article">
  <h2 class="title"><!-- zenback_title_begin -->$title<!-- zenback_title_end --></h2>
  <p class="meta">$mo $da, $yr at
    <a href="$url$path/$fn.$default_flavour" 
      title="このエントリー「 $title 」への恒久的な URL">$ti</a> in
    <a href="$url$path" 
      title="カテゴリー「 $categories::name 」のエントリーを表示">$categories::name</a> |
    <a href="$url$path/$fn.$default_flavour#trackbacks"
      title="このエントリー「 $title 」へのトラックバック">トラックバック</a>
    ($writeback::tb_count) |
    <a href="$url$path/$fn.$default_flavour#comments"
      title="このエントリー「 $title 」へのコメント">コメント</a>
    ($writeback::cm_count)
  </p>

  <div class="paragraph"><!-- zenback_body_begin -->
    $body
  <!-- zenback_body_end --></div>
  <!-- zenback_date $yr-$mo_num-$da -->

  <?$path_info like="(^[^\.]+/?$)|(^$)|(index\.\w+$)">
  <div class="snsbutton">
    <g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>
    <!-- Tweet Button(Tweeter Official) -->
    <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="$url$path/$fn.$default_flavour"
      data-counturl="$url$path/$fn.$default_flavour"
      data-text="$blog_title - $title"
      data-count="vertical" data-lang="en">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- はてなブックマークボタン -->
    <a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour"
      class="hatena-bookmark-button"
      data-hatena-bookmark-title="$blog_title - $title"
      data-hatena-bookmark-layout="vertical"
      title="このエントリーをはてなブックマークに追加"><img
        src="http://b.st-hatena.com/images/entry-button/button-only.gif"
        alt="このエントリーをはてなブックマークに追加"
        width="20" height="20" style="border: none;" /></a>
    <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"
      charset="utf-8" async="async"></script>
  </div>
  </?>
</div> <!-- End of .article -->

$push_if_first::data
Posted on Oct 10, 2011 at 22:34

blosxom を引っ越してみて気づいたこと

 ホスティングから VPS サービスへという久々に大きな引っ越しをやってみて、 過去、全くドキュメントを残していなかったことを反省した次第で、 改めて今回やったことをまとめておきます。

 まずはファイルを全コピーしてから以下の作業を実施。
  • blosxom 関連の ファイルをコピーしたディレクトリで CGI の実行が可能な設定になっていることを確認
    (今回は個別に .htaccess で設定)
  • 基本ディレクトリは 755 、ファイルは 644 でパーミッションを設定。 blosxom.cgi だけ例外で 755 でパーミッション修正。
  • blosxom.cgi の修正
     blosxom は blosxom.cgi 本体にフルパスで設定を書くのでこれを修正。
  • プラグインの修正
     フルパスを記述しているプラグインは設定変更(ソースの書き換え)が必要
    • bfep プラグイン (bsnap_hs/bsnap_lt/bsnap_tx)
    • gsitemap プラグイン
       サイトマップファイルを出力するパス設定の変更が必要
  • プラグインが生成するキャッシュに書き込んであるパスの変更
    • kache_index プラグイン
    • categories プラグイン(オリジナルで現在作成中のプラグイン)
 その他、 VPS 環境に特化した話ではないですが、 Ellinikonblue.com Weblogblosxom が動作するためには、 Linux の標準的なディストリビューションで Perl がインストールされている場合に 用意されるライブラリー以外に以下の CPAN モジュールが必要でした。
  • Jcode.pm
  • LWP::Simple (bsnap_asin)
  • SHA256.pm (bsnap_asin)
 以上、ひとまず記憶に残っていたものを記録しておきました。 次回、またこんなことをしなければいけない事態になったらきっと役に立つでしょう f^^;
Posted on Sep 25, 2011 at 00:36

AWStats を設定しようと思いますが…

 夏休みの宿題としていた あっち の VPS への移行は 無事何とか終了し、終わってみると Apache のチューニングなどで心配していたパフォーマンスも 問題ないレベルです。

 ただし、これまで利用していたサーバーは Apache のログ解析において、 Webalizer が提供されていたので、 これをそれとなく眺めていたのですが、 今回の VPS はすべて自力が基本です。
 面倒なことも手伝ってどうしようかと思っていたのですが、 いろいろ調べてみて AWStats と言うツールが どうもおもしろそうで、インストールについても下記のサイトなどが参考になりそう (._.)φ

はじめての自宅サーバ構築 - Fedora/CentOS - 「 Web ページアクセスログ解析 (AWStats) 」
CentOS で自宅サーバー構築 「 Apache アクセスログ解析 (AWStats) 」
Scientific Linux で自宅サーバー構築 「 Apache アクセスログ解析 (AWStats) 」

 ちょっと時間を見てやってみようかと思っています。
 まぁ焦る必要もないですし、折角、 あちら にも MODx を導入して、 その設定のすりあわせをしてから、 MODx での コンテンツの展開にも入れていきたいなぁと 考えているので、まぁまだまだいろいろ楽しめそうです ^^
Posted on Aug 24, 2011 at 23:45

VPS を設定する

さくらインターネット創業日記
「 ウェブ開発者のための、 1 時間でできる LAMP 環境構築術( CentOS 編)」
「 CentOS をサーバーとして活用するための基本的な設定」
浜村拓夫の世界 「 さくらの VPS 設定ガイドリンク集 厳選 140 \(初心者歓迎)/」
新卒インフラエンジニア2年目 「 さくら VPS で一日 6 万 PV を処理するためにしたこと」

 ただいま、あちら のために、 せっせと VPS を設定中でやっと Apache の設定が何とか 終わったところで、いよいよ あちら にも MODx を導入することもあって、 まだまだこれからという感じです。

 最も安いプランでどこまで行けるかのチャレンジと、 少ない空き時間とのせめぎ合いで、先は長そうですが、 上記に列挙したサイトなどを参考にせっせとやっています。
 えぇブックマーク代わりのまとめです f^^;
Posted on Aug 12, 2011 at 22:29

まだまだやります

 悲願だった あっち のフレーバーの 入れ替えも終わり、あちら は これから VPS サービスへの引っ越しに移りますが、 なんせ違うブログで同じフレーバー使っていると紛らわしいことこの上ないことがよくわかったので、 こっちこっち で 新たなフレーバーを作って入れ替えたいと思います。

 デザインのアイデアはあるので(それがよいものかはひとまずおいといて)まだまだやっていきます! ということで、まぁ見た目、あっち に採用した フレーバーもまだまだこれからだと思っていて、別にフレーバーを量産する気はないですが、 ちょっとでもましなものができるのなら、アイデアがあるうちはやっておこうかと。
 時間ができれば、 Photolog の方も何とかしたいですしね…
Posted on Jul 12, 2011 at 21:34

To Do リスト 2011/7/12

 節電対策のため、本業で時間外労働が 9 月末まで原則禁止になったので、 これはチャンスとそれまでの間、サイトメンテに勤しむことにしました。
 そもそもにして Ellinikonblue.com Weblog の 荒れ方はひどく、放置プレーサイトの一歩手前になっていたこと、 Sass のおかげで嫌気が差すことがなく、 フレーバーの CSS を何とか体裁が保てる程度に書ききれた( 2011/7/12 現在の ここ のフレーバーがそれ)ので、 この辺で見切りをつけて畳みかけることにしました。

 サイトのメンテ以外にも実はサーバーの移転など夏中にやりきりたいことがあり、 懲りずにまた To Do リストを作ってみる。えぇ計画を立てるのは好きです。 完遂できるかはさておいて…

  • コスト削減のため、サーバー引っ越し
    (すでにレジストラは移管済み)
    1. メールサーバー移転とこれに伴って DNS の変更
    2. ウェブサーバー移転とこれに伴って DNS 更新
  • Ellinikonblue.net 側トップページ更新
  • Ellinikonblue.com Weblog のメンテ
    1. フレーバー入れ替え後に見栄え調整
      上記、ウェブサーバー移転は段取りとしてはこれが終わってから
    2. 過去のエントリの整理(できれば)
  • 新規ウェブサーバ構築
    VPS サービスを利用する気でいますが、まだ借りてもない状態てかサービス吟味中。 早々に決着つけて、Ellinikonblue.com 側にも MODx 導入予定

 ひとまず今週末、メールサーバーに移転から手をつけ、 並行して Ellinikonblue.net 側トップページを更新、 次にEllinikonblue.com Weblog のメンテして、 見切りがついたらウェブサーバーに取りかかる。

 以上、気合い込みの予定 d(^_-)-*
Posted on Jun 05, 2011 at 21:11

Google +1 ボタンも追加してみる

「 Googleの「 +1 」ボタン、一般サイトでも設置可能に」INTERNET Watch より)

 Twitterはてブ のボタンをつけて悪戦苦闘としていたところで、 2 つやるのも 3 つやるのも一緒ということで、 ついでに +1 ボタン も つけてみました。

 head フレーバーで以下のように JavaScript を読み込みます
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: 'ja'}
  </script>
 で、story フレーバーには以下のように追加します。
  <g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>
 う~ん、なかなか Goog Job (^^)b

 ということで、これを あっち に反映させる ためにも、少々気合いを入れてフレーバーともう少し格闘してみます。
Posted on May 29, 2011 at 22:51

Tweet ボタンをエントリ個別に表示する

 Twitterはてブ のリンクボタンをつけようとして 先般、 失敗しました あと、 その後、すぐに成功していたのですが、メモるの忘れてました。
# ただいま Sass に夢中 )^^(

 Twitter のページでボタンを作ると 以下のようなコードが得られます。
<a href="http://twitter.com/share" 
  class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 実はこれ、引数がたりなくって、 blosxom の場合、 フレーバーには以下のように書けばいいみたい。
<a href="http://twitter.com/share" class="twitter-share-button"
  data-url="$url$path/$fn.$default_flavour" data-counturl="$url$path/$fn.$default_flavour"
  data-text="$blog_title - $title"
  data-count="horizontal" data-lang="en">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 ココログ には最近このボタンが表示されるのを 思い出して、 自分のとこ を参考にしました。

 ただこの Twitterはてブ のボタン、うまくマークアップできなくって それも含めて今、Sass で格闘中。 CSS3 もちょっと勉強中。。。
Posted on Apr 28, 2011 at 18:13

Sassy CSS 環境設定できた!

オープンソースソフトウェアとかウェブ技術とか 「 Ubuntu 10.10 で Sass/Compass を使う(環境設定編)」

 Sassy CSS(SCSS) を使ってみたく ruby も知らない haml も知らない輩が、 先般、チャレンジした わけですが 見事に玉砕。
 何が悪いんだろうと、sass の チュートリアル(むろん 日本語訳 )を 熟読してみると SCSS のサポートは Sass 3.0 から サポートされた機能だと言うことに気がつきました。
sass -v
などしてみると表示されているのは 2.x 。
これか!と一瞬、どや顔になってアップデートを試みるも、 何度アップデートかけても最新版がインストールされているような表示がされます。
 で、しつこく調べた結果、当たったのが 上記の ドキュメント
 OS (Ubuntu) のせい やったんかい! orz

 Ubuntu 10.04LTS で rubyhaml を ( apt-get で) インストールしたどこかの時点で /usr/bin 以下に haml/sass のバイナリがあり、 gem でインストールされる haml /sass は /var/lib/gems/1.8/bin 以下にあったというオチ orz
 実際、最新 sass で てきとーにつくった SCSS ファイルをコンパイルしてみると…できるじゃな~い (^^)b

 ということで、ちょうど最近、Ellinikonblue.com 側の トップページを書き直そうとしていて、 その CSS を SCSS から書いているのですが、これがすごい。
 何がすごいって見渡せば、すぐに何が書いてあるかわかる。 伝わらないかも知れないですが、個人的には文明開化級のインパクトです… が、その話は成果諸共また後日。今回はトラブル解決まで。
Posted on Mar 21, 2011 at 23:19

Sassy CSS(SCSS)

hail2u.net 「 Sass、そしてSassy CSS (SCSS) 」

 最近時間ができても、何か生産するという意欲が湧いてこず不抜けているので、 忘れないうちにメモっておく。

 CSS(Cascading Style Sheet) の文法を拡張するメタ言語 Sass … 砕いて言うと Sass で書いてコンパイルすると CSS になってくれるのだが、これの何が凄いというと、 CSS は単にスタイル定義の箇条書きにしかならないところが、 Sass で記述すると、 プログラム言語チックな意味をもたせた記述ができると言うこと。

 ちょっと個人的には文明開化級の代物に出会った気でいるのだが、 Linux で Ruby をインストールして haml gem をインストールしても動かねぇやん orz

 Ruby は全然知らねぇので、 あとでじっくり再チャレンジする。
Posted on Feb 13, 2011 at 22:37

Silverlight 4 アプリケーション開発に必要なツール

 Adobe AIR なり マイクロソフトSilverlight なりの RIA(Rich Internet Application) 開発環境で、 ちょっとしたデスクトップアプリを作ってみる機会があって、 そのときに無償で使える開発環境をちょいと調べました。

 Adobe AIR の方は、 EclipseAptana で 簡単なアプリくらいであれば作れる環境はすぐ整うのですが、 Silverlight の方はちょっとこけました。

 C# をちょっと覚える気でセットアップしたのですが、 Silverlight SDK の他に 以下のものが必要。
  • Visual Studio 2010 C# Express
  • Visual Web Developer 2010 Express
  • Silverlight 4 SDK
  • Silverlight 4 Runtime for Developer (開発者向け Runtime )
 デスクトップアプリを組むのに Web Developer が必要と言うとこに気がつくまで結構かかりました。 またこれが Web Platform Installer から インストールしなければならない罠。

 また必要になったときの備忘録 (._.)φ
Posted on Jan 24, 2011 at 22:37

ソーシャルサービス系リンク機能に対応してみた結果

 zenback を導入してからの傾向を Analytics でみてみると、 こっち は 気のせいくらいのトラフィックしかないけど、 むこう は統計的に見られるくらいの 結構なトラフィックはあるので、平均サイト滞在時間が伸びてきていることが 確認できたので非常に気をよくしました。
 おまけに記事をつぶやいてもらったり、「いいね!」押してもらえると、 中の人が結構うれしがっていることも客観的にわかり f^^; 、 もうちょっとソーシャル系サービスとの連携を計ってみることにしました。

 ひとまず各エントリ個別のページは zenback が あるのでこれで由として、トップページを見たときに各エントリごとのボタンがないので、 ここを対応してみることにしました。

 しかし、 Twitterはてブ はどうってことなかったんですけど、 Facebook がこまった。
 なぜかというとボタンにくくりつける URL を API に渡すときに URI エンコーディングしなければならず、 blosxom の フレーバーいじってちょいちょいなんて簡単にはいかなさそう。。。
 JavaScript でごりごりって方法も考えたけど、 あまりにも美しくないコードしか浮かんでこなかったので躊躇。
 blosxom 用に プラグインを作っている人もいらっしゃったのだが、 これはちょっと個人的な利用目的と違うもので、かといって自前でプラグインをつくたる! ってほどのモチベーションは、今回はない (^O^;
 blosxom 本体に 手を入れるのが一番手っとり早い気がするのだが、それは御法度。
 Facebook 対策は もうちょっと時間をかけて考えることにしました。
 ま、そもそも自分で Facebook 登録してないから 対応しても確認のしようもないし… (^O^;A

 ということで、今回は Twitterはてブ 対応を以下のような感じで フレーバーの story.html に追加。お気軽簡単 (^^)b
<div class="article">
  <h2>$title</h2>
  <p class="meta category">[
    <a href="$url$path" 
      title="カテゴリー「 $categories::name 」のエントリーを表示">$categories::name</a>
    ]</p>
  <div class="paragraph">
    $body
  </div>
  <p class="meta date">$mo $da, $yr at
    <a href="$url$path/$fn.$default_flavour" 
      title="このエントリー「 $title 」への恒久的な URL">$ti</a> |
    <a href="$url$path/$fn.$default_flavour#comments"
      title="このエントリー「 $title 」へのコメント">コメント</a>
    ($writeback::cm_count) |
    <a href="$url$path/$fn.$default_flavour#trackbacks"
      title="このエントリー「 $title 」へのトラックバック">トラックバック</a>
    ($writeback::tb_count)

    <?$path_info like="(^[^\.]+/?$)|(^$)|(index\.\w+$)">
    <br />
    <!-- Tweet Button(Tweeter Official) -->
    <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="$url$path/$fn.$default_flavour" data-text="$blog_title - $title"
      data-count="horizontal" data-lang="en">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- はてなブックマークボタン -->
    <a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour" class="hatena-bookmark-button"
      data-hatena-bookmark-title="$blog_title - $title" data-hatena-bookmark-layout="standard"
      title="このエントリーをはてなブックマークに追加"><img
      src="http://b.st-hatena.com/images/entry-button/button-only.gif"
      alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
    <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"
      charset="utf-8" async="async"></script>
    </?>
  </p>
  $push_if_first::data
</div> <!-- End of .article -->
 これでブログのトップを見ても各個エントリごとのつぶやきとブックマーク数は視認できる。 良 (^^)b

…と思ったのですが、1ページに複数ボタンを配置するととんでもなく重くなったので ちょっと導入は見送り。ひょっとしたらこうやって使うものではないかもしれない。
 Facebook と併せてもうちょっと試行錯誤…

JeffreyFrancesco.org 「 Blosxom Plug-in : facebook (いいね!ボタンを簡単に導入するためのプラグイン)」