Ellinikonblue.net Devlosxom

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

Dec 09, 2011 at 17:35 in フレーバー | トラックバック (0) | コメント (0)

　ちょっと前から、流行に乗ってあっちやこっちでもソーシャルサービス系のボタンを設置しているのですが、やり始めたときは 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 ？…そんなサービスあったなぁ（＜面倒なので遠い目しておく… (^^;> ）

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

Nov 15, 2011 at 23:01 in フレーバー | トラックバック (0) | コメント (0)

　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

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

Oct 10, 2011 at 22:34 in ドキュメント | トラックバック (0) | コメント (0)

　ホスティングから 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 Weblog の blosxom が動作するためには、 Linux の標準的なディストリビューションで Perl がインストールされている場合に用意されるライブラリー以外に以下の CPAN モジュールが必要でした。

Jcode.pm
LWP::Simple (bsnap_asin)
SHA256.pm (bsnap_asin)

　以上、ひとまず記憶に残っていたものを記録しておきました。次回、またこんなことをしなければいけない事態になったらきっと役に立つでしょう f^^;

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

Sep 25, 2011 at 00:36 in ドキュメント » 参考資料・メモ | トラックバック (0) | コメント (0)

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

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

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

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

VPS を設定する

Aug 24, 2011 at 23:45 in ドキュメント » 参考資料・メモ | トラックバック (0) | コメント (0)

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

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

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

まだまだやります

Aug 12, 2011 at 22:29 in フレーバー | トラックバック (0) | コメント (0)

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

　デザインのアイデアはあるので（それがよいものかはひとまずおいといて）まだまだやっていきます！ということで、まぁ見た目、あっちに採用したフレーバーもまだまだこれからだと思っていて、別にフレーバーを量産する気はないですが、ちょっとでもましなものができるのなら、アイデアがあるうちはやっておこうかと。
　時間ができれば、 Photolog の方も何とかしたいですしね…

To Do リスト 2011/7/12

Jul 12, 2011 at 21:34 in その他（らくがき） | トラックバック (0) | コメント (0)

　節電対策のため、本業で時間外労働が 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(^_-)-*

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

Jun 05, 2011 at 21:11 in フレーバー | トラックバック (0) | コメント (0)

「 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

　ということで、これをあっちに反映させるためにも、少々気合いを入れてフレーバーともう少し格闘してみます。

「 +1 ボタンをサイトに追加 - +1 button API - Google Code 」

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

May 29, 2011 at 22:51 in フレーバー | トラックバック (0) | コメント (0)

　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 もちょっと勉強中。。。

Sassy CSS 環境設定できた！

Apr 28, 2011 at 18:13 in フレーバー » CSS | トラックバック (0) | コメント (0)

オープンソースソフトウェアとかウェブ技術とか「 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 で ruby や haml を（ apt-get で）インストールしたどこかの時点で /usr/bin 以下に haml/sass のバイナリがあり、 gem でインストールされる haml /sass は /var/lib/gems/1.8/bin 以下にあったというオチ orz
　実際、最新 sass でてきとーにつくった SCSS ファイルをコンパイルしてみると…できるじゃな～い (^^)b

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

Sassy CSS(SCSS)

Mar 21, 2011 at 23:19 in フレーバー » CSS | トラックバック (0) | コメント (0)

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

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

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

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

　Ruby は全然知らねぇので、あとでじっくり再チャレンジする。

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

Feb 13, 2011 at 22:37 in ドキュメント » 参考資料・メモ | トラックバック (0) | コメント (0)

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

　Adobe AIR の方は、 Eclipse や Aptana で簡単なアプリくらいであれば作れる環境はすぐ整うのですが、 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 からインストールしなければならない罠。

　また必要になったときの備忘録 (._.)φ

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

Jan 24, 2011 at 22:37 in フレーバー | トラックバック (0) | コメント (0)

　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

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

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