Web で公開するベクター画像を Dropbox から読み込み、後から画像を更新する

1. ベクター画像をビットマップ画像に変換すると、後から変更しにくい

Inkscape via kwout

図形を描くときは、Inkscape を使う。作成した図をブログに載せるには、ベクター画像 を ビットマップ画像 である png や jpeg に変換する。

この方法は、後で図形を変更したい場合、

1. 変換前のベクター画像を修正
2. ビットマップ画像へ変換

という手順を踏む必要がある。そのため、後から気軽に図形を編集できない。

 

2. SVG を img タグまたは object タグで表示する

Inkscape でファイルを保存すると、拡張子は .svg となる。

W3C SVG Working Group
via kwout

SVG とは、Scalable Vector Graphics - Wikipedia 

Scalable Vector Graphics （スケーラブル・ベクター・グラフィックス、SVG）とは、XML によって記述されたベクターイメージ言語のこと、あるいは SVG で記述された画像形式の事。W3C でオープン標準として勧告されている。

ブラウザの対応

SVG ファイルは、ブラウザにそのまま画像として読み込むことができる。ブラウザの対応状況は、

スタートアップ SVG：第1回 SVGの基礎知識｜gihyo.jp … 技術評論社（2010年7月7日）によると、

Firefox，Safari，Google Chrome，Operaなどのブラウザが既にサポートしており，Internet Explorerもそのバージョン9，具体的にはInternet Explorer 9: Platform Demosで公開されているPlatform Preview版でSVGをサポートします。

• cf. KENSINのホームページ-(C#)WindowsMobileでSSLな通信を(失敗編①)

 

object タグと img タグ

SVG を表示するには、object タグ、または、img タグを用いる。

最も手軽にsvgを表示する方法です。次のように，objectタグにtype="image/svg+xml"を指定し，data属性にsvgファイルのパスを指定します。…

img要素のsrc属性，CSSのbackground-imageなど，データスキームで画像を表示できる場合，そのデータとしてSVGを流しこむことができます。…

(同上より）

SVGファイルを外部ファイルにできるのか - html5j.org | Google グループ 

SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。（最近のブラウザなら）
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。

 

HTML5

HTML5 via kwout

HTML5 では、SVG をインラインで表示できる。

ASCII.jp：HTML5で注目！インラインSVGの使い方｜古籏一浩のJavaScriptラボ によると、

HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。

 

3. Dropbox へ画像を配置する

ベクター画像を Dropbox で公開し、画像として読みこめば、後から画像だけ独立して更新できる。

1. SVG ファイルを Dropbox の Public フォルダ以下に保存。
2. SVG ファイルを右クリック > パブリックリンクのコピーを選択。
3. HTML で以下を挿入。

<img src="パブリックリンク" />

これにより、SVG ファイルを変更すると、公開済みの画像も変更される。

単純な図形なら、Google ドキュメントの図形描画をウェブに一般公開し、埋め込みコードを取得する方法が楽かな。

Windows Live Writer Beta のアップデート

ブログを書くときに欠かせない、Writer Beta - Windows Live がアップデートした。更新しようとしたら、デフォルトでは色々と他のソフトもインストールする設定になっていたので気をつける。(+_+)  Writer だけが選択されるようにした。

起動したら、これまでベータ版は英語のメニューだったけれど、日本語で表示されるようになった。ぱっと見たところ、全体的にツルンとした印象に。最近の Office ってこんな感じなのかな？

字を入力したら、表示が以前よりも綺麗だ。

 

前のバージョンと比較したら少し上がっているのがわかる。

 

いらないスペルチェック

うわ！(@_@;) しかし、書きはじめたら、いきなりスペルチェックの嵐。メニューより、ツール > オプション > スペルチェック で、「辞書の言語」において「なし」を選択。

 

プラグイン

Flickr

プラグインでは、Flickr に画像を投稿するための Flickr4Writer を使っている。このダイアログの表示が以前よりもスムーズになった。

 

Amazon

今回はじめて、Amazon 用のプラグインをインストールしてみた。(Amazon Associate Japan) これは使いやすそうだ。

Amazon の ID は ツール > オプション > プラグイン より、Amazon Associate JP を選択し、「プラグインの詳細」において「オプション」ボタンを押す。ダイアログが表示されるので、Associate ID を入力。

 

使ってみると、挿入した画像を左右に寄せたりできるので便利。今までは G-Tools を使うことが多かったけれど、こちらに乗り換えようかな。

 

その他

ショートカットキー

メニューより、編集 > カテゴリ を見たら、Ctrl + Shift + C のショートカットがついていた。これって以前からあったのかな？このおかげで、記事を書いているときにさっとタグを付けることができる。 ^^

 

プログラムのショートカット

あれ？今まで使っていたショートカットはどこへ？

スタート > すべてのプログラム > Windows Live > Windows Live Writer Beta にあった。

 

バグの解消

これまで 1 画面に納まらない量を書いた場合に、文章に「見出し」をつけると、なぜか文章の先頭まで戻ってしまっていた。非常にわずらわしかったけれど普通に使えるようになっていた。 ^^ 正直これが一番のメリットかも。

 

テーマの更新

久しぶりにブログのテーマの更新をしておこう。(表示 > テーマの更新) これをしておくと、プレビュー表示において、実際のブログの表示と同じ見え方にしてくれる。誤字脱字をチェックするときはプレビュー表示にしている。編集モードとは違う見え方にすることによって、ミスの検出率が上がる。これって心理学でいう何て効果だっけ？忘れてもうた。 ^^; 見たいときは、ショートカットキー F12 でさっと見ることができる。

複数のアプリケーションを連携して使うとき、作業ごとに仮想デスクトップを割り当てる - WinDeskWide を使い、効率的にブログを書く

1. 複数のアプリケーションを利用していると、どこで何をやっているのか把握しづらい

ブログを書くとき、複数のアプリケーションを同時に利用する。

例えば、文章を書きながら、画像を載せようと思ったとき、次のような手順が必要。

1. スクリーンショットを撮る
2. 画像を加工
3. Flickr にアップロード
4. Flickr からブログエディタに貼り付け

各々の作業は単純だけれど、画像を掲載する度に、この作業を行うのは面倒。また、複数のアプリケーションを利用するので、どのウィンドウで、何をやっていたのか分かりづらくなる。

追記（2012.3.4）： 現在では、Flickr は利用していない。

• Blogger に載せる画像の保存先を Flickr から Picasa へ変更 - Google+ へ登録して、無料で保存できる画像サイズもアップ

 

2. ブログを書くときのツール

ブログを書くときは、エディタとして Windows Live Writer を使っている。ただし、WLW だけでは、上記の作業を行うことができない。そのため、複数のアプリケーションを利用している。

画像を掲載するためのアプリケーションを、以下に列挙する。

• スクリーンショットを撮る
  • Capture STAFF – Light
  • OS 標準の Print Screen
    • cf. プリントスクリーンした画像を Gimp へ流し込む 
• 画像の加工
  • Photoscape
    • 吹き出しをつける
    • 大きさの変更
    • モザイク
  • GIMP
    • ぼかす
• Flickr へのアップロード 
  • juploadr : 写真のアップロード
  • Flickr4Writer : ブログエディタへの貼り付け
    • cf. Windows Live Writer で Flickr4Writer を使って効率的に写真を挿入する工夫 

 

3. ツールは一つで完結せず

各々のアプリケーションは、欠かすことができない。

例えば、画像を加工するために使っている Photoscape 。このアプリケーションには、スクリーンショットを撮る機能がある。しかし、スクリーンショットを撮った後の、ファイルを保存する方法に難がある。

Capture STAFF を使えば、撮ったスクリーンショットに対して、自動で連番を付けてくれ、ファイルに保存できる。

• cf. Capture STAFF - Light の保存するときに自動的に付けられるファイル名を設定する

Photoscape で、写真の一部をぼかしたい場合、モザイク系でしかできない。細かく、精密に範囲を指定することもできない。これに対し、GIMP は範囲を指定したり、いろいろな「ぼかし」方ができる。ただし、GIMP では、画像に吹き出しをつけるとき、Photoscape ほどお手軽にできない。

各々のアプリケーションは、やりたいことに対して一長一短があり、全ての要求を満たすことはできない。複数のアプリケーションを組み合わせて利用することは、避けられない。 (+_+)

 

4. 作業ごとに仮想デスクトップを割り当てる

複数のアプリケーションを使うとき、仮想デスクトップを上手く利用すると、効率的に作業をこなせる。

仮想デスクトップ WinDeskWide が激しく便利な件 - Open MagicVox.net によると、

一日の業務が始まると 1 枚目には Mozilla Thunderbird(メーラー)や Google Calendar(スケジュール管理)を開き，通常業務で使う開発環境などは常に 2 枚目以降に開くようにルールを決めておきます。そして何か新しい割り込みタスクがある毎に，仮想デスクトップを開いて関連するフォルダや資料を集めるようにしておきます。

仮想デスクトップとして、Virtual Dimension を使ったことがある。

使い方は、メインととなる画面を決めておき、現在の作業に必要ないアプリケーション、ウィンドウを、別画面へどけておくというやり方。作業単位ごとに仮想画面を使う、という発想はなかった。

追記(2012.3.4): 現在は、仮想デスクトップとして、Dexpot を利用している。

• 仮想デスクトップ に Dexpot - ホットキーの設定とタイトルバーへのマウス操作をカスタマイズ

 

画像を処理するための専用の仮想デスクトップ

試しに、作業ごとに仮想デスクトップを使ったら、各々の作業がしやすかった。ブログを書くときのやり方は、画像処理を行うための仮想デスクトップを１つ用意しておき、画像に対する全ての作業ををその画面で行う。

以下の写真は、画像を処理するために仮想デスクトップ画面。

1. 左上にはスクリーンショットを撮ったものが表示
2. ファイルを保存したら、画面右側にエクスプローラで保存先のフォルダが表示。
3. 画像変数のァイルに応じて、Photoscape もしくは GIMP にドラッグ & ドロップ。
4. 加工が終了したら、右下の juploadr で Flickr へアップロード。

処理が左上から右下へと流れていくイメージで、アプリケーションを配置した。また、それぞれのアプリケーションをアクティブにした場合、他のアプリが完全に隠れないように配慮した。これにより、素早くアプリ間を移動できる。

 

5. WinDeskWide の便利な使い方

上記で紹介されていた WinDeskWide は軽くて使い易いソフトだった。

アプリを起動した後に指定したデスクトップの画面に送る機能も備えているので、画像処理のために使うアプリケーションを開いてから、特定の仮想デスクトップ画面へ移動させるという手間がなくなる。

WinDeskWide を起動したときに、特定のアプリケーションを、特定の仮想画面で開く、という機能もある

 

基本的な操作

WinDeskWide のアプリケーションのウィンドウの位置を変えたいときは、Ctrl キーを押しながら WinDeskWide をつかんで移動させる。

 

他の画面へウィンドウを送るには

追記 (2009.12.30) : WinDeskWide を「右クリック > ウィンドウ一覧」で指定。

ウィンドウをつかんで別の画面に移動させたい場合は、予め 「設定画面 > マウス」の「マウスを使用して、隣接する仮想デスクトップへ移動する」にチェックを入れておく。

これで直観的な操作が可能になる。

 

振り分けの設定

1. タスクトレイにある WinDeskWide のアイコンを右クリック > 設定。
2. 「振り分け」タブを選択する。
3. 予め振り分けたいアプリを起動しておき、「現在のウィンドウ一覧状態から追加する」ボタンを押す。
4. 起動しているアプリの一覧が左側に表示されるので、必要なもの以外「削除」ボタンで取り除く。
5. 必要なアプリの表示位置を番号で指定する。

振り分けを行いたいときは、タスクトレイのアイコンもしくは、表示されている WinDeskWide において右クリック > 「振り分け」を選択する。

 

6. その他

ほとんどの機能の要求を満たす Screenshot Captor は、吹き出しを色々と付けることができたら、これ一つで済みそうだ。吹き出しを付けるソフトとして、未だ Photoscape 以上のものを見たことがない。

xmpfilter で Ruby のコードに実行結果をコメントに表示

1. 自動注釈プログラム xmpfilter とは？

Ruby で、スクリプトに注釈として、実行結果を載せたい場合、xmpfilter を使う。

xmpfilter を知ったきっかけは、Rubyの初心者にたいして「これは読むべき」だと思うコードを教えてください。.. - 人力検索はてな のコメントを読んだこと。

僕の例だとxmpfilterという超強力な自動注釈プログラムに惹かれ、内部を解析しました。

 

2. xmpfilter のインストールと実行

eigenclass - xmpfilter によると、

xmpfilter は rcodetools に含まれている。As of 0.4.0, xmpfilter has been included in rcodetools.

eigenclass - rcodetools に従い、コマンドラインから 、rcodetools をインストール。

gem install rcodetools

これにより、コマンドラインから、xmpfilter を実行できるようになる。

xmpfilter ファイル名

 

3. Code annotation

ブログにソースコードを載せるとき、実行結果や、変数の動きも含めたい場合がある。

例えば、次のようなコードを test.rb というファイル名で保存したとする。

出力させたい変数の右に # => と書く。

10.times do |i|
  i                    # =>
end

a = [1,2,3,4,5]
a.map{|i| i*2}         # =>

puts "ほげ"                    
puts a                         

コマンドラインから、以下を実行すると、

xmpfilter test.rb

次の出力が得られる。

10.times do |i|
  i                    # => 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
end

a = [1,2,3,4,5]
a.map{|i| i*2}         # => [2, 4, 6, 8, 10]

puts "ほげ"                    
puts a                         
# >> ほげ
# >> 1
# >> 2
# >> 3
# >> 4
# >> 5

 

4. Meadow (Emacs) での利用

gem でインストールすると、Ruby をインストールしたディレクトリの中に、

• C:\ruby\lib\ruby\gems\1.8\gems\rcodetools-0.7.0.0\rcodetools.el

が存在する。これを C:\meadow\site-lisp に入れ、.emacs に

(require 'rcodetools)

を記述した。

これにより、Ruby のスクリプト上で、

M-x xmp

とすると、xmpfilter を適用した結果が表示される。 また、

M-x comment-dwim (M-;)

でコメントを入力することができて便利。

追記 (2009.12.27) : Dropbox に Emacs のライブラリを置いたのに伴い、rcodetools.el も Dropbox に置くことにした。

学習環境としてのブログを考える 2 - UML で概念モデリングしながら

前回 は、ブログの利用方法が、当初考えていたものから変化してきたことを述べた。メモを書き散らかした集積所から、メモを利用した学習の場へと変化させたい。そのための、概念的な前提を考えた。

今回は、学習のためのツールとしてブログを見たときに、どういった構造を持っているか、意味的なレベルで考えていくことにする。ここで「意味的」というのは、人間から見て有益だと思える情報の単位を対象として捉えるということである。ブログのシステムにおける実装に関心があるわけではない。どういったものが学習に際して有益な情報であり、実際にそれをどのように管理するか考える橋渡しとする。

 

意味 (概念)  レベルで考える

検索のためのタグ付け

メモ (一般的に、ブログシステムから見たら「記事」) は、後で検索されることを目的とする。忘れたときに見返すのがメモだ。そのため、検索の手がかりとするために、メモには複数の「タグ」を付ける。

タグは、非常に曖昧な概念だ。使い方によって、意味が変わってくる。メモを分類するためのカテゴリーとして利用することもできるし、メモの中心となるキーワードを列挙することもできる。また、メモの文脈情報を付けると、後で検索がしやすくなったりする。

タグというのは、記事に対するメタ情報として利用されることが多い。例えば、記事と全く関係のないタグを付けるということは、通常考えられない。情報を整理する目的だけなら、記事に対して、カテゴリ付けをするだけでよい。しかし、後で検索することを目的とするならば、検索されやすくしなければならない。(タグの付け方の方略については、後日メモする。 CCC )

右図は、一つのメモに対して、複数のタグが付けられ、また、一つのタグに対して、複数のメモが属していることを表現している。 (先に述べたように、タグにはサブタイプを想定しているが、ここでは省略する。)

 

「疑問・後で調べる」の目印

メモを書いていると、「疑問」に思ったり、「後で考えよう」と思う事柄がでてくる。メモの内容は、一々全ての疑問を調べあげてから書くわけではない。もし、完全に全てのものを明らかにしてから書くとしたら、いつまでたっても書き出せなくなる。

まず、「メモ」は複数の「文」から構成されている。

「疑問」「後で調べる」の目印をつけるのは、特定の「文」に対してである。

 

メモ間の関連

メモは、前回のメモの続きを書いたり、後で読むときに同時に参考にするとよいメモを指し示したいことがある。メモは単独で存在するのではなくて、メモのネットワークの中に関連付けられて存在する。つまり、メモとメモの間には何らかの関連が存在し、それを記録することによって、トレーサビリティを高めることができる。

下図は、ある一つのメモが、複数のメモに関連付けられる可能性があることを示している。

 

メモのまとめ

メモがたまってくると、特定の視点からまとめたくなってくる。例えば、GIMP のことに関して書いてあるメモがたまってきたとする。そうすると、GIMP という一枚のページから各メモを俯瞰できるようにしたくなる。タグで 「GIMP」 とついているメモを抽出してもよいが、タグによる抽出 (検索結果) では個々のメモが独立していて、情報の流れ・幹というものが存在しない。また、情報へ辿りつくまでのスピードも落ちるし、トレーサビリティも落ちる。そして、メモの知識が頭の中でつながりを持った状態にもなりにくい。そのため、メモの知識を構造化するための「まとめ」のページが必要になる。

下図は、「まとめ」のページが、複数のメモに対してリンクしていることを示している。また、逆に、一つのメモは、複数の「まとめ」ページからリンクされる可能性がある。

「まとめ」同士のつながりは、「まとめ」と「メモ」との関係とは異なる構造になるように考えた。「まとめ」と「メモ」は、ネットワーク構造になっている。ネットワーク構造というのは、全体の構造を理解する場合、把握するのが難しい。ネットワークを辿る経路が複数存在してしまうからだ。これに対して、例えば、ドキュメントのようなものは、目次があり、章があり、個別の説明がある。これはツリー構造だ。部分は、一つの上位概念にのみ所属し、複数の上位概念には所属しない。これにより、部分へ辿りつくための経路が少なくなる。

ある情報が、全体の中でどのように位置付けられるかという情報によって、個別の理解が促進することがある。上記の「まとめ」は、一連の「まとめ」の構造において、ツリー構造となるように考えた。ある「まとめ」は、ある一つの「まとめ」に所属するが、複数の「まとめ」には所属しない。なんでもかんでも好きなように分類できる余地を排除し、分類同士は排他的になるように括っていくという制約をつける。

 

「続きを書く」目印

メモを書いていると、「これに続く内容を考えて、後に続けたい」と思うことがある。「メモに続きが存在する」という意味ではなくて、「このメモから続けたい」という意思だ。往々にして、これを頭の隅にだけ入れておくと、いつの間にか忘れ、考えていたことすら思い出せなくなる。先に、「疑問」「後で調べる」という目印を付けることを考えたが、これと同じように「続きを考える」という目印を、文に対して付けるようにする。

下図は、「疑問・後で調べる」と「続けたい内容がある」を「目印」のサブタイプと考え、それを特定の文に指定すると考えた。

 

タグの構造化

メモに、関連する言葉をたくさんタグ付けていると、タグの間の関係を規定したくなる。先に述べたように、カテゴリー、概念の類似性などを表現したい。これにより、タグから対象のメモへのトレーサビリティを高め、知識の構造化を促進させる。

 

関連記事

• << 学習環境としてのブログを考える 1

学習環境としてのブログを考える 1

ブログの目的の変化

当初、このブログは、後で思い出せないときのために、作業内容をメモしておく目的ではじめた。忘れてしまったり、わからなくなったら、検索して情報を探せばよい。 個別情報の集積所のように考えていた。

メモを書き出していると気がつくことがある。後で読んで自分が理解できるような文章にしているのだが、文章化する前の「走り書き」、「簡単な手書きの図」の説明は曖昧な点が多い。サラサラと書いているときは、どこにも整合性に誤りがないように思える。しかし、いざ書き出すとなると、途端に途方にくれることがある。 (@_@;)

発想法―創造性開発のために (中公新書 (136)) 川喜田 二郎 中央公論社 1967-06 by G-Tools

思い付きを書き散らしたメモや、頭の中にあるから大丈夫だと思っていることを文章にして一連のストリームにしてみる。そうすると、関連した情報を探す必要があったり、派生してアイディアが浮かんだり、考えを進めなくてはならないところが明確になったりする。以前に、KJ法の本を読んだことがあるが、カードの分類と文章化という作業を Web 上で行っているような感じだ。

後で使えるようにと書いているメモの内容は、今のところ基本的な部分をフォローしているに過ぎない。しかし、こういった内容も長いこと使わないでいると、綺麗サッパリ忘れてしまう。 (o_ _)ｏ  書き出すことによって記憶の定着が促進され、忘れたとしても再学習の時間が短かくなることを期待している。 o(^^)o

 

ログから作業場へ

構造を持った動的な知識体系

ブログ - Wikipedia によると、ブログとは、

「WebをLogする」という意味でWeblog（ウェブログ）と名付けられ、それが略されてBlog（ブログ）と呼ばれるようになった。

Log とは「日誌」という意味だ。コンピュータの世界では、機械が付ける一定の書式を持った「記録」という意味で使われる。ログの各エントリーは静的な構造を持っている。しかし、全体としては構造化されていない。 Apache のログも人が解析しなければ、ある特定の構造を持った文字列の集積に過ぎない。アンケートの結果もデータを解釈するための理論がなければ、ただのデータでしかない。「構造化」とは、全体に対する解釈する側の動的な視点のことだ。

さて、このブログはその名の通り、個別情報の倉庫という利用の仕方をしてきた。まさにログである。しかし、メモを書き出している自分という存在は、機械と違って独自の解釈体系を持つ何かである。メモがたまってくると、メモの方から「まとめろ～」という無言のプレッシャーを感じる。 (@_@;) 目の前に表われるものから、何らかの特徴を抽出して認識し、そこにカテゴリーを作ってしまうのが人の性。

タグ付けるという行為は、そういったカテゴリーによって物事を認識する人間の性質に要請された仕組みと言える。ほとんど全てのブログシステムにそのような仕組みが備わっている。従来の紙に書く日記は、「日付」という順序情報しか持たないことが多い。そういった点から見て、ブログとは従来のログという概念ではなく、構造化を志向する仕組みが備わった日記と言える。

人間は、効率的に情報を保持しようとするとき、色々な情報を関係付けたり、不必要なものを削除したり、抽象化することによって、より多くの価値を持つ情報、つまり、適用範囲の広い情報に変換しようとする。より少ない力で大きなものを持ち上げるテコのようなものだ。意味体系を適用しにくい情報を覚えておくことは難しい。ランダムな数字の羅列を記憶することは苦手だ。しかし、人間はそれ以上に複雑なことを覚えておくことができる。知識を構造化することができるからだ。

 

同じことを繰り返さない

一週間前の自分は、既に別人であると感じることがある。自分で書いたメモを読んでも、どういう意図で書いたのかわからないことがしばしば。。。ブログを書いていても、下手をすると、気づかずに同じ内容を繰り返しているかもしれない。 (^^; 記事を書く前に、以前に書いたかどうかを確認するのは面倒。そうすると、ある程度書いた内容を頭の中に入れておく必要がある。

ところで、以下の二つの日記の記述があった場合、そこにどんな意味があるだろうか？

2007.1.1

• A は B だと思う。

2008.1.1

• A は B だと思う。

両者は同じことを言っている。内容に関して意味的に等価だ。日付だけが異なっている。日付がどういう意味を持っているのか？それは「1年後、同じことを思った」という情報が表現されているに過ぎない。

では日付をとったらどうか？

• A は B だと思う。
• A は B だと思う。

明らかに冗長。

データベース実践講義 の「タプルが禁止される理由」の項において、表の中のデータの重複について次のように述べている箇所がある。

テーブル P には <P1, Screw> 行が3 つあるが、それが 2 つや 4 つや 17 でないことにどのような意味があるのだろうか。きっと何か意味があるはずだ。そうでなければ、そもそも何のためにそこに重複が存在するのか。かつて Codd が言っていたように、「もしそれが本当なら、二度述べたからといって真実味が増すわけではない」のである。 (p51)

データベース実践講義―エンジニアのためのリレーショナル理論 (THEORY/IN/PRACTICE) C.J. デイト Chris J. Date クイープ オライリージャパン 2006-02 by G-Tools

このブログにおいても、できるだけそのような事態は避けたい。ある事柄に関するメモは一つであり、それが訂正されるとしたら、誤りを改訂するか、訂正を記録し、改変がわかるようにしたい。

「重複」という言葉から、次の言葉を思い出す。

Don't Repeat Yourself (DRY),

これは以下のように解説されている。

also known as Single Point of Truth (SPOT) is a process philosophy aimed at reducing duplication, particularly in computing. The philosophy emphasizes that information should not be duplicated, because duplication increases the difficulty of change, may decrease clarity, and leads to opportunities for inconsistency.

(Don't repeat yourself - Wikipedia, the free encyclopedia より)

重複があると変更が難しくなり、明確さが失われていく。結果として、一貫性がなくなる可能性を孕むということだ。

例えば、ある記事の内容が重複しており、その内容が後で間違いだと気がついたとする。そうすると、重複しているすべての箇所を訂正しなくてはならない。一貫性を保つのにコストがかかってしまう。プログラミングにおいて、重複は最も嫌われるものの一つだ。同じようなものがあれば、まとめる。まとめたものは参照して利用する。メモも同様な方法で管理したい。

 

作業場とは

作業場というのは、状況に応じて刻一刻と変化する「場」だ。過去の集積場ではない。現時点から見て過去のメモは、絶えず修正の可能性を残し、全体として一つの知識を表現するという使い方をしようと思う。

人は、いくつかのことを同時に考えていると、その「広がり」と「方向性」を見失ってしまう。ある一つのことに集中すると、他が見えにくくなる。一度何かを考えると、以前の思考の流れに戻すことは難しい。考えると同時に、自分の知識構造が変化するからだ。それが人間の思考の特徴なのかもしれないが、不便なことに変化は抑制を生む。溝ができると、その場所以外を水が伝わりにくくなってしまう。

ブログというのは、その抑制を意識化させることができる。過去のものを読むことによって、以前の地点に引き戻され、そこからの眺めを得ることができる。ブログを書いて、自分の関心対象のマップを作り、さらにそこからまた別の道を見つけていく。マップは道が作られると変化し、辿っている自分自身もその変化の影響を受ける。

ブログは単なる静的な知識表現ではなく、書き手と知識表現とのインタラクションによって、こちら側 (思考する自分) と表現側 (ブログ) が同時に変化していくような「場」にしたい。

 

結局なに？

前置きが長くなってしまった。 (o_ _)ｏ~† しかも、何が言いたのか自分でもよくわからないことに。。。 ^^; 簡単に言うと、単なるメモの集積所ではなくて、学習の場としてブログを利用したいと、ただそれだけ。そんな欲を出したとき、ブログというシステムの枠において、どのような利用の仕方をすればいいのだろうか。以降、これを次の 3 点から考えてみたい。

• 学習のためのブログの構造を意味 (概念) レベルから考える
• Blogger において実際に利用するときの工夫
• あんなこといいな、できたらいいな

 

続く...

 

関連記事

• >> 学習環境としてのブログを考える 2 - UML で概念モデリングしながら

アメブロで Google Analytics を利用してアクセス解析をする - フリープラグインの追加方法

1. Google Analytics を併用する

Google アナリティクス
via kwout

アメブロには、標準のアクセス解析が付いている。しかし、内容が正確であるか疑問なので、Google Analytics を併用することにした。

前提

• Google Analytics のアカウントを作成し、アクセス解析したいサイト用のコードを取得してあること。

 

2. アメーバブログに Google Analytics を設定する

1. アメブロ > ブログを書く > サイドバーの設定 > プラグインの追加 を選択する。
2. セレクトボックスで、「フリープラグイン」を選択する。 --- (1)
3. Google Analytics のコードを貼り付け、保存する。
4. ブログを書く > サイドバーの設定 > サイドバーの配置において、作成した「フリープラグイン」を適当な位置に配置し、保存する。

(1) において、既にフリープラグインを利用している場合、

• ブログを書く > サイドバーの設定 > サイドバーの基本設定で、フリープラグインの設定ボタンを押す。

関連記事

• アメブロのアクセス解析と Google Analytics の違い

写真をお手軽に加工 - ブログに最適 Photoscape

友だちから、「ブログに使う写真をもっとかわいくしたい」けれど、何か方法はないか尋ねられていた。動作が軽くて、お手軽加工と言えば、JTrim が思い浮かぶけれど、写真に対して、フリーハンドで文字を入力したり、らくがきしたり、切抜きをしたりする点において、めちゃくちゃお手軽というわけではない感じだった。もちろん、Gimp を勧めるなんて、操作の複雑性からして、ありえない。

そこで探して見つけたのが、Photoscape。はじめ、Inkscape の親戚か何かなのか？と思った。

インストールして、使用してみると、まさに、お手軽。細かいことはできないけれど、写真を加工して、ブログに掲載したいということに対しては、必要にして十分。写真を一覧して見ることができる Viewer がついており、加工の画面は、直観的な操作ができ、また、複数の写真を一枚の写真に合わせる機能もついている。加えて、スクリーンショットもついてるので、これ一つで、相当いろいろなことができる。

例えば、この写真を加工してみた。

まずは、ハート型に切抜くには、セレクトボックスを選択するだけ。

文字の入力と、予め Photoscape に用意されている絵を貼り付けるのも、選択して、配置し、絵の大きさに合わせて拡大縮小するだけ。