スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1（iPhone3～3GS、低解像度Android端末）とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
MT5で中・大規模サイト開発するためのシステム設計図 | ユージック
MT5で中・大規模サイト開発するためのシステム設計図 2010年2月4日 MT5の機能をフルに活用して100ページ以上、4階層以上のサイト構築の際のシステム設計図をまとめてみました。 要件定義 100ページ以上 サイト構造は4階層まである 各階層にインデックスページを用意する インデックスページも含めて出来る範囲クライアントが編集できるようにする カテゴリーやフォルダ、ページを後からでも追加できるようにする PCサイトと連動したモバイルサイトも自動構築で作成する 「サイト」だけで構築する際のハードルが高い MT5からは大元である「サイト」を作ってから「サイト」と連動した「ブログ」を作るという手順になります。 「サイト」だけでもMTIｆのような分岐をたくみに使うことで4階層まで対応したサイト設計は可能になりますが、多々問題点が発生してしまいます。 問題点 テンプレートの設計が複雑になってしま
オープンソースのCMSを納品する際の注意点 | ユージック
オープンソースのCMSを納品する際の注意点 2009年8月2日 オープンソースのCMSは開発費用を抑えれることで多くのWEB制作会社が利用していると思いますが、MTなどでは月に1度くらいの頻度でクロスサイトスクリプティングの脆弱性が発見されている。 最近ではEC-CUBEのクロスサイトスクリプティングの脆弱性も発見され、悪用されるとユーザーのウェブブラウザ上で任意のスクリプトを実行されてしまう。そうなると偽ページの表示や、偽情報の流布による混乱、フィッシング詐欺による情報の漏えいなどが起きる可能性がある 「EC-CUBE」の利用サイトは迅速なバージョンアップを：読売新聞 WordPress 2.8.4未満を使用している場合は要アップデート 納品後のアップデートを行う取り決め 保守契約を結んでCMSを納品しているケースであれば、このような問題が発生した際にアップデートを行うことは当然であるが
MTOSでポータルサイトを作ってみた | ユージック
MTOSでポータルサイトを作ってみた 2009年7月30日 MTOSを利用して検索テンプレート周りとカスタムフィールドのようなプラグイン形式のフィールドを増やす機能を実装してポータルサイトを作ってみました。 この手のサイトで実際に口コミ投稿してもらうにはプレゼントもしくは報酬的なものを用意しないと難しいと思いますが、初期段階のご愛嬌ということでいくつか自作投稿を演じています。 MTOSのカスタマイズのポイント メインコンテンツはエントリーページテンプレートを利用 サブコンテンツはウェブページテンプレートを利用 データベースのフィールドはプラグインで実装 口コミ投稿はMTのコメント投稿機能で実装 検索機能はSearchEntriesプラグインで実装 メニュー周りは特定のカテゴリの一覧表示を利用して実装 ランキングは並び変えプラグインとカウントモディフィアで実装 今回はマルチブログをやっていた
WEBレイアウトにおける余白の効果 | ユージック
WEBレイアウトにおける余白の効果 2009年6月2日 Google Japan Blogの記事を見て余白の使い方による効果についての記事です。 WEBレイアウトにおいての余白をうまく使うことで、視覚的にユーザーにアピールできることが色々あるのだなと勉強になったので、ご紹介いたします。 以下のGoogle が行う様々な実験より引用します。 下の2枚の画像の違いは上下のマージンの違いがあります。 なぜこのような違いをつけたかというと「上記のほうがよりよい結果(良い情報)だ」とユーザーが直感的に感じる実験結果によるものだ。 このように余白のみで情報のアピール度合いの強弱をつけるやり方は商用のWEBサイトでも十分取り入れる価値はあると思う。 紙媒体のデザインを経験しているデザイナーであれば余白や行間をシビアに調整するというのは当たり前のことなのかもしれないが、専門的なデザインをあまり学んでいない
サマーソニック 2009 | ユージック
サマーソニック 2009 2009年3月12日 夏の都市型音楽野外FESの代表格サマソニことサマーソニック 2009 の出演アーティスト第1弾・第2弾が発表されました！！ サマーソニック 2009の出演アーティストの自分のための予習としてまとめています。youtubeで動画を見たり、『試聴する』をクリックすると新しいウィンドウでMyspaceが開き、アーティストのその他の最新の曲を試聴できます。youtube横ではAmazonへのアーティストCDの購入リンクをつけています。 今年はサマソニ09に行くぞ！という人はぜひ参考にしてくだい。出演アーティストは第1弾発表時のと第2弾発表時の最新の情報です。(2009/03/12現在) サマーソニック2009出演アーティスト01へ サマーソニック2009出演アーティスト02へ
イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリ s3Slider | ユージック
イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリ s3Slider 2008年12月1日 イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリであるs3Sliderが便利そうなのでご紹介しようと思います。 spanで記述した文章を上・下・左・右に配置することができるので、ページのメインイメージなどにＦＬＡＳＨののような動きのあるビジュアルイメージをＨＴＭＬコードだけで配置できます。また、s3SliderはjQueryのプラグインなのでjQueryを主に使用している方には便利だと思います。 コードは非常にシンプルで下記のような感じです。 header <script src="js/jquery.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javasc
チラシのデザイン – WEBチラシ | ユージック
チラシのデザイン – WEBチラシ 2008年10月27日 チラシのデザインの作成を印刷会社ではなく個人に発注すると非常にコストを抑えることができます。最近ではWEB上でチラシをアップロードするのが流行っているようです。 最近はYahooを始めてとしてチラシを閲覧できるサービスを提供するサイトが結構たくさんあります。 地元の店舗のお得な情報を掲載したチラシ閲覧したいという一般ユーザーや新聞はとりたくないけどチラシは見たい！っというユーザーが多いようですね。 Yahoo!チラシ情報 スーパー特売チラシとレシピ検索・節約レシピの「毎日特売」 広告チラシをwebで検索！広告チラシ(ちらし)のタウンマーケット インターネットチラシサイト オリコミーオ！ Shufoo!くらしとちらし サークルライフ – 大学サークル検索サイト
AJAX Libraries API | ユージック
AJAX Libraries API 2008年6月4日 GoogleのAJAXライブラリを簡単に利用するAPIであるAJAX Libraries APIが公開されましたのでご紹介します。 概要 jQuery prototype script.aculo.us MooTools dojo 上記のような主要ライブラリを利用する際に、Googleのサーバーからフルパスでライブラリを読み込むことができます。バージョンの管理もできるので保守性がアップします。また、AJAX Libraries APIの利用者が多いとキャッシュ効果が上がるので読み込み速度が速くなり、ユーザーにとっては便利です。 使い方 使い方はいたって簡単で、Googleからフルパスでスクリプトを読み込んで、ライブラリの種類やバージョンを以下のように指定します。1.01や1.02など細かいバージョンがある場合、1と記述すれば1.0～
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
かわいいタータンチェックのパターン素材集 | ユージック