岩家ぶろぐ

2009

01-07

15:13

IT系コミュニティ・勉強会のメタコミュニティ「Developer Study Tokai」が始動します

はじめに

DeLLa.JS で呼びかけて以来，各所でお世話になっているterurouさんが動き出しました．

Developer Study Tokai(DSTokai)という東海地方のメタコミュニティを作りました。
東海地方のIT系コミュニティ/勉強会のメタコミュニティ『Developer Study Tokai』を作りました - DenkiYagi

これは何？

「メタ～」というと，「～のための～」といった使われ方をしていると思います（詳細はWikipediaを参照）．ので，DSTokai の場合，「IT系コミュニティ・勉強会のためのコミュニティ」といった感じになりますかね．

いわゆる勉強会勉強会（MetaCon) や Study-Kansai といったメタコミュニティの東海地方版

東海地方のコミュニティ間の横のつながりを！

「名古屋」じゃなくて「東海」ですよ

東海地方って東海四県（愛知、岐阜、三重、静岡）ぐらいかな…？

「DSTokaiさえチェックしていれば東海地方の動向は掴めるよね」ぐらいにはしたい

そもそも「勉強会同士のメタな繋がり」って言い出したのは、OSC 2008 Nagoya が元祖だよ

東海地方のIT系コミュニティ/勉強会のメタコミュニティ『Developer Study Tokai』を作りました - DenkiYagi

要は，東海地方の各所で活動するコミュニティや勉強会のグループ同士のつながりを深めていきましょう，といった解釈でよさげかと．

また，名前に「Developer Study」とかありますが．．．

デベロッパー以外も参加可能な、全ての”作り上げるIT系”の勉強会のメタコミュニティ

勉強会に興味のある人なら、どなたでも参加できますし、情報を共有しましょう！

DSTokaiについて（方針やお願いなど） - Developer Study Tokai | Google グループ

そんなことは気にする必要もなさそうですね．

おわりに

以上，DSTokaiというのができましたよ，というお話でした．

他の勉強会の運営方法や会場の情報なんかを共有したりしたいので，私もさっそく参加させていただくことにしました．

現在，Googleグループにて情報が公開されていますので，よろしければ参加してみてはいかがでしょうか．

Developer Study Tokai （DSTokai）

これを機に，この地方の勉強会界隈もより盛り上がってくることに期待したいですね．

カテゴリ：生活日誌 | 固定リンク | コメント・トラックバック (0)

↑ ページの先頭へ

2009

01-03

14:16

[javascript][wordpress] WP-Syntaxで出力されたソースコードのコピペを支援するJavaScript

はじめに

名古屋に戻る前に，実家にてもうひとエントリ．

//
// ソースコードの領域をクリックしたときの処理．
// 選択したりできるとよさげ．
//
[wordpress] WP-Syntaxプラグインを導入してみた « 岩家ぶろぐ

というわけで，WP-Syntaxで出力されたソースコードを簡単にコピペできるようにしてくれるっぽいJavaScriptを書いてみました．jQuery依存ですけどね．

概要

ソースコード領域をクリックすると，テキストエリアに切り替わり，テキストがすべて選択された状態になります．

テキストエリアからフォーカスを外すと元に戻ります．

ちなみに，選択を解除すると次のような感じになります．編集なんかもできたりしますが，特に保存とかはされません．

解説いくつか

ソースコード領域の取得

wp_syntax クラス下の code クラスの要素がそれにあたります．複数の wp_syntax クラスが存在することを考慮しておいたほうがいいでしょう．

そして，その要素内の文字列がソースコードとなります．

$( '.wp_syntax .code' ).each( function() {
  var sourcecode = $( this ).text();
  ...
} );

ソースコードの行数の取得

ソースコード文字列を改行で区切った配列のサイズで取得できます．

var rows = sourcecode.split( '\n' ).length;

．．．と思いきや，これだと IE（6も7も）でうまくいかないようですね．．．

行番号表示があるときは，その開始行と終了行の値をそれぞれ取得して計算することで行数を取得できるので，とりあえずの回避策としてみました．

if( 行番号表示がある場合 ) {
  var ln = 行番号表示領域の要素;
  var from = parseInt( ln.text().match( /^\D*(\d+)/ )[1] )     // 開始行
    , to   = parseInt( ln.text().match( /\D*(\d+)\D*$/ )[1] )  // 終了行
  ;
  var rows = to - from + 1;
}

ちなみに，この行数の値はテキストエリアを生成するときに利用します．

テキストエリアの生成

テキストエリアの高さをソースコードの行数とそろえるため，先で取得した行数の値を rows 属性にセットします．そして，自動折り返しを無効にするため，wrap="off" としておきます．（W3C的には invalid のようですが．．．）

さらに，テキストのスタイル（文字サイズや行高さ）をソースコード表示時とそろえるため， ... /wp-content/plugins/wp-syntax/wp-syntax.css 内の記述を参考に，同様の値をセットします．

あとは，ソースコードの代入やフォーカスが外れたときの処理の定義など行って，ソースコード領域の要素下に追加すれはOKです．

あ，元のソースコードをクリアしておくのも忘れずに，ですね．

ソースコード

そんな流れで書いたソースコードをひととおり，以下に載せておきます．もちろんクリック＆選択できますよｗ

$( '.wp_syntax .code' ).each( function() {
  $( this ).click( function() {
    var __this = $( this );
    var sourcecode_text = __this.text()
      , sourcecode_html = __this.html()
    ;
    var click_handler = arguments.callee;
 
    var td_ln = __this.parent().find( '.line_numbers' );
 
    var rows = 1;
    // 行番号表示がある場合
    if( td_ln.get( 0 ) ) {
      var line_from = parseInt( td_ln.text().match( /^\D*(\d+)/ )[1]  ||  1 )     // 開始行
        , line_to   = parseInt( td_ln.text().match( /\D*(\d+)\D*$/ )[1]  ||  1 )  // 終了行
      ;
      rows = line_to - line_from + 1;
    }
    // 行番号表示がない場合
    else {
      rows = sourcecode_text.split( '\n' ).length;  // IE でうまくいかん
    }
 
    __this
      .unbind( 'click' )
      .empty()
      .append(
        $( '<textarea></textarea>' )
          .attr({
            rows: rows,
            wrap: 'off'  // 本来XHTMLではinvalid
          })
          .css({
            margin:     0,
            padding:    0,
            border:     'none',
            width:      $( '#content-left .post' ).width() - ( td_ln.width() + 8 ) - 8,
            color:      '#ffffff',
            background: '#000000',
            fontSize:   '12px',  // wp-syntax.css を変更した場合，ここも変更する
            lineHeight: '1.333'  // wp-syntax.css を変更した場合，ここも変更する
          })
          .val( sourcecode_text )
          .blur( function() {
            $( this )
              .parent()
                .empty()
                .click( click_handler )
                .html( sourcecode_html )
                .end()
            ;
          } )
          .appendTo( this )
          .focus()
          .get(0).select()
      )
    ;
   } );
} );

おわりに

以上，WP-Syntax が出力したソースコードのコピペを支援するようなJavaScriptをざっと書いてみました．

細かな修正はまた追々することにします．（必要にかられたら？）

カテゴリ：javascript, wordpress | 固定リンク | コメント・トラックバック (0)

↑ ページの先頭へ

2009

01-02

23:07

[wordpress] WP-Syntaxプラグインを導入してみた

2009-01-03 11:31
行表示指定の有無で出力されるHTMLが異なるため，それぞれの場合に分けて記述しました．

はじめに

ブログへのアウトプットの際，ときどきJavaScriptのソースコードとかも載せたりしていますが，今まで，単なる pre タグを使っていたりしたわけで．．．

ブログに貼り付けたソースコードを分かりやすく見せたい！

というのはコードを書くブロガーなら誰でも思うはず。

最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。

何故かまとまった情報が無いようなので、まとめてみました。
http://blog.37to.net/2007/06/syntax_highlighter/

こんな思いを持ちながらも今まで何もしてこなかったので，今回の改装を機に，ちょっと気を遣ってみることにしました．

で，37toさんのこちらのまとめエントリ（上記）を一読し，よさげに感じた WP-Syntax プラグインを導入してみました．

WordPress › WP-Syntax « WordPress Plugins

使い方

使い方は非常にシンプル．pre タグに（プログラム）言語の種別を示す lang，開始行番号を示す line の各属性を指定し（line属性はオプション？），その中にソースコードを書いていくだけです．

<pre lang="言語の種類" line="開始行番号">
 
ここにソースコードを記述する
...
 
</ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->

# HTMLとして認識させる場合は，lang="html4strict" とする必要があるみたいです．

対応言語

シンタックスハイライトを行うためのphpライブラリ GeSHi を利用しているので，その仕様に従うようですね．

GeSHi - Generic Syntax Highlighter :: Home

対応している言語の種類がハンパないので，詳細は上記リンク先をご覧ください．

吐き出すHTML

行番号表示あり

例えば，「使い方」のところで示した簡単なHTMLソースコードの場合，次のように処理されて出力されます．

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</ pre></td><td class="code"><pre class="html4strict html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">pre</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;言語の種類&quot;</span> line<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;開始行番号&quot;</span>&gt;</span>
&nbsp;
ここにソースコードを記述する
...
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span> pre&gt;</span> <span style="color: #808080; font-style: italic;">&lt;!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります --&gt;</span></ pre></td></tr></table></div>
 
<!-- 閉じタグとして認識しないよう，</ pre>のように / の後ろにスペースを入れてあります -->

構造をまとめると，次のような感じになります．

<div class="wp_syntax">
  <table>
    <tr>
      <td class="line_numbers">
        <pre>
          行番号
        </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
      </td>
      <td class="code>
        <pre class=" ... " style=" ... ">
          ソースコードをシンタックスハイライトするように処理されたHTML
        </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
      </td>
    </tr>
  </table>
</div>

行番号表示なし

var konamicommand = [
  { code: 38 }  // ↑
, { code: 38 }  // ↑
, { code: 40 }  // ↓
, { code: 40 }  // ↓
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 66 }  // b
, { code: 65 }  // a
];

上記ソースコードの場合，次のようなHTMLが出力されます．

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> konamicommand <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>
  <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">38</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↑</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">38</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↑</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">40</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↓</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">40</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↓</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">37</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ←</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">39</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// →</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">37</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ←</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">39</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// →</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">66</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// b</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">65</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// a</span>
<span style="color: #009900;">&#93;</span>;</ pre></div></div>
<!-- 閉じタグとして認識しないよう，</ pre> のように / の後ろにスペースを入れてあります -->

構造をまとめると，つぎのようになります．

<div class="wp_syntax">
  <div class="code">
    <pre class=" ... " style=" ... ">
      ソースコードをシンタックスハイライトするように処理されたHTML
    </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
  </div>
</div>

ということで

//$( '.wp_syntax td.code' ).each( function() {  // <del datetime="2009-01-03T02:31:35+00:00"></del>
$( '.wp_syntax .code' ).each( function() {  // <ins datetime="2009-01-03T02:31:35+00:00"></ins>
  $( this ).click( function() {
    //
    // ソースコードの領域をクリックしたときの処理．
    // 選択したりできるとよさげ．
    //
  } );
} );

こんなこともしたくなりますね．

おわりに

以上，WP-Syntax プラグインの導入の報告でした．いい感じで使えそうですね．今後，Simplecode for WordPress は不要かな．

カテゴリ：覚え書き | 固定リンク | コメント・トラックバック (0)

↑ ページの先頭へ

2009

01-01

05:56

岩家ぶろぐ改装

announce

はじめに

新年，明けましておめでとうございます．

当ブログへお越しいただいている方，お仕事や私事でお世話になっているみな様，昨年はありがとうございました．

本年も懲りずにお相手していただけたら幸いです．

改装のお知らせ

まぁ見てのとおりではありますが，当「岩家ぶろぐ」の改装に着手し，ある程度形になってきたので公開してみました．

今回の改装にあたり，主に次のような作業を行いました．

WordPressのアップグレード
プラグインの見直し
リ・デザイン

．．．リストアップするまでもないですね＞＜

作業のちょっと詳細

WordPressのアップグレード

バージョンが，ME の 2.0.10 あたりで放置状態だったため，まずはここから．

WordPress 2.7 の日本語版をリリースしました。以下からダウンロードできます。
WordPress | 日本語 » WordPress 2.7 日本語版リリースのお知らせ

ということで 2.7 の日本語版を入れることにしました．

念のためファイルやデータベースのバックアップを行った後，上書きアップロード＆ upgrade.php を実行．かなりバージョンが離れているため失敗しないかと不安がありましたが，それも無駄に終わりましたね．一部利用できないと思われるプラグインがあったこと以外は特に問題はないように思います．

プラグインの見直し

以前入っていたプラグインを維持するか無効にするかをざっと見直しました．

バージョン 2.7 では，「カテゴリ」と「タグ」を別で扱えるんですね（いつから？）．ということで，カテゴリをタグクラウド風に表示するための次のプラグインを無効にしました．

Weighted Categories

で，次のものは現状維持．細かい動作確認は今後ですけどね．

それにしても，SimpleCode の日本語問題はなんとかならんのですかねぇ．．．

そして，先日，ありがたいエントリが．

さて「固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ」でもご紹介したとおり、WordPressの絶賛勉強中です。

いろいろいじり倒している最中ですが、いまのところのおすすめプラグインをご紹介。
WordPressで導入したプラグインまとめ | IDEA*IDEA

こちらを参考に，次のプラグインを入れてみました．

Popular Posts，Similar Posts については早速動作させてみました．中の動作は理解していませんが，いい感じに結果が出てきているようです．

リ・デザイン

センスのない私にとって個人的にここが一番の問題．とりあえず次のことを意識していました．

カオスになったサイドバーの見直し
3カラムっぽく（メイン1+サイド2）
リキッドっぽく
prototype.js から jQuery への切り替え
できるだけシンプルに

既存のテーマをべーすとしてそこからスタイルを変えていこうと考えていたので，これらにつながるテーマを小一時間探してみました．そこで見つけたのが Amazing Grace でした．

このテーマが吐き出すHTMLを眺めながら，CSS を 0 から書き，PHP を修正修正することで，なんとか最低限表示できるまで至ることができました．

ちなみに，レイアウトは同テーマとリニューアル中のSIMPLE*SIMPLEにインスパイアさせていただきました．

おわりに

実際のところ，先の引用エントリのとおり，百式の中の人に感化されて今回の改装に至った，というのはあります．しかし，3，4か月前からブログを改装したいとは常々思っていたので，年も変わったことですし，まぁいい機会かな，と前向きに考えておくことにします．

そんなわけで，改めて，一新した（？）「岩家ぶろぐ」ともども，本年もよろしくお願い致します．

カテゴリ：お知らせ | 固定リンク | コメント・トラックバック (0)

↑ ページの先頭へ

2008

12-28

18:22

PHS300始めました

はじめに

WCAN mini ActionScript vol.9 終了後，occhii105さんとの会話の中で，「無線ALNアクセスポイントに直接EMOBILE（D02HW）を接続できるヤツ」というものが出てきました．

PHS300 Personal Wifi Hotspot｜CMTRSHOP

後日調べてみたところ，上記のものにたどり着きました．値段は安いとはいえませんが，EMOBILE使用中の私（そして，他数名？）にとって十分にメリットを享受できると考え，特に迷いもせずに購入しました．

以下，1週間ちょっと使ってみての雑感です．

便利な点

EMOBILEの共有が簡単

EMOBILEの接続設定はPHS300側で行います．一度設定してしまえば，電源を入れるだけで自動的にネットに接続してくれるようになります．

PHS300は無線LANアクセスポイントでもあるので，あとは，各端末でこれに対する接続設定（SSIDとかキーとか）を行うだけです．なお，アクセスポイントに対する最大接続数は16となってます．

ノートPCとかを持ち寄る機会が多い勉強会なんかの場で重宝しそうですね．

iPod touch でもネットができる

設定さえしておけば，もちろん iPod touch でもネットにつながります．

PHS300の電源を入れたままバッグに忍ばせておけば，移動しながらでもネットできますね．

vmware使用時におけるネット共有設定の切り替えが不要

中でも外でも vmwareを起動して開発っぽいことをしているわけですが，ゲストOSからネットに接続するには，（Windows XP の場合，）アクティブなネットワークデバイスのプロパティから「インターネット接続の共有」を行う必要があります．（ですよね？）

中では無線LAN，外ではEMOBILE，をそれぞれネットワークデバイスとして使用しているので，そのたびに共有設定を切り替えないといけません．

PHS300を利用することで，ネットワークデバイスを無線LANのままにしておくことができるようになりました．

気になる点

バッテリ

製品の仕様として明記されてはいるのですが，やはり，バッテリの持続時間が90分程度，というところですかね．今のところ，電源を確保できる環境ばかりで使用しているため，バッテリが切れるようなことは起こっていませんが．．．

これについては，FPS440U や KBC-L2S，EG-PB5400 等の外部バッテリを接続することで解消しているケースが多いようですね．（「phs300 バッテリ」での検索結果．）

まぁ外部バッテリについては，今後の使用状況をみてまた考えたいと思います．

ACアダプタ

　ちなみに、PHS300付属のACアダプタ、PHS300が薄く小さめなわりには大型。このACアダプタが小さければな～、と思う。けど、上記充電用USBケーブル＋薄型の汎用USBジャック付きACアダプタを使えば、PHS300付属のACアダプタは一生不要になりそうな予感である。
スタパブログ: PHS300の電源をどうするか

確かに大きいです．というか，形状的にかさばります．ということで，上記エントリを参考に，次の 2点を別途で注文しました．本エントリの直前に．

おわりに

以上，PHS300を少し使ってみての雑感でした．

これ1つ持って，今後もどんどんモバイルライフを楽しんでいきたいですね．

参考

リンク

amazonさん

Cradlepoint PHS300 Mobile WiFi アクセスポイント IEEE802.11b/g 黒 122×73×18.5 内臓バッテリ1800ｍAh
posted with amazlet at 08.12.28

Cradlepoint (2008-10-23)
売り上げランキング: 521

Amazon.co.jp で詳細を見る

カテゴリ：モノライフ | 固定リンク | コメント・トラックバック (0)

↑ ページの先頭へ

1 of 51 1 2 3 4 5 » ... 51

岩家ぶろぐ

IT系コミュニティ・勉強会のメタコミュニティ「Developer Study Tokai」が始動します

はじめに

これは何？

おわりに

[javascript][wordpress] WP-Syntaxで出力されたソースコードのコピペを支援するJavaScript

はじめに

概要

解説いくつか

ソースコード領域の取得

ソースコードの行数の取得

テキストエリアの生成

ソースコード

おわりに

[wordpress] WP-Syntaxプラグインを導入してみた

はじめに

使い方

対応言語

吐き出すHTML

行番号表示あり

行番号表示なし

ということで

おわりに

岩家ぶろぐ改装

はじめに

改装のお知らせ

作業のちょっと詳細

WordPressのアップグレード

プラグインの見直し

リ・デザイン

おわりに

PHS300始めました

はじめに

便利な点

EMOBILEの共有が簡単

iPod touch でもネットができる

vmware使用時におけるネット共有設定の切り替えが不要

気になる点

バッテリ

ACアダプタ

おわりに

参考

リンク

amazonさん

岩家ぶろぐ？

issm？

人気のエントリ

最近のエントリ

月別アーカイヴ

最近のコメント