読者です 読者をやめる 読者になる 読者になる

TMD45INC!!!

tmd45++; // Deprecated

さくらのレンタルサーバに Ruby 1.9.3 と gem をインストール

Ruby さくらのレンタルサーバ gem

またレンサバかよ!!!メモ。
どうでもいいけど私は $HOME より ~ が好き。

ディレクトリの用意、ソースの取得

最新のソース

$ cd $HOME/local
$ mkdir src
$ cd src
$ wget ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.3-p448.tar.gz
$ wget http://rubyforge.org/frs/download.php/76729/rubygems-1.8.25.tgz

Ruby インストール

(結局だめでやり直した。後述)

$ tar zxvf ruby-1.9.3-p448.tar.gz
$ cd ruby-1.9.3-p448
$ ./configure --prefix=$HOME/local
$ make
$ make install

Gem インストール

$ cd $HOME/local/src
$ tar zxvf rubygems-1.8.25.tgz
$ cd rubygems-1.8.25
$ ./configure --prefix=$HOME/local
$ make
$ make install

パスの設定

自分は bash 利用なので .bashrc を修正。

$ vi $HOME/.bashrc
# 適宜
PATH=$HOME/local/bin:$HOME/local/lib/ruby/gem/bin:$HOME/local/git/bin:$PATH
# 環境変数追加
export RUBYLIB=$HOME/local/lib/ruby/site_ruby/1.9:$HOME/local/lib/ruby
export GEM_HOME=$HOME/local/lib/ruby/gems

PATH に $HOME/local/bin$HOME/local/lib/ruby/gem/bin*2 を追加。
RUBYLIB と GEM_HOME を追加。

保存して終了して再読み込み。

$ source $HOME/.bashrc

バージョン確認で gem にエラー出た

$ ruby -v
ruby 1.9.3p448 (2013-06-27) [i386-freebsd7.1]
$ gem -v
/usr/local/lib/ruby/1.9.1/yaml.rb:83:in `<top (required)>’:
It seems your ruby installation is missing psych (for YAML output).
To eliminate this warning, please install libyaml and reinstall your ruby.

ぬ。

libyaml のインストールと Ruby 再インストール

ソースファイル

$ cd $HOME/local/src
$ wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz
$ tar zxvf yaml-0.1.4.tar.gz
$ cd yaml-0.1.4
$ ./configure --prefix=$HOME/local
$ make
$ make install

ふんす。
「--with-opt-dir で libyaml をインストールした先を指定」して Ruby を再インストール。

$ cd $HOME/local/src/ruby-1.9.3-p448
$ make clean
$ ./configure --prefix=$HOME/local --with-opt-dir=$HOME/local
$ make
$ make install

再確認

$ ruby -v
ruby 1.9.3p448 (2013-06-27) [i386-freebsd7.1]
$ gem -v
1.8.25

とりあえずおk。

*1:今回は 1.9.3 を導入

*2:このパス見当たらないんだけど合ってるのかな・・・?

Eclipse のコンソールに大量のログを出力すると大量の "Reveal End of Document" エラーが発生する

Eclipse Tips

仕事で強制されている IDE が Lomboz(Eclipse 3.2)だったのですが、先日 PC 故障&交換(涙)を契機にこっそりと Eclipse 4.2 Juno*1 に乗り換えてやりました!やりました!

はぁースッキリ!
・・・のはずが、Tomcat を起動するときにコンソール ビューから "Reveal End of Document" エラーが大量にポップアップされてしまいました。しかもコンソール ウィンドウが固まって、まともにログが見れない・・・(´・ω・`)

そんで見つけたのがこちら。

This seems to be related to Eclipse Bug 243877 - IOConsole Updater error with long output lines

I am not using Pydev but I have been getting a lot of these "Reveal End of Document" popups and "org.eclipse.text" exceptions.

As mentioned in the bug report, it is directly related to the "Fixed width console" check box in Eclipse Preferences -> Run/Debug -> Console. When I checked the box and got too long message in my console, the exceptions flooded in. As soon as I unchecked the box, it stopped.

Can't believe its still here in Indigo.

windows - Annoying error dialog box when eclipse output-console scrolls. What's causing it? - Stack Overflow

Bug Truck も軽く見ましたが、2013 年 2 月に「うわー!2008 年に投稿されたのにまだ残ってる Bug なの?しかも status が NEW だよ?」ってコメントで再燃して・・・結局まだ直ってない、のかな?(←ちゃんと読めよ)結局 Indigo でも Juno でもダメだ、と。


発生条件は Eclipse の[設定]→[実行/デバッグ]→[コンソール]の「固定幅コンソール」にチェックが付いていて、すっごい長いメッセージをコンソールに出力しようとしたとき。

「固定幅コンソール」のチェックを外せばこの事象は止まります。


以上('ω`)

*1:Pleiades All in One 4.2.2a.v20130303 - Eclipse 4.2.2a Juno SR2a for Windows ベース ≪http://mergedoc.sourceforge.jp/#pleiades.html≫

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする!

はてなブログ CSS jQuery

何人かの方に気に入って使っていただいたようなのですが、以前の記事では jQuery だけベロっと貼ってあってわかりずらかったので、きちんと通して説明するために、改訂版として本記事を書くことにしました。

改訂版といってもまとめ直しただけで、コードが改「善」されたわけでないのであしからず…(´・ω・`)




はてなブログのサイドバーの「カテゴリ」表示、よく一般的なブログで見かける「タグクラウド」のようにしたいと思う方は少なくないと思うのです。そもそもこの、記事にキーワードをがしがし追加してく感じって「タグ」じゃないのかなぁ…というわけで、自分のブログでもやってる「タグクラウド」表示の仕方を以下にまとめました。

ちなみにタグクラウドっていうのは↓みたいなやつです。ここにあるコードではこんなに格好良くはなりませんが(苦笑)


Original by Markus Angermeier. Vectorised and linked version by Luca Cremonini

ざっと簡単に

手順を省略して書くと以下になります。PC の管理画面から実行した場合を想定しています。

1.[デザイン設定]→[カスタマイズ]タブ →[デザインCSS]の末尾に以下のコードを貼り付け

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; }

2.[デザイン設定]→[カスタマイズ]タブ →[サイドバー]の「+モジュールを追加」から「HTML」に以下のコードを貼り付け。タイトルは入力しないで!

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
// タグクラウドもどき
$(function() {
  var categories = $(".hatena-module-category ul li a");
  $.each(
    categories,
    function(index, domEle) {
      var ele = $(domEle);
      var texts = $.trim(ele.text());
      // リンクテキストから記事件数を取得
      var count1 = texts.match(/\([^\(\s +]+\)/);
      var count2 = count1[0].match(/\d+/);
      // 大きさ指定 Start
      if(count2 >= 10) ele.css("font-size", "250%");
      else if(count2 >= 5) ele.css("font-size", "200%");
      else if(count2 >= 3) ele.css("font-size", "150%");
      else if(count2 >= 2) ele.css("font-size", "120%");
      else ele.css("font-size", "90%");
      // 大きさ指定 End
      // リンクテキストから記事件数を除去
      ele.text($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
      // ツールチップに記事件数含めて表示する(title要素)
      ele.attr("title", texts);
    }
  );
});
</script>


2013-10-25 追記
はてなの仕様が変わったとのことで、記事中のコードを修正しました。
以下の記事で、この記事を取り上げて変更点についてわかりやすくまとめていただいています。ありがとうございます!


プレビューで上手くいってそうだったら、「変更を保存する」して完了です!



わからなかった!という方は以下をご覧くださいな。
スクリーンショットなんかも載せてみましたのでちょっと長いですが…

手順1.「カテゴリ」表示を横並びにする

編集したいはてなブログの設定から[デザイン設定]→[カスタマイズ]タブ →[デザインCSS]というメニューをクリックして、そこにある入力欄(クリックすると大きく広がります)の一番最後の行に以下のコードを貼り付けます。元から入力されている内容は消さないように気をつけてください。

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; }

このコードで、例えば変更前がこんな感じだったら…
f:id:tmd45:20130524232500p:plain

こんな感じに変わります。
f:id:tmd45:20130524232508p:plain

縦に並んでいたリストが、横に連続して並ぶようになりました。
これだけでもタグクラウドっぽいといえば、ぽいのですが、もうちょっとそれっぽくします。

手順2.「タグクラウド」らしく!文字のサイズで記事数を表現

次のコードは、ブログの設定から[デザイン設定]→[カスタマイズ]タブ →[サイドバー]に登録します。
サイドバーの設定メニューの中に「+モジュールを追加」というのがありますのでそれをクリックします。さらに、出てきたウィンドウのサイドメニューの「HTML」をクリックします。

すると以下のような入力欄が出てきますので、広いほうに下のコードを貼り付けてください。狭いほうの入力欄(タイトル)は空欄にしてください。
f:id:tmd45:20130524233355p:plain

貼り付けるコードはこれ↓です。<script></script>全部を入力欄に貼り付けます。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
// タグクラウドもどき
$(function() {
  var categories = $(".hatena-module-category ul li a");
  $.each(
    categories,
    function(index, domEle) {
      var ele = $(domEle);
      var texts = $.trim(ele.text());
      // リンクテキストから記事件数を取得
      var count1 = texts.match(/\([^\(\s +]+\)/);
      var count2 = count1[0].match(/\d+/);
      // 大きさ指定 Start
      if(count2 >= 10) ele.css("font-size", "250%");
      else if(count2 >= 5) ele.css("font-size", "200%");
      else if(count2 >= 3) ele.css("font-size", "150%");
      else if(count2 >= 2) ele.css("font-size", "120%");
      else ele.css("font-size", "90%");
      // 大きさ指定 End
      // リンクテキストから記事件数を除去
      ele.text($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
      // ツールチップに記事件数含めて表示する(title要素)
      ele.attr("title", texts);
    }
  );
});
</script>

これで、さっきまでこんな感じだったのが...
f:id:tmd45:20130524232508p:plain

こう変わります!文字が大きかったり小さかったりしているのがわかりますでしょうか?
f:id:tmd45:20130524234050p:plain

記事の数の表示が消えてしまいますが、リンクにマウスを乗せると記事数も含めたカテゴリ名が表示されます。

これで「タグクラウド」表示への変更は完了です!
おつかれさまでした。


どうでしょうか?みなさんのブログでもキレイに「タグクラウド」表示になりましたでしょうか?

もし上手くいかなかったら、このページの下にコメント欄がありますのでそこからご相談ください。でもすぐにお答え出来るかわからないので「このままじゃ困る!」ってなったら、“今回追加したもの”をすべて削除してしまってください…。
([デザインCSS]の元々あった入力内容は消さないように注意!)

以上でございます。

HTMLなどの初心者さんにもできるだけそのまま使っていただけるように書いてる…つもりです。いずれもご利用・改変などはご自由にどうぞ。ご報告なども不要ですが、もしこの記事の内容がお役に立ちましたらブクマとかはてなスターとか付けていただけると嬉しいです。


('ω`)

ページトップへ移動