TheMDMD
http://meganedev.jugem.jp/
xhtmlcssjavascriptphpsmartyhtml5actionscript
ja
-
http://meganedev.jugem.jp/?eid=30
プロエンかグレデグかポリフィルか
http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html
PROGRESSIVE ENHANCEMENT(プログレッシブ エンハンスメント)
新しいブラウザにはよりよい機能やクールなデザインを提供するよ(基準は古いブラウザ)
Graceful Degradation...
http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html
PROGRESSIVE ENHANCEMENT(プログレッシブ エンハンスメント)
新しいブラウザにはよりよい機能やクールなデザインを提供するよ(基準は古いブラウザ)
Graceful Degradation(グレイスフル デグラデーション)
古いブラウザは機能制限やダサいデザインで我慢してもらうよ(基準は新しいブラウザ)
Polyfill(ポリフィル)
古いブラウザでも新しいブラウザと遜色ないようにがんばる(基準は新しいブラウザ)
ポリフィル、めんどいな。
古いブラウザのユーザー数にもよるし、受託案件だとクライアントの意向もあるんだろうけどさ。
現状だと、プロエンかグレデグを選択するんだろうけど、
気持ち的にも語感的にもグレデグを選択したいものですね。
しかし、この記事よくまとまってるな。
]]>
HTML5 + CSS3
2011-08-18T18:18:36+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=29
UXについてまとめ
■UXの定義
http://www.atmarkit.co.jp/aig/04biz/userexperience.html
同博士が共同設立者でもあるコンサルティング会社のニールセン・ノーマン・グループでは、
「エンドユーザーと、会社およびそのサービス、製品との相互作用のあらゆる面を含んでいる。
典型的な...
http://www.atmarkit.co.jp/aig/04biz/userexperience.html
同博士が共同設立者でもあるコンサルティング会社のニールセン・ノーマン・グループでは、
「エンドユーザーと、会社およびそのサービス、製品との相互作用のあらゆる面を含んでいる。
典型的なユーザーエクスペリエンスの第一要件は、つまらぬいらいらや面倒なしに、顧客のニーズを正確に満たすことであり、
次に所有する喜び、使用する喜びとなる製品を生産するといった簡単、簡潔なことである」と定義している。
-------------------------------------------------------------------------------
■User Experience(UX)とは?
http://blogs.msdn.com/b/norokoro/archive/2009/01/05/user-experience-ux.aspx
■UXを改善するってどういうこと?
http://blogs.msdn.com/b/norokoro/archive/2009/05/20/ux.aspx
■UX って見かけだけのもの? /マイクロソフト大野 元久さんのコラム
http://www.microsoft.com/japan/powerpro/TF/column/mo_05_1.mspx
「UX はあくまでも“手段”であるということです。すぐれた UX を実装すること自体が目的であってはなりません。企業には、たとえば「売上げを向上させたい」「運営経費を削減したい」「社員の生産性を高めたい」といった、さまざまな要求があります。これらの課題を解決するために「商品ラインナップを拡充する」「仮想化を使って物理的なサーバー台数を減らす」「高速な PC を導入する」といった対策を考えることができます。そして、そうした対策と同じように「UX の改善」を捉えることができます。
たとえば、売り上げが伸び悩んでいるショッピングサイトがあるとします。バナー広告を出して訪問者を増やしたり、商品ラインナップを拡充したり、セールを実施して販売価格を一時的に下げるといった対策が考えられますが、それと同じようにショッピングサイト自身の UX を改善するという選択肢が考えられます。運用経費を削減したいと言う場合、社内システムのトレーニングコストや使い勝手を改善することで、社員一人一人の負荷を減らすよう UX を改善することが考えられます。これは、まさに「節約のための投資」と言えるでしょう。」
------------------------------------------------------------------------
■リンク
http://www.microsoft.com/japan/powerpro/projectux/default.mspx
http://www.atmarkit.co.jp/fdotnet/chushin/uxresearch_01/uxresearch_01_01.html
http://www.google.com/corporate/ux.html
http://www.yasuhisa.com/could/article/google-ux-process/
http://b.hatena.ne.jp/t/UX
・成果物としてのUXとは(長谷川恭久さんのスライド)
http://www.slideshare.net/yhassy/ux-4795996
------------------------------------------------------------------------
▼まとめ
■UXとは
ユーザーの本質的な目的を見極めて、その目的を達成するためにより良いものを設計、開発すること
ユーザーの目的に対する答えを的確に提示し、そこに楽しさや気持よさをプラスする
・ユーザーの目的に対する答えが提示できている
・その答えを高速に示すことができている
・その答えをわかりやすく示すことができている
・それはすべてのユーザーが理解できる明確な答えである
・そのうえで、ユーザーに楽しさや心地良さの付加価値を提示できている
]]>
2011-01-11T18:57:54+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=28
Illustrator CS3で複数ページのPDF作成方法
昔とやり方変わっていたのね。
1.ファイル/プリントを選択し、用紙サイズを PDF ページのサイズに設定します。
2.プリントダイアログボックスの左側にある「セットアップ」を選択します。 次のオプションを設定して、「完了」ボタンをクリックします。
・「トリミ...
1.ファイル/プリントを選択し、用紙サイズを PDF ページのサイズに設定します。
2.プリントダイアログボックスの左側にある「セットアップ」 を選択します。 次のオプションを設定して、「完了」ボタンをクリックします。
・「トリミング」で「アートボード」 を選択します。
・「タイル」で「用紙サイズで区分ける」 または「プリント可能範囲で区分ける」を選択します。
3.すべてのページが表示できるようにアートボードを設定して、「表示」→「ページ分割を表示」 を選択します (ページ分割についてを参照してください)。
4.各ページのアートワークがアートボードのページ分割境界内に収まるようにレイアウトします。
5.ファイルを Adobe PDF 形式で保存します。
6.Adobe PDF を保存ダイアログボックスで、「タイリングページから複数ページのPDFを作成」 を選択します。
7.その他の PDF オプションを設定して「PDF を保存」ボタンをクリックします。
]]>
Design
2010-09-10T01:04:11+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=27
モバイルサイト制作メモ2010
モバイルのデザイン、コーディング、SEO、Flashなどまとめ。
(参考にした本が2008年発刊のものなので情報がちょっと古いかも…)
(参考にした本が2008年発刊のものなので情報がちょっと古いかも…)続きを読む >>
]]>
Mobile
2010-07-27T18:31:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=26
新規作成とリニューアルの進め方フォーマット
自分用メモ。
続きを読む >>
]]>
memo
2010-07-16T18:56:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=25
いろいろなライブラリと組み合わせて使えるLightbox「shadowbox」
画像だけでなく、swfやflvなどもいける。
ブラウザのサイズに合わせて、画像を自動リサイズしてくれるので、
大きな画像でも大丈夫。
設置も簡単で便利な「shadowbox」
・ダウンロード
http://www.shadowbox-js.com/download.html
・オプションの設定の仕方が...
ブラウザのサイズに合わせて、画像を自動リサイズしてくれるので、
大きな画像でも大丈夫。
設置も簡単で便利な「shadowbox 」
・ダウンロード
http://www.shadowbox-js.com/download.html
・オプションの設定の仕方がよくわからない
http://www.shadowbox-js.com/options.html
・jQuery版の設置方法
http://www.two-hearts.net/2009/05/shadowboxjs-version-30b.html
・PrototypJS版の設置方法
http://coliss.com/articles/build-websites/operation/javascript/772.html
]]>
Javascript
2010-06-11T17:55:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=24
Flash Lite まとめ
■対応端末のまとめ
・docomo
http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/
・au
http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
・softbank
http://creation.mb.softbank.jp/terminal/?lup=y&cat=service
■バー...
・docomo
http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/
・au
http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
・softbank
http://creation.mb.softbank.jp/terminal/?lup=y&cat=service
■バージョン
Flash Lite 1.1 … 現在稼働中のほぼ全てで使える(AS1.0相当)
Flash Lite 2.0 … 2010年6月時点でもこれが主流っぽい
Flash Lite 3.0 … ほぼdocomoの機種のみ(softbankの一部)
Flash Lite 4.0 … softbankのDesireが搭載(ターゲットはスマホ、とiPhoneだったのかな)
・Adobeの全バージョン機能比較
http://www.adobe.com/jp/products/flashlite/version/
■まとめ
・今さら聞けない!Flash Liteの基礎知識
http://allabout.co.jp/gs/flash/closeup/CU20090201A/
]]>
Mobile
2010-06-11T10:53:04+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=23
CSS3だけでつくるすてきボタン
http://coliss.com/articles/build-websites/operation/css/css-tutorial-css3-gradient-buttons.html
demo
http://www.webdesignerwall.com/demo/css-buttons.html
http://coliss.com/articles/build-websites/operation/css/css-tutorial-css3-gradient-buttons.html
demo
http://www.webdesignerwall.com/demo/css-buttons.html
]]>
HTML5 + CSS3
2010-05-13T18:22:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=22
iPhoneで使えるJavascriptライブラリまとめ
iPhoneで使えるjQueryプラグイン「jQTouch」
http://www.moongift.jp/2009/03/jqtouch/
iPhoneで使えるjQueryプラグイン「jQTouch」
http://www.moongift.jp/2009/03/jqtouch/
]]>
Javascript
2010-04-23T17:31:20+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=21
iPhone、iPad、AndroidのGUIパーツのPSD
アプリの資料やUI考えるときなどに便利。
■iPhone用
http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
■iPad用
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
■Android用
http://www.smashingmagazine.com/2009/08/18/android-gui-ps...
■iPhone用
http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
■iPad用
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
■Android用
http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/
]]>
iPhone
2010-04-16T10:55:21+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=20
HTML5の作成に便利なサイト
■HTML5のバリデーション
http://validator.nu/
■HTML5リファレンス
http://adactio.com/extras/pocketbooks/html5/
■HTML5,CSS3、APIも含めたブラウザの対応表のリファレンス
http://a.deveria.com/caniuse/
http://validator.nu/
■HTML5リファレンス
http://adactio.com/extras/pocketbooks/html5/
■HTML5,CSS3、APIも含めたブラウザの対応表のリファレンス
http://a.deveria.com/caniuse/
]]>
HTML5 + CSS3
2010-04-11T23:53:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=19
PDFについてまとめ
QuarkXpressのファイルをPDFに変換できるけど、
使用しているフォントが入ってないとPDFで文字化けするのをどうにかできないものか。
PDF/Xについて
http://www.i-printing.co.jp/printinfo/pdfx.html
PDF・EPS書き出しとプリフライトチェック
PDF/X-1a・X-3の...
使用しているフォントが入ってないとPDFで文字化けするのをどうにかできないものか。
PDF/Xについて
http://www.i-printing.co.jp/printinfo/pdfx.html
PDF・EPS書き出しとプリフライトチェック
PDF/X-1a・X-3のサポート、EPS書き出し強化、出力スタイルなど出力機能もより充実しました。加えて、ジョブジャケットによる制作ルールの設定およびプリフライトチェックが可能になりました。
http://8.quark.com/jp/rock_solid_output.html
出力時(印刷/PDF/EPS)のフォントダウンロードについて
フォントの埋め込み(エンベット)方法
http://japan.quark.com/service/desktop/support/db8/8053.html
http://q.hatena.ne.jp/1135571071
]]>
eBook
2010-04-09T19:39:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=18
UNIXタイムスタンプ計算方法
UNIXタイムスタンプ生成ツール
http://www.gainet.biz/tools/timestamp.php
ターミナルでも表示できるっぽい。
http://www.gainet.biz/tools/timestamp.php
ターミナルでも表示できるっぽい。
]]>
Tools
2010-04-01T20:39:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=17
クロスブラウザ対応のCSS3のエフェクトまとめ
The Cross-Browser CSS3 Rule Generator
http://css3please.com/
http://css3please.com/
]]>
HTML5 + CSS3
2010-03-31T12:55:04+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=16
Analyticsで外部リンクをトラッキングする方法
▼外部へのリンクのクリックをトラッキングするにはどうすればよいですか。- Analytics ヘルプ
http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=55527
たとえば、www.example.com へのリンクのクリックが「/outgoing/example_com」のページ...
http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=55527
たとえば、www.example.com へのリンクのクリックが「/outgoing/example_com」のページビューとして記録されるようにするには、リンクの <a> タグに下記の属性を追加します。
<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview('/outgoing/example_com');">
この例のように、論理的で分類しやすいディレクトリ構造で外部へのリンク URLを設定することをお勧めします。 こうすることで、ユーザーがどのページのリンクをクリックして外部に移動したかを簡単に特定できます。
]]>
Google
2010-03-30T01:05:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=15
iPhone最適化まとめ
Apple公式の情報
■iPhone Simulatorプログラミングガイド
https://developer.apple.com/jp/iphone/library/featuredarticles/iphone_simulator/Introduction/Introduction.html
PCで確認する方法
■iPhoneシミュレーターで確認
http://mac-homepage.livedoor....
Apple公式の情報
■iPhone Simulatorプログラミングガイド
https://developer.apple.com/jp/iphone/library/featuredarticles/iphone_simulator/Introduction/Introduction.html
PCで確認する方法
■iPhoneシミュレーターで確認
http://mac-homepage.livedoor.biz/archives/693850.html
■safariでUAをiPhoneに偽装して確認
safariのメニュー > ファイル > 環境設定 > 詳細タグ > 開発メニューを表示にチェック
最適化ライブラリ
■iUI
http://remix-remix.sakura.ne.jp/iPhone/page1.html#_home
http://searchblog.yahoo.co.jp/2008/06/yahoo_iphone.html
http://d.hatena.ne.jp/replication/20100204/1265245810
■UiUIkit
▼説明
http://mac-homepage.livedoor.biz/archives/948561.html
▼ダウンロード
http://code.google.com/p/iphone-universal/
]]>
iPhone
2010-03-15T18:42:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=14
HTML5+CSS3でできること
■【特集】HTML5について
http://coolcoding.com/2010/01/html5/
■HTML5, きちんと。(HTML5の概要スライド)
http://www.slideshare.net/myakura/html5-2480964
■ネイティブなドラッグ&ドロップ
http://www.html5.jp/html5doctor/native-drag-and-drop.html
...
http://coolcoding.com/2010/01/html5/
■HTML5, きちんと。(HTML5の概要スライド)
http://www.slideshare.net/myakura/html5-2480964
■ネイティブなドラッグ&ドロップ
http://www.html5.jp/html5doctor/native-drag-and-drop.html
■HTML5入門:アニメーションの実装方法3種
http://satoshi.blogs.com/life/2009/10/html5-animation.html
■HTML5 gallery (HTML5をつかったサイトの紹介)
http://html5gallery.com/
■HTML5サンプル集 - 株式会社あゆた
http://ayuta.co.jp/html5-samples/index.html
■CSS3だけで作るドロップダウンメニュー
#nav li:hover > ul {} みたいに書くと階層になるようだ。
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
■CSS3のtransformの実装サンプル
http://kachibito.net/web-design/css3-transform-sample.html
]]>
HTML5 + CSS3
2010-03-15T12:33:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=13
prototype.js まとめ
NASA のサイトでも使用されている、prototype.js のまとめ。
■リファレンス
http://www.s2factory.co.jp/tech/prototype/prototype.js.html
■サンプルコード
・prototype 63サンプル: skuare.net
http://www.skuare.net/test/prototype.html
・コンテキスト...
■リファレンス
http://www.s2factory.co.jp/tech/prototype/prototype.js.html
■サンプルコード
・prototype 63サンプル: skuare.net
http://www.skuare.net/test/prototype.html
・コンテキストメニューを作成
http://www.skuare.net/test/protoMenu.html
・prototypeベースでグラフを作成する「Plotr」
http://www.skuare.net/test/plotr.html
・改行してると自動でフォームが大きくなる ※入れてみたけどなぜか動かない
http://www.skuare.net/test/proResize.html
・コンテンツをスライドさせる
http://www.skuare.net/test/proGlider.html
prototype.jsでフォーム内の文字数をカウントする
http://d.hatena.ne.jp/purazumakoi/20090703/1246536230
]]>
Javascript
2010-03-12T11:17:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=12
photoshopで光線を描く方法
http://www.fmod.jp/sfx/sfx20/sfx20.html
http://www.fmod.jp/sfx/sfx20/sfx20.html
]]>
Photoshop
2010-02-23T14:37:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=11
画像のトリミング
prototypeJSのデモ。
キーで微調整。shift押しながらリサイズで正方形に。
http://www.defusion.org.uk/demos/060519/cropper.php?demoType=basic&image=castle&formSubmit=Load+demo
キーで微調整。shift押しながらリサイズで正方形に。
http://www.defusion.org.uk/demos/060519/cropper.php?demoType=basic&image=castle&formSubmit=Load+demo
]]>
Javascript
2010-02-22T18:38:36+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=9
Snog Pure Frozen Yogurt
フローズンヨーグルトショップのサイト。
http://www.ifancyasnog.com/
フローズンヨーグルトショップのサイト。
http://www.ifancyasnog.com/
]]>
Design
2010-02-21T00:07:45+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=7
アンカーにゆっくりスクロール
▼説明
http://ascii.jp/elem/000/000/182/182839/
▼JSファイル
http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/
http://ascii.jp/elem/000/000/182/182839/
▼JSファイル
http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/
]]>
Javascript
2010-02-03T15:50:40+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=6
URLを入力して一発PDF変換
imgタグのwidthとかまでは見てくれないみたい。大きな画像はそのまま表示される。
http://html-pdf-convert.com/
http://html-pdf-convert.com/
]]>
WebService
2010-01-29T17:57:38+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=5
MP3プレイヤーのスクリプト
テキストの横にMP3プレイヤーをつけられる。
wordpress用のプラグインもあり。
▼ダウンロード
http://1bit.markwheeler.net/
▼紹介サイト
http://coliss.com/articles/build-websites/operation/javascript/js-1bit-audio-player.html
wordpress用のプラグインもあり。
▼ダウンロード
http://1bit.markwheeler.net/
▼紹介サイト
http://coliss.com/articles/build-websites/operation/javascript/js-1bit-audio-player.html
]]>
Javascript
2010-01-29T10:27:28+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=4
IE8のレンダリングモードとサイト毎の互換表示
http://homepage3.nifty.com/Tatsu_syo/Devroom/IE8CompatMode.html
ホームページ公開サービスやブログサービスではサービス提供元のドメインを使うことが多くなりますが、この場合サービス提供元のページがIE 8で不具合があるために互換表示が必要なサイトとして設定...
http://homepage3.nifty.com/Tatsu_syo/Devroom/IE8CompatMode.html
ホームページ公開サービスやブログサービスではサービス提供元のドメインを使うことが多くなりますが、この場合サービス提供元のページがIE 8で不具合があるために互換表示が必要なサイトとして設定されたため、ドメインが同じになるユーザーのページまでユーザーが望まないにも関わらず互換表示設定になるため、ローカルとWebサイトで同じWebページの表示が異なるという現象が多く発生すると思われます。
【解決策】
head内に <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> をいれる。
【現象例】
ブログサービスのページと独自ドメインを当てたページの表示に違いが出ていた。
→ブログサービス側のページが互換表示が必要なサイトに指定されていたため。
]]>
HTML
2010-01-20T19:09:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=3
モバイルサイトの情報まとめ
▼携帯サイトをはじめて作る時にぜひ読んでおきたい11の記事
http://www.plusmb.jp/2009/12/01/4999.html
http://www.plusmb.jp/2009/12/01/4999.html
]]>
Mobile
2010-01-19T11:03:15+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=2
jQuery V1.4
▼ダウンロード
http://api.jquery.com/category/version/1.4/
▼ニューリリースされたjQuery 1.4のチェックしておきたいサイト
http://coliss.com/articles/build-websites/operation/javascript/jquery-14-release-info.html
http://api.jquery.com/category/version/1.4/
▼ニューリリースされたjQuery 1.4のチェックしておきたいサイト
http://coliss.com/articles/build-websites/operation/javascript/jquery-14-release-info.html
]]>
Javascript
2010-01-15T15:23:00+09:00
meganedev
JUGEM
meganedev
-
http://meganedev.jugem.jp/?eid=1
IE系のバグとかまとめ
IE6でよく遭遇するCSSのバグとその解決方法
http://coliss.com/articles/build-websites/operation/css/753.html
IEでborderが表示されない
→不具合のある要素に「position:relative;」を入れる
http://d.hatena.ne.jp/kusakari/20071101/1193883020
IE6でfloat...
http://coliss.com/articles/build-websites/operation/css/753.html
IEでborderが表示されない
→不具合のある要素に「position:relative; 」を入れる
http://d.hatena.ne.jp/kusakari/20071101/1193883020
IE6でfloatしたBOXの中の画像が真っ白になる
→BOXにwidth指定。それでもだめなら、position: relative;をいれる。
http://kangaroo.ni4.jp/2004/09/08/51/
]]>
CSS
2010-01-14T13:11:00+09:00
meganedev
JUGEM
meganedev