matsunami.com:

ホーム > 2008年11月

line-heightについて

2008年11月23日 matsu | | コメント(0) | トラックバック(0)

 先日のemとpxに引き続き、文字について記述。今まで行間指定ではline-height 140%のような指定でやっていた。他にもpx指定やem指定があるのは知っていたが、倍率指定があるのを知らなかった。ブラウザに依存しない形で%指定が良いと教わっていたのだが、何も指定しない倍率指定が良いらしいのだ。

例えば
line-height: 1.6;
というような記述が良いらしい。

これだと、途中にフォントサイズを変化させたものや、強調タグなどいれた場合でも上記の指定に準じて行間を変えてくれるということだ。

HTMLやCSSもいろいろ変わっていくのだな。常に勉強していかないと。

emとpx

2008年11月18日 matsu | | コメント(0) | トラックバック(0)

 最近、いろいろなHTML/XHTMLとかCSSのソースコードをみてたら結構emという文字サイズ指定が多くなっている。調べたらユーザビリティやアクセシビリティの観点からみてもこっちの方が良くてレイアウトなどが崩れないという事。

で、emとはブラウザの標準文字サイズに対する割合で、文字指定の単位である。ちょっと前まで企業のサイトで良く、x-smallとかlargeとか使ってたんだけど最近みないなと思ってたらこういうことなのね。

で、標準文字サイズってどれくらい?という話だが、1emが16pxということである。1emが16pxね。(大事な事なので2回言いました。)良く0.75emという指定があったので、それは16×0.75em=12pxとなるわけだ。

これからem指定で仕事しようと思う。

オブジェクトパレット/ボタンオブジェクトについて

2008年11月 7日 matsu | | コメント(0) | トラックバック(0)

button_object01.jpg 

オブジェクトパレットの一番上の左から4番目に配置されているボタンオブジェクトについて簡単に説明。



button_object02.jpg拡大するとこんな感じ。ボタンの名の通りに押すと黄色く光る。内部的にはbangというメッセージが発生する。よく言われる事だがbangはバングではなくてバン。

 


 

とりあえず、オブジェクトパレットから配置してみるとこんな感じになる。

button_01.jpg



実行モードにしてコメント表示をつけてみる。Max5になってからかわいくなっている。他のオブジェクトもそうだけど。

button_02.jpg



printオブジェクトにつないでクリックしてみると黄色く光って、

button_03.jpg



Max Windowにbangメッセージが表示される。

button_07.jpg



実際の使用例としては、ある一定の処理が終わった時に、合図としてボタンを良く使う。電子レンジを使った時に音が鳴るように。下記の例だと、初めのボタンは本当にボタンとして、下から3つ目のボタンは終わった合図として。
これはボタンをクリックした数が10回の時に「10です」というメッセージが表示されるプログラム。

button_04.jpg



10回目の時にはifオブジェクトで判断されてボタンが押される。画像で光ってないのは、キャプチャーができなかったから、念のため。
button_05.jpg
 
 

Max Windowには表示されるのだが、文字化けで「です」が表示されない。これは調べなければならないな。。

button_06.jpg



ヘルプも参考に。
button_help.jpg

 

オブジェクトパレット/コメントボックスについて

2008年11月 6日 matsu | | コメント(0) | トラックバック(0)

comment_object_01.jpg 

オブジェクトパレットの一番上の左から3番目に配置されているコメントボックスについて簡単に説明。


 

 

comment_object_02.jpg拡大するとこんな感じ。他のプログラム言語でもそうだが、どのような処理が行われてるかなどをテキストで表示しておくと、後で見直した時に役に立つ。htmlだと<!-- -->とか他の言語だと//でくくったり/**/でくくったりなど。Maxはこのオブジェクトでコメントを残すことができる。作成したプログラムを配布するときもどのように操作すれば良いかがわかるので非常に便利。

 

とりあえず、オブジェクトパレットから配置してみるとこんな感じになる。

comment_01.jpg


デフォルトだと英語表記でしかコメントできないので、オブジェクトを選択して右クリックでインスペクタを表示する。Font Nameの部分から適当な日本語フォントを選択する。画像ではOsakaを選択している。

comment_02.jpg



日本語フォントで文字が打てるようになるので、実際に書いてみる。

comment_03.jpg



具体的にはこんな感じ。自分でサブパッチャーを作っていった場合に、そのサブパッチャーでどのような処理を行ったかを記載しておくと流れが分かって良いと思う。

comment_04.jpg


あまり意味はないがヘルプファイルもあるので参考に。

comment_help.jpg

 

 

 

 

 

オブジェクトパレット/メッセージボックスについて

2008年11月 4日 matsu | | コメント(0) | トラックバック(0)

message_box_01.jpg

オブジェクトパレットの一番上の左から2番目に配置されているメッセージボックスについて簡単に説明。


 message_box_02.jpg拡大するとこんな感じ。オブジェクトボックスに対してメッセージを送るためのオブジェクト?言い方がおかしいかもしれないがそうなのだ。オブジェクトボックスが関数ならば、メッセージボックスは変数であると言える。オブジェクトによって与えられるメッセージも変わっていくので、そこはオブジェクトのヘルプを見てもらえればと思う。
実際どのような感じになるかを説明。
 

 

message_01.jpg
 

パッチャーウインドウで上記のメッセージボックスを配置したところ。実行モードで見ているのでインレット(入力)とアウトレット(出力)は表示されていない。のっぺりとした感じだ。
 

 

message_02.jpg


メッセージには数値や文言など入れる事ができる。オブジェクトによって他のメッセージも入れる事ができるがそれは後々に説明。

実際にどのように動作するかを確認するためにprintオブジェクトで試してみる。まずはWindowメニューよりMax Windowを起動する。するとこのような画面が表示される。

 

max_window.jpg



続いてprintオブジェクトを配置して、それぞれのメッセージボックスとラインで繋げる。実行モードにして100をクリックしてみると。

 

message_03.jpg


Max Windowには100と表示される。
 

 

message_04.jpg


続いてMax/MSP/Jitterボタンを押してみると。
 

 

message_05.jpg


Max WindowにはMax/MSP/Jitterと表示される。
 

 

message_06.jpg
 

プログラムを組んで行くと、どのような処理が行われて、何の値が出力されているのかが分からなくなるときがあるので、このprintオブジェクトとMax Windowを使うと良い。いわゆるデバッグ。
詳しくはヘルプパッチで確認すると良い。
 

 

message_07.jpg

 

 

 

 

 

 

 

 

MT4i インストール

2008年11月 3日 matsu | | コメント(0) | トラックバック(0)

個人的にはあまり使用しないと思うのだが、仕事の事もあって携帯からMovable Typeを更新できるようにMT4iをインストールしてみた。

さっそくMT4iをダウンロードするためにMT4iサイトへ
http://www.hazama.nu/pukiwiki/index.php?MT4i

 

 

mt4i_001.jpg

他のサイトや本を見てみると、最新版の3.0はいろいろと設定がややこしいということなので、一つ前のバージョンであるMT4i/2.2をダウンロードすることに。

 

mt4i_002.jpg

上記の画像の2.25をダウンロードしてみた。

 

mt4i_003.jpg

 

mt4i_004.jpg

mt4i.cgiとmt4imgr.cgiとmt4libをmovabletypeをインストールしたフォルダにアップロードする。
例)http://www.xxxxxxx.xx/mt/mt4i/
ムーバブルタイプがアップされたフォルダにmt4iなどとディレクトリを作成してそこにアップ。

mt4i.cgiとmt4imgr.cgiの最初にperlのパスが記載されているので、それは必要に応じて変更する。自分の環境だと特に問題はないはずだったが。。(/#!/usr/bin/perl)
またmt4imgr.cgiに管理用のパスワードを設定してからファイルをアップしなくてはならない。
ソースコードの以下の記述を見つけて変更する。
my $password = 'ここにパスワードを設定する';

DreamWeaverでウェブの制作をやっているので、文字コードが異なると変換しないで文字化け状態で表示されてしまう。なので、以前良く使っていたmiをインストールして使うようにした。

 

 

mt4i_005.jpg

ファイルをアップしてパーミション設定をした後、mt4imgr.cgiにアクセスする。パスワードが求められるので、先ほど設定したパスワードを入力すると上記の画面になる。設定を編集するが選ばれているので、ENTERをクリックして次のページへ。

 

mt4i_007.jpg

mt4i_006.jpg

 

必須設定項目の「MTホームディレクトリ」と「MovableType上で使用しているBlog固有のID」を設定する。固有IDの方は設定しなくても特に問題ないが、ホームディレクトリは設定しないとNG。MTがはいっているディレクトリを設定したのだが。。

 

mt4i_008.jpg

設定後、mt4i.cgiにアクセスするとエラーが表示されてしまった。ここでいろいろサイトを見てディレクトリの位置が違うとエラーになると書いてあったので、シンボリックリンクでない直接のアドレスを指定してもダメだった。またいろいろ探すとプログラムの記載にある文言を加えることで問題解消できると書いてあった。

perlへのパスの記述に--を付けると解決した。
/#!/usr/bin/perl --

mt4i.cgiだけでなくmt4imgr.cgiが動かない場合もこれで起動するようだ。自分の環境ではmt4i.cgiだけがおかしかった。

 

mt4i_009.jpg

これで無事にmt4i.cgiにアクセスができた。後は携帯からアクセスしてみようと思う。

 

 

 

 

 

 

 

Shadowmaker

2008年11月 2日 matsu | | コメント(0) | トラックバック(0)

 厳密にはAjax/Javascriptというカテゴリではないのだが、Googlemap関連なのでこちらに記載。
Googlemapで検索するとこのような画面が表示される。

googlemap_icon_001.jpg

デフォルトで表示される風船のようなアイコンを拡大してみるとこのような感じ。

google_icon_002.jpg

このアイコンを変更することができるのだが、変更する場合は影のアイコンも作成しなくてはならない。これ面倒くさいなと思っていたらオンラインで変更してくれるサービスがあった。


Shadowmaker(http://www.cycloloco.com/shadowmaker/というサイトである。

shadowmaker_001.jpg

Start Shadowmakerというボタンをクリックする。

shadowmaker_002.jpg

変更用に作成したアイコンをファイル選択ボタンを押して選択。その後、Make shadowボタンを押す。

shadowmaker_003.jpg

アップしたアイコンと共に影のアイコンが作成され、上記のように表示される。ダウンロードのリンクを押すとファイルをゲットできるし、ソースコードも表示されるのでそれを自分のサイトに貼るとアイコンも変更されると。かなり便利なサービスなのでありがたい。