不燃物

まとめて提供 Sep 09, 2006 tiddlywikiというのが人気である。Javascriptを使ったおしゃれなWikiで、ローカルでも更新できるのが特徴的である。 以前百式でも紹介したが、その後さまざまなカスタマイズがされていろいろなバージョンが出てきた。 そしてそのような流れをうけて登場したのがtiddlyspotだ。 このサイトではさまざまなtiddlywikiのバージョンを簡単に作ることができて便利だ。 多くのバージョンが出てくるということはそれだけ人気があるということだ。tiddlywikiに限らず、そうしたバージョンをまとめて提供できるサービスはいいかもですね。 tiddlyspot http://www.tiddlyspot.com/ さまざまなバージョンのtiddlywikiを作成。 管理人の独り言『 さてさて 』 なんだか今週ばたばたしていたので週末が勝負。いまからがしがし片付けます。 今日の運動記録 今日はお休み。週末はのんびりしようっと。

編集者: 100式 | このブログのURL |この記事のURL

Javaの入出力で、入力については、書いてきたので、今度は出力、それもファイル出力について。 　ファイル出力に関しては、一般的に入力のケースの入力を出力に変えれば、いいことになります。 つまり、こんなかんじ ●可変長ファイルで、改行以外、フリーフォーマットの場合、大きく３通り。 １．ファイル全体を一気に書き出す ２．１バイトずつ書き出す ３．１行ずつ書きだす ●そして、フリーフォーマットでない場合、以下の方法もある（上記の方法もある） ４．フォーマットが決まっているとき、print...

編集者: ウィリアムのいたずら | このブログのURL |この記事のURL

昨日書いた「ブログにコードを貼り付ける方法で悩むの巻」ですが、さまざまな方のブログでとりあげていただき、とんでもなく勉強になっています。 ためになるのでこちらでもご紹介。 pre 要素のスタイル定義とマークアップ ソースを貼付ける50の方法 Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 pre要素へのスタイル指定 いやぁ、よくわからないで書いていたのでところどころ間抜けな記述がありましたが（ガチで「実態参照」と思っていたよ・・・）書いてよかった。とっても勉強になりました。 いろいろな論点がありそうですが、個人的にはpreとcodeのあわせ技で行こうかな、と。あとは実体参照はエディターのマクロの勉強も兼ねて作ってみようかな、と思いました。 ちなみに実体参照はみなさんやっぱり手作業なのですね・・・そう考えるとMTのPlug-inであっていいような・・・はてなの記法が優れているということもわかって勉強になりました。 ちなみに昔から気になっているのはブログじゃないのですが、Yahoo! Developers Networkのコードの記述方法。 ↑ なんだか高機能。 普通のソースコードにあわせて「view plain」「print」「copy to clipboard」などがあってとっても使い勝手が良いのです。クリップボードへのコピーはIEのみ対応なのでFirefoxでは表示されないという念の入れよう。 ↑ 拡大してみる。 しかもソースコードの関数を見てちゃんと色分けもしている模様。ここらへんはJavascriptで実現しているようですね・・・。 こちらのソースは、以下のようになっていますね。preとtextareaのあわせ技です。

// Creates a namespace for "myproduct1"
YAHOO.namespace ("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
    alert(info);
};
// Creates a namespace for "myproduct2", and for "mysubproject1"
YAHOO.namespace ("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
    alert(info);
};

しかしソースはこれですが、なんだかJavascriptでごりごりしてすごい具合にレンダリングしている模様（調べたけど頭が混乱したｗ。あきやんに聞いてちょっとわかったけど）。 ソースは見やすいのも大事ですが、コピペしたり、印刷したりするのも大事ですよね。ちょっと手がこんでいますが、Yahoo!のやりかたはいいかな、と思いました。こういうのライブラリ化するといいかもですね、Yahoo!にあるかもしれないけど。 というわけで続報でした・・・。

編集者: idea*idea | このブログのURL |この記事のURL

今回もちょっと技術寄りなので興味のない方はスルーの方向で。 --- 昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。 まずは実例。自分がよく読むところでいくと・・・。 (1) id:naoyaさんの場合 で、コードをみると

で囲ってあって、「>」みたいなやつは実態参照してあって、preのスタイル指定でフォントをCourier Newにしている模様。これは等幅つうことですな。

(2) miyagawaさんの場合



こちらは見た目的にはtextareaっぽくなっていますね。スタイルは
とのこと。ちょっとCSSを覗いてみると"overflow:scroll"で制御しているようですね。なるほど、つか、overflowって知らんかった・・・（汗）。フォントは同様にCourier Newですね。

(3) いやなブログさんの場合



こちらは見た目はmiyagawaさんのに似ていますが、縦スクロールが必要な場合が多いですね。2行のコードだとちょっと見づらい感じ（IEの場合）。ちょっとスタイルシートを覗いてみると"overflow:auto"の点がmiyagawaさんと違う模様。あと"white-space:pre"という記述も発見。空白の扱い方ですが、これも指定しておくとよさげですね。

(4) 最速インターフェース研究会さんの場合



こちらも
で制御している模様。"overflow:scroll"の指定あり。

(5) hail2u.netさんの場合



こちらは
とで囲んでありますね・・・。

さて、以上からちょっと考えてみます。まず「なぜコードを貼るか」の目的から。読者のことを考えるときっと(1) 読んで理解してもらう、(2) コピペして使ってもらう、の二通りでしょう。その目的を踏まえたうえで以下を考えてみます。

■ 絶対やったほうが良さげなもの

これはやっといた方がいいかも、をあげてみます。



コードはやっぱり等幅フォントじゃないと。Courier Newが良さそう。

"white-space:pre"もなんか指定しておいた方が良さそう。

コード内部の背景色はタイトルヘッダー部分の色と同色系だと良さそう。



■ ちょっと悩みどころなもの

いろいろな人のブログを見てちょっと悩んでいるところ。

(a) overflowの指定

overflowの指定はそもそもしないか、scrollか、autoの三通りですね。overflow指定なしもすっきりでいいかもしれませんが、横幅が長いコードを貼り付けると全体のレイアウトが崩れる可能性がありますよね・・・そうなるとoverflow指定しておいて、IEですっきり見えるscrollの方にしますかね・・・。

なお、コピペのやりやすさについてはどちらも同じようなものですね。overflow指定したらCTRL+Aでtextarea内だけ選択できるかと思ったら全然だめでした・・・orz。

(b) classの指定

自体にスタイルをつけるか、
にするか、
にするか、はたまたにするか・・・悩みどころですが、個人的には
がすっきりかな、と思うのでそうします。

ここはまぁ、読者のことを考えるとどうでもいいところなので（と言い切るのは横暴なような気もしますが）個人の好みで。

(c) 実態参照について

皆さんコードを貼り付けるときはきっと単にコピペしているだけだと思うのですが実態参照はどうしているんでしょうね・・・「>」とかきちんと打ち直しているのかな・・・それとも実態参照変換ツールを使っているのか・・・。

ひょっとしてMovabletypeが自動変換してくれる？と思って実験してみましたがうまくやってくれない・・・。とりあえず変換ツールを使うことにしましょう。

以上、ちょっと調べてここまで書いてみましたが、なんだかとっても初心者ちっくなことを書いているようでなんだか恥ずかしい気がしないでもないですね・・・うーむ、今度αギークな面々にあったときに聞いてみよ。

というわけで完成系。idea*ideaにスタイルシート仕込んでみました。check*padのコードの一部を貼り付けてみました。


function ms_add (ttl, pjt_id) {
  if (ttl != '') {
    $('ms_name').value = '';
    var dif = document.body.offsetHeight;
    var url = 'index.php';
    var pars = 'mode=ms&act=add&ajax=1&pjt_id='+pjt_id+'&ttl='+encodeURIComponent(ttl);
    new Ajax.Updater ('ms_box_notyet', url, { method: 'post', parameters: pars, onComplete: function() { new Effect.Highlight('ms_notyet_' + $('new_id_value').innerHTML); window.scrollBy(0,document.body.offsetHeight-dif); $('ms_name').focus();} });
  } else {
    return false;
  }
}


ど、どうっすかね？みなさんの方法も教えてくれるとうれしかったり・・・ごにょごにょ。

しかしこれでコード貼り付けるのが楽になりました・・・めざせ技術者！ｗ

この記事の続きを見る
                           

                              編集者: idea*idea  | このブログのURL
                           |この記事のURL