月別アーカイブ: 2010年11月

ブログパーツをiGoolgeパーツに変換する

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する Microsoft Expression Web 4 を利用してブログパーツを作る 美女LinuxブログパーツはiPadでも動くよ 試しに Flash 版のブログパーツを作ってみる さらに寄り道してSilverlightでブログパーツを作る ブログパーツを iGoogle パーツに変換する ← 本道へ戻る Google を良く使う人ならば、iGoogleのほうが便利、というか、gmail ぐらいしかまともに表示させていないのですが。。。 な風に、美女Linux ブログパーツが表示できます。 作り方は簡単で、元々 j … 続きを読む

カテゴリー: 開発, ブログパーツ | 3件のコメント

さらに寄り道してSilverlightでブログパーツを作る

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する Microsoft Expression Web 4 を利用してブログパーツを作る 美女LinuxブログパーツはiPadでも動くよ 試しに Flash 版のブログパーツを作ってみる さらに寄り道してSilverlightでブログパーツを作る ← 寄り道 Siverlight 4 でブログパーツを作るとこんな感じ。 <サンプル> 移植はすんなりできそうです。 <コード> コード的には、これが一番すっきり…というか得意分野だけなんですが。

カテゴリー: 開発, ブログパーツ | コメントする

試しに Flash 版のブログパーツを作ってみる

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する Microsoft Expression Web 4 を利用してブログパーツを作る 美女LinuxブログパーツはiPadでも動くよ 試しに Flash 版のブログパーツを作ってみる ← 寄り道 Adobe Flash Pro CS5 体験版をダウンロードして作成してみる。 いやぁ、マジに初めてなもので、全く使い方が分かりません。。。が、ひとまず、こんな感じまで出来ました。 <サンプル> 画像の切り替えまでは分かったけど、外部読み込みは断念。これはまた後日。 なんか、ActionScript 3.0 から文法が変わっ … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする

美女LinuxブログパーツはiPadでも動くよ

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する Microsoft Expression Web 4 を利用してブログパーツを作る 美女LinuxブログパーツはiPadでも動くよ ← いまここ 一応、Javascript オンリーで動かすときのメリットは、iPad や iPhone で動くことです。 持ち合わせに iPhone が無いので、iPad で(…iPad だけ、持っているパターンは珍しいのだがw)。 iPad だと ブラウザが safari になるのと、フォントが windows 系ではないので、フォントイメージが異なりますが、まずまずな感 … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする

Microsoft Expression Web 4 を利用してブログパーツを作る

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する Microsoft Expression Web 4 を利用してブログパーツを作る ← いまここ Javascript オンリーでブログパーツを作る場合、簡単な画像の切り替えだけならば、手打ちで CSS を使ってもいいのですが、ちょっと凝ったデザインだと途端にお手上げになってしまいます。 (いえ、方眼紙に地道に書けばいいんですけど、、、) という訳で、適当な WEB サイト作成ツールを使えば良い、ということに気づいて、 Microsoft Expression Web 4 を使ってみました。 この手のツールが、ブロ … 続きを読む

カテゴリー: 開発, ブログパーツ | 2件のコメント

ブログパーツから動的にパーツデータを取得する

美女Linuxブログパーツ作成企画 ブログパーツを作る(準備) ブログパーツで画像の切り替え ブログパーツのフォントを揃える ブログパーツをjavascriptだけで作る場合の懸念点 ブログパーツに画像を重ね合わせてフレームを付ける ブログパーツから動的にパーツデータを取得する ← いまここ ブログパーツをjavascriptだけで作る場合の懸念点 | Moonmile Solutions Blog http://www.moonmile.net/blog/archives/1530 のところで、クロスサイトスクリプトの問題がなぁ、う~ん、と思っていたのですが、なんじゃ JSONP を使えば簡単にクリア。 これでできる! クロスブラウザJavaScript入門:第11回 JSONP入門|gihyo.jp … 技術評論社 http://gihyo.jp/dev/serial/01/cross … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする

ブログパーツに画像を重ね合わせてフレームを付ける

ブログパーツのフォントを揃える | Moonmile Solutions Blog http://www.moonmile.net/blog/archives/1525 の続き(あとで、目次風にまとめておく予定)。 文字の重ね合わせの時に、相対座標だけを使って、「position: relative」を使っていたのですが、 画像を使わずにCSSだけで角を丸くする方法 – [ホームページ作成] All About http://allabout.co.jp/gm/gc/24004/ を見ると、親タグで「relative」を指定しておいて、子タグに「absolute」を指定すると、座標指定が楽ですね。 そんな訳で、フレーム画像を重ね合わせるときには、 <div id=”bijo-linux” style=”position: relativ … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする

ブログパーツをjavascriptだけで作る場合の懸念点

ひとまず、これで簡単だけどデスクトップガジェットレベルまではOK。 で、拡張する場合の懸念点として、 ■文字コードの問題 日本語を受け渡しするときに、文字コードの問題があって、UTF-8 にするか、EUC にするか、JISコードにするか、という問題がある。 昔から作っているページは、JIS が標準なんだけど、最近のブログは英語圏発祥なので UTF-8 が主流だったり。 Linux 関係であれば、そのまま EUC を使ったり、表示時に判断しないといけない。 一番いいのは、 日本語を使わない。 のが良いのだけど、、、ん~、このあたりの懸念から Flash の方が作り易いんですかねぇ? ■クロスサイトスクリプトの問題 そもそもデータをどうやって受け取るのか、の問題があって、XMLHttpRequest を使う場合のパターンを決めておかないと、うまく受け取れない。 先の <srcript s … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする

ブログパーツのフォントを揃える

これが、flash で作るとブラウザ依存の悩みが減るのでしょうが…ま、ここは javascript オンリーで。 ■テキストのフォントを揃える。 ブラウザで見るならば、font-size で pt 単位を使うのでしょうが、パーツ上の固定位置になるので px 単位でも良いかなと思っています。このあたりはデザインを見ながら調節ですね。 ■テキストの位置を指定する。 画像に対して相対座標にするために、 position: relative; で指定した後で、top、left で位置決めをします。 この時、画像→時計の文字→コピーライト文字、の順になるので、top がマイナス値(画像の下辺からの相対位置)になるのが、ミソですね。 あと、テキストの高さを計算にいれてしまうと、位置決めが面倒なのであらかじめ、 line-height: 0px; にしてしまって、テキストの高さを計算に入れな … 続きを読む

カテゴリー: 開発, ブログパーツ | 2件のコメント

ブログパーツで画像の切り替え

デスクトップガジェットと同じように、定期的に画像の切り替えが出来たので確認。 ■ユーザーがパーツを貼る 貼るところのコードは、こんな感じ。   普通に、指定された javascript を読み込むだけです。 パラメータを指定する場合は、 外部変数を用意するか、 指定用の関数を用意するか、 タグに何か書き込むか、 というところですが、どのパターンでも「パーツを貼りつけるためのフォーム」は必要そうです。上のような1行だけならば、script 部分をコピー&ペーストでもいいんでしょうけど、それ以上を使う側にさせると間違える確率が増えるので、苦情もろもろが多くなるかな、と。 ■bijo.js の中身 何やら、ややこしい感じになっていますが、先頭で、スタイルと必要なタグを document.write で書き込む関数を作っておいて、最後に bijo function を呼び出す、という方式です。 ス … 続きを読む

カテゴリー: 開発, ブログパーツ | コメントする