Home suc 覚書
覚書

Finding & Creating icons! in findicons.com:アイコンに困ったら。。

suc - 覚書

2010年 3月 17日(水曜日) 00:23

ページ制作をしていると、よくアイコンの必要性に迫られる。
WEB上には様々なアイコン配布サイトがあるが、今日はその一つで規模も大きいfindicons.comのご紹介。
 image
キーワード検索や一覧表示から目的のアイコンを見つける!


image 
キーワード検索結果画面

検索した結果から更にバックグラウンド色、サイズ、色イメージなどで絞り込むことも可能だ。


image
変換画面

アップロードしたアイコンを変換して、そのままダウンロードできる。

APIも公開予定とのことなので(アイコン検索と作成のAPIって、、)、色々な利用サービスの出現が楽しみ?!

ActionScript 3.0 覚書

suc - 覚書

2010年 1月 19日(火曜日) 01:10

ActionScript 3.0は以前のバージョンとは別の言語になったといっても良い。
どこにでも書けたスクリプトはフレームと外部ファイルに統一され、on()やonClicEvent()といったイベントハンドラは使用できなくなった。
もちろん互換もナシ。

このあたりの情報、Adobeのヘルプを見ても読む気にもならないし、、簡潔に公開されていないため、ちょっと覚書。
ActionScript 1.0、2.0しか知らない人のための最初の第一歩。ボタンの作り方です。

イベントリスナー

イベント処理のためにはイベントリスナーを利用しなければならない。
処理の手順は「イベントリスナーの登録」、「イベントリスナーの定義」の二つの記述を行う必要がある。

 

  • イベントリスナーの登録
    オブジェクト.addEventListener(イベントタイプ,リスナー関数,キャプチャでの動作,優先度,弱参照するか);
    ※弱参照とはガベージコレクタの対象にするかということ。
    実際の記述
    bt_stop.addEventListener(MouseEvent.CLICK,StopBtHandler);
  • イベントリスナーの定義(イベント発生時の処理)
    function リスナー関数(イベント) {
               //処理
    this.stop();
    }
    実際の記述
    function StopBtHandler(MouseEvent) {
    this.stop();
    }

実際どうするの

と、このように書くと、普通の解説で結局分かりにくいので、省略できるものは省略して、ボタンの作り方をpdfファイルにしました。詳しい解説は他の人に任せます。

Google Chart APIと数式エディタ

suc - 覚書

2009年 12月 13日(日曜日) 08:23

友人から数式エディタについて聞かれていたので、ちょっと調べて見ると、2009年の9月からgoogle doc で数式の埋め込みが可能になっていた。

最初はオープンソースのエディタが無いものかと調べていた。
しかしどれもLaTeXを基本にしているものの、入力が面倒そうで(数式に弱い僕は本当に面倒なのか試すことができないが、、)あと一歩、利用するには物足りない。

しかし、もう少し調べてみると何とgoogle docで数式入力(Equation Editor)が可能となっていたのだ。
日頃google docを利用していたがこれには気が付かなかった。
試しに意味の無い数式を入力すると「おぉ、使えそう。」な感じだった。
数式エディタはGoogle Chart APIに含まれているようだが、リソースの場所が分からない。

実際、数式を作成するとサーバーサイドへのリンクが作成されるので、パスをコピー&ペーストすれば一般のページでも表示可能だ。
また、google docからも再編集可能なので、かなり便利だ。
APIが公開されていれば、エディタを実装しコードを直接コンテンツに埋め込むことが可能だ。誰かご存知でしたら教えてください。

 

 image

 


ちなみにグラフやQR Codesの表示も簡単ですね。

拡張現実(AR)インタフェース「セカイカメラ」のリリース

suc - 覚書

2009年 9月 29日(火曜日) 00:00

9月24日にiPhone App Storeに「セカイカメラ」が並んだ。
昨年から話題になっていた「セカイカメラ」だがようやく製品としてリリースされたのだ。
「セカイカメラ」に関しての説明は省くので、詳しくはこちらをご覧下さい。

簡単に言うと、場所に情報をタグ付けして、iPhonのカメラ越しに見ると、実際の風景の中にそのタグが見え、アクセスすると情報を表示・・・説明するとややこしいですね。

単純な問題点としてはここに書かれているが、エアタグが一箇所に集中すると目的の情報を取り出すことが難しくなる問題もあるので、時間軸やキーワードによるフィルタリングも提案されている。
しかし、この手の問題は現在のWEBにも共通することで、検索エンジンがそれに対する一つの答えとなっている。
実際にはエアタグが氾濫した場合は簡単な検索でフィルタリングするのが良いかも知れない。たた、モバイル端末の最大の欠点は画面の小さいことで、情報に到達するためのインターフェイスとしては「セカイカメラ」とは別次元で、解決方法の模索と確立が必要だろう。
「セカイカメラ」と類似の技術は多く開発されつつあって、

http://www.masayashi.com/2008/01/20/556
http://petitinvention.wordpress.com/2008/02/10/future-of-internet-search-mobile-version/
http://www.enkin.net/

など、色々。
その中でも商品化が早かったのが「セカイカメラ」と言えるかも知れない。
拡張現実(AR)関連の商品では「電脳フィギュア ARis(アリス)」なんて言うのもあって、急激に市場は拡張している。

個人的には商品の可能性としては「電脳フィギュア ARis(アリス)」の方向性-架空物体を現実世界に投影する-が有望と思っている。
「セカイカメラ」は情報インフラの一形態なので、これからどのように発展するかが見えない。もちろん画期的でずいぶん面白いことは確かだ。
開発会社が大儲けすることも間違いないが、様々な利用シーンが考えられる反面、位置情報に緋も付ける情報の付加価値と質に関して見えない部分が多い。
また、「セカイカメラ」はiPhoneアプリだが、僕はiPhoneを持っていない。
個人的にはNOKIAユーザーなので、Symbianアプリでも出てくれると嬉しい。

実際には将来、多くの企業から幾つもの「セカイカメラ」的サービスが乱立するように思う。

Google Chrome が旬

suc - 覚書

2009年 8月 06日(木曜日) 00:00

最近のfireFoxはおかしい。
僕のローカルな環境のためか、それともFF自体が肥大化したためか、理由は定かでないが、暫く前まで快適ブラウザの代名詞だったFFが今ではもう役立たずになってしまっている。

最近ではメインのブラウザはGoogle Chromeとなってしまった。 ナビゲーションに特徴はあるものの、Javascript全盛の今のWEBブラウジングでは快適そのものだ。

今現在の最新版は「3.0.195.4」だが、 joomler.netさんでも『Chromeのテーマを変更しよう』と紹介されていたので、テーマを変更してみた。
中々、オシャレな感じでGOOD。

そう言えば、『IE6 No More』(IE6撲滅キャンペーン)が行われているが、私の制作でも今年の5月から確認ブラウザからIE6を外す宣言をしています。
IE6対応は追加費用が発生する場合があります。^^

Windows XP にメイリオ フォントをインストールしてリンクに取り消し線

suc - 覚書

2009年 2月 04日(水曜日) 00:00

世の中そろそろ、VistaでIE7でメイリオ、、といった環境がスタンダードになると思うが、 Windows XP にメイリオ フォントをインストールしたブラウザ環境(IE6、IE7)でリンクを見ると、テキストに取り消し線のような線が見られた。
良く見るとリンクのtext-decorationのボーダーが上に上がって表示されているのだ。

最初はline-height:を明示的にも与えれば解決するかと思ったが、そう簡単にはいかなかった。

WEBを探すと、殆ど情報が無い中で、フォント指定にメイリオを指定すると解消するという記事を見つけた。
しかし、これだとMS P ゴシックに最適化(レイアウト)しているページでは不都合が生じる。
特にメイリオは可読性が高く読みやすい文字だが、従来のフォントに比べて若干ボディが横方向に広い(95:100なので昔風に言えば平0.5といったところか。。)
最終的にはフォントの指定はユーザーにコントロールされるが、一先ずMS P ゴシックを優先として指定したいものだ。

そこで色々調べて見ると、以下のことが分かった。

    ・リンク要素に画像が配置してあると、 ×
    ・フォーム要素などにvartical-alignが設定されていると、 ×

上記適応箇所でも、

    ・メイリオを優先指定すれば ○
    ・半角だけなら ○

とっいた結果が出た。
ようするに、メイリオのバグだ。

CSSレイアウトの隙間をコントロール!

suc - 覚書

2008年 11月 26日(水曜日) 00:00

上下マージンが思ったように空かない マージン相殺 CSSにはマージンの相殺という概念があります。
マージンの相殺とは、

『隣り合っているか親子関係にあるボックスはパディングもボーダーも間に挟んでい無い場合、上下マージンが結合される』

というものです。
しかし以下の場合はマージンは相殺されません。

  1. フロートしているボックスとのマージン
  2. ポジショニングしているボックス
  3. 左右のマージン

このためマージン相殺を理解していないと、 『思ったレイアウトが出来ない!』ということになってしまいます。

マージン相殺をさせないためにはいくつかの簡単な方法があります。

  1. 関係するボックスにボーダーかパディングを設定する。
  2. 関係するボックスをフロートする。


実際には例えば、
親ボックスに padding-top;1px: や float:left; など邪魔にならない設定をしてみましょう。

フォントスタイルのリセットとベースサイズのセット(jfonts.css、)ver.20081204

suc - 覚書

2008年 10月 24日(金曜日) 00:00

最近、YUIのfonts.cssを利用してフォントスタイルのリセットを試みていたが、日本語フォントには対応していないために、独自に作ることにした。
最初は理論的に考えていたが、どうもうまく行かない。
最後は帰納法的CSSとなってしまった。
フォントスタイルのリセットやベーススタイルのセットと言っても考え方やアプローチが色々と存在する。それらの中の一つの提案として判断頂きたい。

設定など、詳しくはこちらのページ
只今修正中

/*fonts base size set for ja-font by @itami.info 20081204*/

body {
font-family:"MS Pゴシック",Arial,sans-serif ;
font-size: 13px;
line-height:1.5;
font-weight:normal;
font-style:normal;
}
select,
input,
button,
textarea {
font:100% "MS Pゴシック",Arial,sans-serif ;
}
table {
font-size:inherit;
font:100%;
}
textarea {
font-size: 100%;
}

 

 

IE7で背景画像が表示されない

suc - 覚書

2008年 10月 24日(金曜日) 00:00

どのような理由か、
IE7では画像が表示されないというバグに出会った。
FireFoxやその他のブラウザならOKなのに・・・。

そこで色々調べてみると、IEではCSSの記述をシッカリ書かないと表示されない場合があるようだ。
例えば今回の場合

駄目だったCSS
background:url("../images/appearance/bullet1.gif") no-repeat;

表示されたCSS
background-image:url("../images/appearance/bullet1.gif");
background-repeat:no-repeat;

ストックフォト(写真素材)無料と有料とその他色々・・・

suc - 覚書

2008年 7月 03日(木曜日) 00:00

一応、ライセンスフリー、無料のサイトを集めていますが、個別に有料やライセンス規定のあるものがあります。ご注意下さい。
 

角丸のあれこれ

suc - 覚書

2008年 6月 11日(水曜日) 00:00

今や角丸表現は当たり前の時代。
グラフィックデザインでは文字背景のデザインをプレートデザインなどと言ったりもするが、その昔WEBの世界では矩形があたり前だった。
WEBデザインの世界で文章の背景プレート(ボックス)をグラフィック化せずに角丸のデザインを行うには、古くはテーブルによる角丸が考案され、盛んに利用されるようになった。(およそ10年ちょっと前) その後、CSSによる角丸が考案されたりもしたが、、、初期のCSSによる角丸実装は見た目もエレガントとはいえなかったりした。
現在ではJavascriptによる様々な角丸が公開されている。
やっていることは、、やはり面倒なことだが(エレガントに見える白鳥の足が水面下では忙しくバタつかせているように)、JavascriptとCSSにより、利用は格段に手軽なものとなった。
最近では各種のJavascriptライブラリのプラグインとしてもリリースされているので、何れかのライブラリを利用している場合はリッチな角丸が簡易に実装可能となっている。
そこでここでは少しまとめて、必要なときに直に利用させて頂くことにした。
 

<< 最初 < 戻る 1 2 > 最後 >>

Page 1 of 2