ホーム > 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)
オブジェクトパレットの一番上の左から4番目に配置されているボタンオブジェクトについて簡単に説明。
拡大するとこんな感じ。ボタンの名の通りに押すと黄色く光る。内部的にはbangというメッセージが発生する。よく言われる事だがbangはバングではなくてバン。
とりあえず、オブジェクトパレットから配置してみるとこんな感じになる。

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

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

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

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

10回目の時にはifオブジェクトで判断されてボタンが押される。画像で光ってないのは、キャプチャーができなかったから、念のため。
Max Windowには表示されるのだが、文字化けで「です」が表示されない。これは調べなければならないな。。

ヘルプも参考に。
オブジェクトパレット/コメントボックスについて
2008年11月 6日 matsu | 個別ページ | コメント(0) | トラックバック(0)
オブジェクトパレットの一番上の左から3番目に配置されているコメントボックスについて簡単に説明。
拡大するとこんな感じ。他のプログラム言語でもそうだが、どのような処理が行われてるかなどをテキストで表示しておくと、後で見直した時に役に立つ。htmlだと<!-- -->とか他の言語だと//でくくったり/**/でくくったりなど。Maxはこのオブジェクトでコメントを残すことができる。作成したプログラムを配布するときもどのように操作すれば良いかがわかるので非常に便利。
とりあえず、オブジェクトパレットから配置してみるとこんな感じになる。

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

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

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

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

オブジェクトパレット/メッセージボックスについて
2008年11月 4日 matsu | 個別ページ | コメント(0) | トラックバック(0)

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

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

メッセージには数値や文言など入れる事ができる。オブジェクトによって他のメッセージも入れる事ができるがそれは後々に説明。
実際にどのように動作するかを確認するためにprintオブジェクトで試してみる。まずはWindowメニューよりMax Windowを起動する。するとこのような画面が表示される。

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

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

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

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

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

MT4i インストール
2008年11月 3日 matsu | 個別ページ | コメント(0) | トラックバック(0)
個人的にはあまり使用しないと思うのだが、仕事の事もあって携帯からMovable Typeを更新できるようにMT4iをインストールしてみた。
さっそくMT4iをダウンロードするためにMT4iサイトへ
http://www.hazama.nu/pukiwiki/index.php?MT4i

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

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


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をインストールして使うようにした。

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


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

設定後、mt4i.cgiにアクセスするとエラーが表示されてしまった。ここでいろいろサイトを見てディレクトリの位置が違うとエラーになると書いてあったので、シンボリックリンクでない直接のアドレスを指定してもダメだった。またいろいろ探すとプログラムの記載にある文言を加えることで問題解消できると書いてあった。
perlへのパスの記述に--を付けると解決した。
/#!/usr/bin/perl --
mt4i.cgiだけでなくmt4imgr.cgiが動かない場合もこれで起動するようだ。自分の環境ではmt4i.cgiだけがおかしかった。

これで無事にmt4i.cgiにアクセスができた。後は携帯からアクセスしてみようと思う。
Shadowmaker
2008年11月 2日 matsu | 個別ページ | コメント(0) | トラックバック(0)
厳密にはAjax/Javascriptというカテゴリではないのだが、Googlemap関連なのでこちらに記載。
Googlemapで検索するとこのような画面が表示される。
デフォルトで表示される風船のようなアイコンを拡大してみるとこのような感じ。![]()
- コメント
-
- トラックバック
-
- タグクラウド
-
- ajax
- antymark
- ARToolKit
- css
- CSS
- CV
- em
- fontsize
- googlemap
- HTML
- javascript
- Jitter
- Max
- Max/MSP/Jitter
- Max5
- Movabletype
- movabletype dreamweaver
- Movabletype4.2
- MSP
- MT4i
- MTEntry
- OS X
- px
- QRコード
- textedit
- vj
- VJ
- web
- XHTML
- アイコン
- インスタレーション
- ウェブサービス
- スタイルシート
- テンプレート
- デジタルサイネージ
- バグ
- フォトギャラリー
- ブログ
- ブログ記事のID
- メモ
- 動画
- 携帯サイト
- 携帯サイト制作
- 日本語化