[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
サイト規模に合わせて作り方を選ぶ 前回（http://www.thinkit.co.jp/article/143/1/）は、携帯サイトとPCサイトがどのように違うかを紹介しました。今回は、汎用的な携帯サイト作りを行うための制作の基本から、実機テストまで含めた公開までの手順を解説します。 携帯サイトでは、キャリアによる仕様の違いがあるため、これをどの程度まで考慮するか、はじめに考えなくてはなりません。携帯サイトの作成法には、下記の5つの方法がありますが、ここでは「3キャリア対応の静的サイト+プログラム」について紹介します。 1.キャリア別に静的なサイト 2.3キャリア対応の静的サイト+プログラム 3.プログラムによる動的生成 4.CMSを使ったジェネレータ型 5.MobaSiF（http://sourceforge.jp/projects/moba）などのフレームワーク型 3キャリア対応の静
サイト製作者がノウハウを共有できる『Applied Stacks』 | 100SHIKI
サイト製作者がノウハウを共有できる『Applied Stacks』 January 26th, 2009 Posted in 未分類 Write comment あのサイトってどんな技術で作られているのだろう？と思うときはよくある。 ある程度は調べればわかるが、やっぱりそれでも限界はある。 そこで登場したのがApplied Stacksだ。このサイトでは「サイト作ったらどうやって作ったかをみんなで共有しようぜ！」という呼びかけをしている。 サイト自体はWikiの集合体で、サイト製作者は1サイトごとに1ページ持ち、どんな技術を使ったかを書き込んでいくことができる。 こうして共有されたデータを検索することももちろんできるので、「あの技術で作られたサイトは・・・」といった探し物をすることができる。タグクラウドもあるので人気の技術なんかも一目瞭然だ。 サイト製作者がノウハウを共有する、という試みは
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
Perlを使って脆弱性を検証する：CodeZine
はじめに 今回はXSSの脆弱性をチェックするPerlスクリプトを作成したいと思います。すべてのXSSによる脆弱性が回避できるわけではありませんが、テストコード作成のヒントになれば幸いです。 対象読者 Webアプリケーション開発者で、XSSのテストケースを作成したい方。 必要な環境 Perl 5.8以上が動作する環境。基本動作の確認はMac OS Xを利用しました。次のPerlモジュールを利用するので、あらかじめインストールしておいてください。 Template::Toolkit Web::Scraper Test::Base またCGIを使用するので、ApacheなどのCGIが実行できるWebサーバを用意してください。 解説内容 ソースコード解説 まず最初にソースコードの解説をします。 xss.pl
CodeZine：携帯シミュレータ入門（開発ツール, まとめ）
はじめに 携帯サイトは、PCのWebブラウザではテストできません。携帯のWebブラウザにはさまざまな機種依存仕様があるからです。マークアップ言語の違い（HTML/HDML）絵文字表示可能な画像形式（gif/png/jpg、カラー/モノクロ、色数、サイズ）受信サイズアクセスキー これらは携帯の実機でテストする必要がありますが、開発中に携帯の実機でテストをするのは大変です。実機ではソースを見ることもできませんし、経費もかかります。 そこで携帯シミュレータの出番です。すべての機種依存仕様を正確にシミュレートできるわけではありませんが、上記のうち、1. 、2. 、5. をテストすることができます。本稿では、携帯サイトの開発に必須となる携帯シミュレータの紹介と、使用上のポイントを説明します。対象読者 携帯向けWebサイトの開発者必要な環境 Windows 2000/XP携帯シミュレータ一覧 携帯シ
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
CSSデザイン格付けサイトいろいろ - GIGAZINE
CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ
Favicon（お気に入りアイコン）が簡単に作成できるWebツール :: Love & Design ::
Faviconとは、Favorite Icon の略でブラウザのブックマークや、サイトを開いた時のアドレスバーやタブに表示される 16×16 の小さなアイコンのことです。 （faviconに対応していないブラウザもあります） Faviconを設置するメリットは、個性をPRしたり目立つということでしょうか。 今回は、Faviconが簡単に作成できるサイトをご紹介します。 Favicon Japan!! -16×16の小宇宙ファビコン- お手持ちの画像からfavicon.icoを自動作成してくれます。 当ブログのキスマークFaviconもこちらのサイトで作成しました。 Favicon Japan!! -ファビコンの設置方法- Favicon Genereator こちらのサイトは、お好きな色を選んでテキストが入れられます。 さっそくこちらでも作ってみました。 +LOVE2.0+ はてなダイアリ
WEBデザインの際に参考になる50サイト:phpspot開発日誌
My 50 favorite design resources There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. WEBデザインの際に参考になる５０サイトの特集。WEBデザイナーの方にはありがたいリソースですね。 クールCSSサイトのまとめサイト Unmatchedstyle cssBeauty cssvault Stylegala CSS Drive css thesis Styleboost CSSElite CSS Import Web Cr
HTTP/1.1: Header Field Definitions
part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 14 Header Field Definitions This section defines the syntax and semantics of all standard HTTP/1.1 header fields. For entity-header fields, both sender and recipient refer to either the client or the server, depending on who sends and who receives the entity. 14.1 Accept The Accept request-header field can be used to specify
MRTGよりお手軽に負荷やトラフィックをグラフ化できる「Munin」 - GIGAZINE
Perlで書かれており、RRD Toolと連携して、サーバに関するあらゆる情報をグラフ化し、HTMLを作ってくれます。MRTGよりも圧倒的にインストールも設定も簡単。グラフ化する対象はプラグインで簡単に拡張可能。 グラフ化できるのは、初期状態でディスク使用量・MySQL・IOstat・トラフィック・プロセス数・VMstat・CPU温度・CPU使用率・ロードアベレージ・メモリ使用率・スワップ・Netstat・HDD温度など。プラグインを追加することでさらにApacheのロードタイム・メールキュー・Asterisk・NFSクライアント・BIND・ColdFusion・DNSキャッシュ・MySQLの各種数値・PostgreSQL・印刷キュー・ProFTP・Qmail・電圧・S.M.A.R.T.・SpamAssassin・Tomcat・Tor・Windows Server・VMware・Xenなど
free dingbat fonts | DingbatDepot.com
Come on in and get yourself some free Dingbat fonts. These typefaces are just like any other regular fonts, in so far as they come in a TTF font format. You download and install them on your computer just like any other regular font. However, instead of outputting basic text like a "normal" font, dingbat fonts will output and display "dingbat" characters in your design. Choose from any of the ding
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いろいろなサイトのフォームのログインを集めた -Login Forms Design Showcase
ウェブの画面設計に使えるまとめ - DesignWalker
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
*{ margin : 0 } はもう古い!? | Emotional Web
Japan.internet.com デベロッパー - Google Web Toolkit：現実的な開発に即したAJAX
簡単に2.0っぽいロゴがつくれるメーカー | IDEA*IDEA