2008年4月アーカイブ

Ajax Rain

Flex:ILOG Elixir、WorldCountryMapsカスタムコンポーネントをテスト的に使って見ました。
こんなのがちゃんと国別に分割されていていろいろなものに使えそうですね。

ちなみにアジア版やヨーロッパ版もあります。
（ちなみに日本の四国と九州がありません・・・）
 

RIA系（Flex、AIR、Silverlight）の開発会社まとめです。


クラスメソッド株式会社




その他

• アップフロンティア株式会社
• アンカーテクノロジー株式会社
• 株式会社テコノ
• 株式会社マリエッタ
• ＮＥＴＣＩＴＹＳ株式会社
• 株式会社プレイウェル
• 株式会社セカンドファクトリー
• 株式会社インフォサイド

今のところ見つけられたのはこれくらいです。
情報があれば下記からお知らせいただけるとうれしいです。
http://d-remix.net/contact.html

Fxug

• Tree コンポーネントにドラッグアンドドロップ機能を追加したカスタムコンポーネント
• レーダーチャート・チェックマークツリー・ドラッグアンドドロップウィンドウのCADENZA
• DataGrid に Excel シートとのコピー＆ペーストの機能を追加したカスタムコンポーネント
• 美しいチャートや世界地図が使えるILOG Elixir

普通のコンポーネントは以下で確認できます。

• Style Explorer(Flex 2.0)
• Component Explorer(Flex3.0)

今のところ見つけられたのはこれくらいです。
情報があれば下記からお知らせいただけるとうれしいです。
http://d-remix.net/contact.html

ABC クッキングスタジオ 1day レッスン web予約


これFlashでできたように見えますが、Adobe Flexってやつでできてます。
HTMLとCSS、Javascriptと同じようにMXMLとCSS、ActionScriptでアプリケーションを作ることができます。
もちろん、たくさんのコンポーネントが準備されているので、ドラッグでカレンダーやグラフを追加したりできます。

HTMLでアプリケーションを作るようにFlashアプリが作れるのはすばらしいですね。
しかもなめらかでシームレス。
すばらしいですね。

Twitterの日本語版が公開されたついでに登録してみました。
ちなみに自分のTwitterはこちら
是非フォローしてください！

GALLERY GALLERY

採用系サイトをできるかぎりまとめてみました。


IMJ新規採用サイト2009：ユウキ・マスト

Javascript,Ajaxに関してのまとめです。

書籍

Javascript関連書籍まとめ


Ajax関連書籍まとめ

Design Remix SEED

※日記みたいなものなので興味のない方は飛ばしてください。

いろいろと勉強してますが、最近つくづくセンスと引き出しが無いことを実感してやるせなくなります。

そろそろAjaxも飽きてきたのでデザインを勉強しようと思う。
下がセンスのかけらもないべた塗りのロゴ（泣）

スムーズなスライドを意外と簡単に作ることができます。

サンプル


こんな感じのスライドをPrototype.jsとScriptaculousのエフェクトで簡単に表現できます。 考え方として、ScriptaculousのEffect.Morphを使ってスタイルを動的に変化させます。 id:MoveSampleにoverflow:hiddenを使い、内包の横に並ばせた要素を隠します。
隠した要素をEffect.Morphでスタイルのmargin-leftをマイナスに指定することで、横に移動させます。
これで、なめらかにスライドを変更することができます。
応用すればhtmlを表示させたりできますね。


ちなみにnoobSlideはこれ。
http://efectorelativo.net/laboratory/noobSlide/sample.html

ミトリエ

知っている限りの優良書籍をまとめました。

関連書籍

関連サイト

• とほほのWWW入門
• とほほのスタイルシート入門
• css Zen Garden
• CSS REMIX

関連サイトのとほほ系はずいぶん昔からあって、情報も豊富です。
ほとんどここで情報を入手できるはずです。

応用とか海外のテクニックを見たい方はcss Zen GardenやCSS REMIXがおすすめ。

HELLO, WORLD

Adobe AIR関連の書籍をまとめておきます。

AIRはブラウザの枠を超えたデスクトップウィジェットで、Flex以上に注目されている新しい技術です。
今後勉強のために買えるようメモ。


Adobe AIRはFlexからすごく簡単に作成することができます。
Flexにかんする書籍は以下からどうぞ。
Flex関連書籍まとめ。

今更ですがMTをアップグレード。

外見はまったく変化がないですが、MT4.1にアップグレードしました。
MT4.0からMT4.01へのアップグレードはMySQLを利用している場合簡単です。

バージョンアップに関しては、以下のサイトを参考にしました。
http://www.movabletype.jp/documentation/versionup/#backup

新機能に関してはこちら
http://www.movabletype.jp/blog/new_features_41.html


基本的な流は
１，ブログのバックアップ（記事・MTデータ）
２，MT4.0の削除
３，MT4.1のアップロード（MT4.0のmt-config.cgiをアップロードしパーミッション設定）
４，mt.cgiにアクセスしてアップグレードを行います。


以上、MySQLの場合はこれだけです。
SQLiteの場合は、上記リンクを参考にしてください。


※MT4.1個人用の無償ライセンスはこちら

デジタルハリウッドでは約半年間でweb関連の技術を学び、その後2ヶ月で卒業制作を行います、
卒業制作ではノージャンルで自分の好きなものを今まで学習・経験をもとに制作していきます。

未経験の人がwebの業界で働くには少し短い期間ですが、それぞれ頑張って制作していました。
それぞれ苦労しながら頑張って制作したものを今回の発表会で発表していました。


web業界も今後さらに需要があると思うのでどんどん増えていってもらいたいですね。
で、今回見ていて特に良かったのが下の定点撮影をコンテンツにしたサイトです。

技術はまだまだですが、苦労して時間をかけて作っているのがよくわかります。
内容もおもしろいですね。

teisatsu lab

http://scr.sc/products/dropclock/

ブログを始めたばかりだと、アクセス数を見て悲しくなってきますが、頑張って一ヶ月ほど続けるとそれなりにアクセスされるようになります。
そのほかにアクセス数を増やすためにはSEOやらほかのブログへのコメント・トラックバック等がありますね。
そこで、今回はブログランキングサイトのまとめです。


http://kutsulog.net/

ローディングアニメーションを作るのってけっこう手間なのですが、自動でつくってくれるジェネレータを使えば10秒ぐらいでローディングアニメーションGIFができちゃいます。


http://loadinfo.net/



http://www.ajaxload.info/
私はこのサイトをよく使います。



http://www.webscriptlab.com/


ちなみに以下のサイトにローディング画像の作り方が載っています。
http://www.webzo.org/tutorials/adobe-photoshop/loading-gif-animation.php

Design Remixのプレビューページ
こんな感じにアップロードした画像をずらずらっと表示できます。

PIXTA

Realco

ButtonBarに適用できるスタイルの例

ButtonBar {
    /* ボタンバーの高さ（内包のボタンの高さ） */
    buttonHeight: 28;

    /* ボタンバーの長さ（内包のボタンの総幅） */
    buttonWidth: 95;

    /* ボタン間隔 */
    horizontalGap: -1;

    /* インデント */
    textIndent: 0;

    /* 文字間隔 */
    letterSpacing: 0;

    /* 内包ボタンのスタイル指定 */
    buttonStyleName: "mybuttonBarButtonStyle";

    /* 最初の内包ボタンのスタイル指定 */
    firstButtonStyleName: "mybuttonBarFirstButtonStyle";

　  /* 最後の内包ボタンのスタイル指定 */
    lastButtonStyleName: "mybuttonBarLastButtonStyle";
}

画像のソース


SEOに関して、これがすべてではないですが、重要なものをまとめました。。
（この内容がすべて正しいとは保証できませんし、今後１時間、１日、一週間後には全く意味のないことになってるかもしれません）

構築時の対策

• 事前にキーワードを調査し、決めておく
• ドメイン名・ページURLでのキーワード使用
• meta、descriptionでのキーワード使用
• テーブルレイアウトは避けweb標準に準拠する
• ウェブコンテンツJISを考慮する
• 階層は４つ以下にする
• 画像のalt属性は必須（無意味な画像は空にする）
• HTML,CSS,Javascriptは分離する
• titleにキーワードを埋め込む
• 見出しにキーワードを埋め込む
• 本文にキーワードを埋め込む
• Title・見出し・本文の関連性を考慮する
• strong,emタグを利用する（数に注意）
• サイト内リンクを適切に張りめぐらせる

構築後の対策

• サーチエンジンへの登録申請
• Google Webmaster Centralからmetaタグを生成してサイトに追加
• サイトマップxmlの作成
• Google Webmaster Centralで2で作成したサイトマップxmlの登録
• Google Analyticsにwebサイトを登録
• ソーシャルメディアからのリンク（スパムには注意）
• RSSの配信
• トラックバックを送る（サイトによっては効果が無い）
• リンクしてもらえるよう工夫したコンテンツを作る
• ページの更新頻度を上げる（質を下げてはいけない）
• 新規ページの追加頻度を上げる（質を下げてはいけない）
• 被リンクのアンカーテキストにキーワードを含める
• リンク元ページとの関連性を考慮する

注意

• 有料リンクは使わない
• 新規ドメインはできるだけ利用しない
• Googleページランクは参考程度
• display:none;は悪用しなければ問題なし
• URLを統一させる
• ブログやCMSがSEOに優れているのではなくテンプレートがWEB標準に準拠しているから
• 同一コンテンツを複数のサイトで公開しない
• フルFLASHサイトは別途HTML版を作成したり、リンクがある場合はフッターにHTMLのリンクを設ける
• 類似コンテンツを作成しない
• 同じタイトルやmetaタグを多くのページで利用しない
• キーワードを使いすぎない
• リンクを販売しない

SEOに便利なツール

• Google トレンド（キーワード調査に使える）
• Google adwords：キーワードアドバイスツール（キーワード調査に使える）
• Yahoo Site Explorer（Yahooの検索エンジンの順位等調査）
• DoctorSEO（SEOに関する調査ツールいっぱい）
• XML Sitemaps.com（XMLサイトマップ作成サイト）
• Google Web マスターツール（サイトマップ登録・検索エンジンについて等）
• SEO TOOLS β（基本的な検索エンジンデータをまとめて表示し、評価してくれる）

参考サイト：web担当者フォーラム



何よりユーザーの求める、ためになるすばらしいコンテンツを作ることが最大のSEOなのだと思います。

以下がButtonタグに適用できるスタイルの例

Button {
    /* コーナー（角丸0～28指定） */
    cornerRadius: 0;

    /* インデント（0～） */
    textIndent: 0;

    /* パディング（+-0～） */
    padding-top:10;
    padding-right:10;
    padding-bottom:10;
    padding-left:10;

    /* 文字間隔（+-0～） */
    letterSpacing: 10;

    /* 光沢度（0～1） */
    highlightAlphas: 0, 1;

    /* 表面色透明度（0～1） */
    fillAlphas: 0, 0, 0, 0;

    /* 表面色（標準上色,標準下色,ロールオーバー上色,ロールオーバー下色） */
    fillColors: #561010, #cc3300, #00cc66, #000000;

    /* 文字色（色） */
    color: #993300;

    /* ロールオーバー文字色 */
    textRollOverColor: #cc6600;

    /* マウスダウンテキストカラー */
    textSelectedColor: #66ccff;

    /* 枠線色 */
    borderColor: #330099;

    /* マウスオーバーやマウスダウン時にボタンの境界等の色指定 */
    themeColor: #ffffff;

    /* フォント種類 */
    fontFamily: Tahoma;

    /* 文字サイズ */
    fontSize: 24;

    /* 文字の太さ（nomal,bold） */
    fontWeight: bold;

    /* 斜体文字（none,italic） */
    fontStyle: italic;

    /* 文字下線（none,underline） */
    textDecoration: underline;
}

ご指摘等あれば、こちらによろしくお願いいたします。
http://d-remix.net/contact.html

以下がApplicationタグに適用できる属性の例

Application {
    /* 背景画像の指定（swfの指定も可能） */
    backgroundImage:url("bg.gif");
    backgroundImage: Embed(source="bg.swf");

    /* 背景色 */
    backgroundColor: #cccccc;

    /* 背景グラデーションカラー（黒から白へのグラデーション） */
    backgroundGradientColors: #000000, #ffffff;

    /* 背景グラデーションアルファ（数値は0.0～1.0間で指定し0は透明、1は非透明になります） */
    backgroundGradientAlphas: 1, 0;

    /* マウスオーバーやマウスダウン時にボタンの境界等の色指定 */
    themeColor: #ffffff;

    /* 全体の文字色 */
    color:#000000;
}

メモとして残しておきます。

Flexのスタイルはhtmlと同様3種類の記述方法があります。

• タグへの直接記述
• ファイル内headに記述
• 外部ファイルとして記述し読み込み

どれを使うかは状況によって変化しますが、ファイル内か、外部ファイルとして記述する場合は以下のタグを使います。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<!-- 読み込み型 -->
	<mx:Style source="style.css" />
	<!-- ファイル内記述型 -->
	<mx:Style>
		Application {
			background-gradient-alphas:1.0,1.0;
			background-gradient-colors:#000000, #333333;
		}
	</mx:Style>
</mx:Application>

このように基本的にはhtmlのCSSと変わりません。
HTMLとCSS・Javascriptの経験者であれば、比較的容易に構造を理解できるようになれると思います。