devicePixelRatioの値によってimgタグのファイル名を書き換えるjQueryスニペット | ユージック
devicePixelRatioの値によってimgタグのファイル名を書き換えるjQueryスニペット 2012年5月23日 CSSの背景画像はMedia Queryで分岐する事ができますが、HTMLに直接記述するimgタグでもdevicePixelRatioの値によって書き換わるjQueryスニペットです。 JS $(function(){ var dpr = window.devicePixelRatio; var onSrc = $('img').attr('src').replace('@', '@' + dpr); $('img').attr('src', onSrc); }); HTML <img src="sample@.jpg" /> sample@.jpgの@の部分がdevicePixelRatioが1なら「sample@1.jpg」2なら「sample@2.jpg」みたい
Facebookアプリの各種設定の覚書 | ユージック
Facebookアプリの各種設定の覚書 2012年4月18日 以前作ったカスタムタブのサンプルのFacebookアプリの設定をのぞいたら色々変わっていたのでブログにも覚書を投稿しておく。 基本データ アプリの表示名：ここはもちろんアプリの名前 アプリの名前空間：ここはキャンパスページのURL（http://apps.facebook.com/○○○○○）の○○○○○の部分 連絡先メールアドレス:ここはもちろんメールアドレス アプリのドメイン:ここは読み込むページのドメイン カテゴリー:カテゴリーを設定できるっぽい アプリをFacebookに結合する方法 ウェブサイト サイトURL:ここは読み込むページのサイトURL ※いれなくても良さげだがいれなかったらエラーがでたよ。 Facebook上のアプリ キャンバスURL:iframeで読み込ますファイルのディレクトリ ※ここのURLがキャンパス
jQueryでフォームのinputにfocusを実装するコード | ユージック
jQueryでフォームのinputにfocusを実装するコード 2011年8月15日 jQueryなしではWEB制作をするのが窮屈になってきた今日この頃です。 IE7.6など:focus擬似クラスが使えないブラウザ用にjQueryでフォームのinputにfocusを実装するコードを書いたので覚書として書いておきます。 JSで下記2行のコードを書いて $("input").focus( function () { $(this).addClass("focus"); } ); $("input").blur( function () { $(this).removeClass("focus"); } ); CSSで.focusを装飾します。 .focus { background:#EEE; }
Facebookページのスクロールバーを消す方法の改良版 | ユージック
Facebookページのスクロールバーを消す方法の改良版 2011年5月17日 ※jQueryのやり方ではなくFB.Canvas.setAutoResize();の方法がよりスマートです。 FB.Canvas.setAutoResize();が廃止となり、FB.Canvas.setAutoGrow();を使うようになったみたいです。 以前書いた記事Facebookページ作成についての覚書にてJavascriptSDKを使ってiframeのページの高さを調整してスクロールバーを消すやり方のページの方法をご紹介しましたが、コンテンツの内容が変わるたびに高さの設定をしないといけないので、ページの高さを自動で取得して代入するやり方を考えてみました。 FB.Canvas.setAutoGrow();を利用する方法 アプリ作成時にiFrameサイズの設定をAuto-resizeにチェックします。読み込
Facebookページ作成についての覚書 | ユージック
Facebookページ作成についての覚書 2011年5月13日 マイアプリでiframeを組み込むタイプのFacebookページ作成手順を覚書として書いてみます。 マイアプリの作成からFacebookページへの組み込みまで 既ににFacebookページ（旧名称：ファンページ）は持っていると想定して、アプリ登録して組み込むまでの手順は下記のページを参考にしました。 Facebookページのデザインカスタマイズをしてみた（iframeの方ね） iframeのスクロールバーを取る方法 iframeのスクロールバーを取る方法は当ブログのFacebookページのスクロールバーを消す方法の改良版を参考にしてください。 iframeに読み込ますページについて iframeで読み込ますページについて言及しているページが少なかったので、私が作成した際に思った事を記載します。 拡張子ですが、html、phpと
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
jQuery Mobileを利用したスマートフォンサイト作成手順 | ユージック
jQuery Mobileを利用したスマートフォンサイト作成手順 2010年11月6日 jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。 ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在 現在のバージョンなどは下記の本家サイトよりご確認ください。 jQuery Mobile jQuery Mobileを利用したページ作成概要 本家のデモ作成画面を和訳してくれている下記ページがわかりやすいです。 http://dev.screw-axis.com/doc/jquery_mobile/ 読み込みファイル <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://c
MT5で中・大規模サイト開発するためのシステム設計図 | ユージック
MT5で中・大規模サイト開発するためのシステム設計図 2010年2月4日 MT5の機能をフルに活用して100ページ以上、4階層以上のサイト構築の際のシステム設計図をまとめてみました。 要件定義 100ページ以上 サイト構造は4階層まである 各階層にインデックスページを用意する インデックスページも含めて出来る範囲クライアントが編集できるようにする カテゴリーやフォルダ、ページを後からでも追加できるようにする PCサイトと連動したモバイルサイトも自動構築で作成する 「サイト」だけで構築する際のハードルが高い MT5からは大元である「サイト」を作ってから「サイト」と連動した「ブログ」を作るという手順になります。 「サイト」だけでもMTIｆのような分岐をたくみに使うことで4階層まで対応したサイト設計は可能になりますが、多々問題点が発生してしまいます。 問題点 テンプレートの設計が複雑になってしま
XAMPPでMT5を開発する方法 | ユージック
XAMPPでMT5を開発する方法 2010年1月27日 MT5をローカルPCの環境で構築する手順を覚書として書いておこうと思います。 開発環境 Windows XP SP3 XAMPP for windows Version 1.7.2 ActivePearl 5.10.1 Build 1006 MTのバージョン MovavleType 5.01 XAMPPのインストール ダウンロードURL http://www.apachefriends.org/jp/xampp-windows.html#2671 手順はダウンロードしたexeファイルをインストールします。そしてhtdocsに開発サイトのフォルダを置きます。ローカル環境で開発を進めるためにはhttpd.confとhttpd-vhosts.confを編集する必要があります。編集する箇所は以下の2点です。 httpd.confの47行目付近
Google Analytics の使い方 2009最新版 | ユージック
Google Analytics の使い方 2009最新版 2009年10月16日 以前に書いた記事「Google Analytics の使い方」から早半年以上たっており、基本的な機能は変わっていないのですが、Google Analyticsも結構進化を遂げています。 そこで今のGoogle Analyticsの最新機能やちょっとした裏技をご紹介しようと思います。 目次 アドバンスセグメント ピボットテーブル アドバンス テーブルフィルタ機能 複数ドメインにまたがるサイトにトラッキングコードを入れる方法 外部へのリンクのトラッキング方法 参照元の検索エンジンを追加する方法 簡単にサイト内検索を設定する方法 検索結果順位を取得できるプロファイルの設定 マルチカスタム変数 変化のお知らせ機能 インテリジェント 携帯サイトの解析 Google Analytics関連おすすめ書 アドバンスセグメン
Firefox用のSEOツールバーが便利そう | ユージック
Firefox用のSEOツールバーが便利そう 2009年1月21日 Firefox用のSEOツールバーが便利そうなのでご紹介したいと思います。 SEO Toolbar 各種検索エンジンの順位をチェックできたりサイト内の情報もボタンひとつで確認できたりするのでかなり便利なんじゃないかなと思いまして機能的な部分の内容をリストアップしたいと思います。 1ボタンの主な機能 Googleのページランク ドメインへのリンク ページリンク 各種ディレクトリへのリンク サイトエイジ 月間ユニークビジター数 予想トラフィックのデータ Excelファイルへエクスポート機能 Competitionボタンの主な機能 Compete・Alexa・GoogleTrendなどの各種サイトへのリンク ホストのIPアドレス情報を確認できる機能 ユーザーエージェントを切り替える機能※ボットがどう読みに来てるかを調査するため
EXCELをHTMLのTABLEに変換するjQueryプラグイン | ユージック
EXCELをHTMLのTABLEに変換するjQueryプラグイン 2008年12月26日 All Aboutで連載もしているJavaScriptで有名な高橋登史朗氏が作ったEXCELをHTMLのテーブルに変換するjQueryプラグインjquery.csv2table.jsが便利そうなのでご紹介しようと思います。 想定される使用例 テーブルを使用する更新頻度の高い以下のケースに特に有効だと思う。 料金表 対応表(価格や品番など) スペック表(材質や機能など) CMSなどではテーブルをシステム化するのが難しい CMSなどでサイト構築しているとほとんどのページが動的なモジュールで更新可能なのに対してテーブルというのはプログラムによってなかなかシステム化できないというケースが多いと思います。 クライアントはEXCELを利用してデータをまとめているケースが多い 仕事を通じて感じるのは商品の料金表やス
オープンソースのライセンスは商用利用できるのか？ : WEBデザイン&AJAX
オープンソースのライセンスは商用利用できるのか？ 2006年8月1日 このブログでもオープンソースのAJAXライブラリをいくつか使用していますが、著作権だとかライセンスのことに関してまったくわかってない状態で使用していました。 実際、仕事で使うときになってから商用利用ができるのか、できないのかの知識が必要になって調べていました。 そこで実務で使うかもしれない主要なAJAXライブラリであるprototype.jsやMoo.fx、script.aculo.us、dojoなどのライセンス形態を調べると共に、オープンソースにありがちなライセンスの種類を調べてみました。 商用利用が可能なライセンス GPLライセンス：Linax BSDライセンス：Spry MITライセンス：Script.aculo.us、Moo.fx、Prototype Academic Free License：Dojo GPLは
WEBディレクションで使うＩＡツール | ユージック
WEBディレクションで使うＩＡツール 2007年10月15日 WEBディレクションで使うマーケティング戦略や情報整理でのフェーズにあたるＩＡ(インフォメーションアーキテクツ)で僕が使うツールをご紹介します。 WEB制作でのマーケティング戦略や情報整理といっても、そんなに特別なものは使用しておらず、僕は従来からのマーケティングツールを使用しています。 SWOT分析 これは企業の内部的要因である強み、弱みと企業の周囲を取り巻く外部的要因である機会、脅威などをまとめるマーケティングツールです。僕が使用しているのはこのSWOT分析の拡張版で、各変数のリストからそれぞれの戦略を立てる項目を作るものを使用しています。このツールはマクロ的な視点からその企業の現状を把握する際に使えます。 ポジショニング分析 企業が業界や市場においてどのような立ち位置に立っているのか(現状分析)に使えるマーケティングツール
WF作成ツール Axure RP | ユージック
WF作成ツール Axure RP 2007年8月24日 ワイヤーフレームを作成するアプリケーションAxure RPの使い勝手がすごくよかったのでご紹介したいと思います。 価格は589ドルで日本円に換算すると68,371円なので割りと高額になりますが、お試しで30日間だけ使うことが出来たので簡単なＷＦをためしで作ってみました。 ソフトを立ち上げた時のインターフェイスはこんな感じで右サイドにツリーフォルダとモジュール、テンプレートファイルといった順番に並んでいて、0から作るのではなくＤｒｅａｍｗｅａｖｅｒみたいな感覚で作成することができます。 これが実際に作ってみた時の画面になります。ドットのグリッド表示になっていてパーツの間隔も簡単に整えて並べれるし微妙な位置調整も可能なため、非常に使い勝手がよかったです。 作成したＷＦはプロトタイプとしてHTMLで出力することができます。これが出力した時の
activecollabを無料レンタルサーバーで運用する | ユージック
activecollabを無料レンタルサーバーで運用する 2007年8月18日 先日ローカルサーバーで試しに使ってみたactivecollabを無料のレンタルサーバーで使ってみたので、やり方をご紹介します。 まず、activecollabを利用できる環境としてPHP5とMySQLで InnoDBが使える環境になります。 そこで無料で100MBまでの容量まで使用可能で、かつPHP5とMySQLで InnoDBが使える環境の無料レンタルサーバーland.toで利用するとします。 サーバーの登録は結構簡単でサクサクと進めます。実際にFTPのIDとPASSなどの情報が送られてくるのが1日後くらいなので、作業は次の日をおすすめします。 FTPの情報が送られてくれば、コントロールパネルでphpadminが使用できるので、インストール前にDBを作成しておきましょう。そして、publicフォルダの中にac
WEBマスターが知っておくべき5つの.htaccess | ユージック
WEBマスターが知っておくべき5つの.htaccess 2007年7月10日 5 htaccess Tricks Every Webmaster Should KnowというWEBマスターが知っておくべき5つの.htaccessという記事を見つけました。僕も知らなかったのがあったので翻訳してご紹介したいと思います。 リニューアル中にアクセスしたユーザーを特定のページにリダイレクトする サイトをリニューアル中、もしくはテスト中にサイトにアクセスしたユーザーを特定のページにリダイレクトすることができます。123.123.123.123のところにサイトのIPアドレスを記述して、サイトにアクセスしたユーザーを403エラーページのpage.htmlにリダイレクトすることができる記述になります。page.htmlは事前に準備する必要があります。 order deny,allow deny from a
WEB業界の多種多様な職種 | ユージック
WEB業界の多種多様な職種 2007年7月2日 WEB業界といえば、デザインを担当するWEBデザイナー、デザインをブラウザで表示させるためのコーディングを担当するエンジニアデザイナー、システムを構築するプログラマー、それらの間を取り持つWEBディレクター。 一般的に上記のような職種だけを連想してしまいがちだけど、本当はもっと色々な業務につく職種が存在するんですよね。肩書きは違えど、それ以外の様々なWEB業界を支えるポジションを考えてみたいと思います。 アナリスト 問題解決を専門とする立ち位置。ユーザーへのインタビューや、クライアントへのインタビューを通して、情報を収集し、問題を解決していく。 IAエンジニア IA（インフォメーションアーキテクト）「情報構築」を中心に担うポジション。WEB戦略やポジショニングなど様々な角度から見た情報を形作っていく。 テスター システムの場合はデバックを担当
サイトマップ作成から検索エンジン登録までの流れ | ユージック
サイトマップ作成から検索エンジン登録までの流れ 2007年5月31日 覚書も兼ねてSEO対策としてのサイトマップを作成から検索ボットに巡回してもらうまでの手順などをまとめておこうと思います。 サイトマップを作成する Movabletype版はこちらを参照。 http://e-club3.hyperposition.com/seoblog/searchengine/20061116220542.html WordPress版はこちらを参照。 http://blog.webcreativepark.net/2007/04/21-135814.html 一般のサイトでの作成はSitemapbuilderというツールを使用することで作成できます。Sitemapbuilderを使用しての作成の手順はこちらを参照。 http://markezine.jp/a/article/aid/1167.aspx
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
