スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 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
PHPのフレームワークを比較 | ユージック
PHPのフレームワークを比較 2009年5月18日 最近EC-CUBE(ECサイト構築を目的としたPHP+Smartyで書かれたオープンソースのCMS)を利用することを想定して、PHPを勉強しています。 せっかく勉強するので、PHP5から導入されたOOP(オブジェクト指向プログラミング)を習得するためにもPHP製のフレームワークも手にとってみようと思い、色々調べていました。 候補に挙がったのがCakePHPとSymfonyです。なぜかというと検索してみた結果、ユーザーの意見が好評だったという点と、書籍が比較的最近出ているものが多かったからです。まさにこれからのフレームワークという印象を受けました。 CakePHP http://cakephp.jp/ 導入が比較的簡単そうな印象を受けました。圧縮されたファイルをダウンロードして解凍し、サーバーのフォルダにおいて置くだけでOKという簡単さがす
MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! | ユージック
MTOS活用テクニック―カスタムフィールドで本格的なCMS機能を実現! 2009年3月21日 最近、個人的にMTOSでサイト構築をよくしてるのですが、MTOSでなんと正規版だけについているカスタムフィールドのような機能を自作プラグインで導入する解説本が出たのでご紹介しようと思います。 一通り目を通してみた感想は、ノンプログラマーでも本当に簡単にテキストフィールド・テキストエリア・チェックボックス・プルダウンやAssetItemと連動したファイルアップローダーまでプラグインとして作成できちゃいます。以下が読んでみた僕の感想です。 僕的にこの本は簡単にカスタムフィールドの機能をMTOSに実装するというよりもノンプログラマーがプラグインをどのように作り、どのように管理画面に組み込んでいくかのよい教則本として読み進めるのがいいのではないかなと思います。 こんな風にプラグインは作られているんだ～とか
Google Analytics の使い方 | ユージック
Google Analytics の使い方 2008年1月27日 Googleが無料で提供している高機能なアクセス解析ツールであるGoogle Analytics の使い方を説明したいと思います。 アクセス解析といえばオムニチュア社が開発元のSitecatalystなどが有名ですが、Google Analyticsは、それらの有料ログ解析ツールの機能をほとんど備えています。 ただし、GoogleはGoogle Analyticsのデータを利用してアルゴリズムで順位を決めていたり、その情報を元に広告などを配信したりとデータを利用されているという面もあるので、その辺りも考慮した上で使用をお勧めします。 導入方法 Googleアカウントを取得して、Google Analyticsにログインします ログ解析を行うために、解析を行うサイトのURLを設定します 解析を行うサイトのHTMLにタグ付けを行
EXCELをHTMLのTABLEに変換するjQueryプラグイン | ユージック
EXCELをHTMLのTABLEに変換するjQueryプラグイン 2008年12月26日 All Aboutで連載もしているJavaScriptで有名な高橋登史朗氏が作ったEXCELをHTMLのテーブルに変換するjQueryプラグインjquery.csv2table.jsが便利そうなのでご紹介しようと思います。 想定される使用例 テーブルを使用する更新頻度の高い以下のケースに特に有効だと思う。 料金表 対応表(価格や品番など) スペック表(材質や機能など) CMSなどではテーブルをシステム化するのが難しい CMSなどでサイト構築しているとほとんどのページが動的なモジュールで更新可能なのに対してテーブルというのはプログラムによってなかなかシステム化できないというケースが多いと思います。 クライアントはEXCELを利用してデータをまとめているケースが多い 仕事を通じて感じるのは商品の料金表やス
イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリ 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年5月18日 新規立ち上げでWEBサイトを立ち上げる際によく使われていて、かつビジネスにおいて効果の期待できるコンテンツの説明と役割をまとめてみようと思います。自社のビジネス形態や規模に合う合わないはあるかと思いますが、汎用的なコンテンツなので初めてサイト設計をするという方の参考になればと思います。 基本コンテンツ 商品・サービス紹介 商品やサービスの内容の説明ページです。商品やサービスラインナップが多ければ多いほどページのボリュームは多くなります。 お問い合わせ 商品・サービスに関する問い合わせをメールフォームにて受けるページです。最終的にこのページから問い合わせを受け、その後のやり取りによって成約して、始めてWEBサイトの効果があるといえるでしょう。最近では入力項目の数や入力補助機能といったフォームのユーザビリティが離脱率を下げるために効
アップデートしたLightviewが素晴らしい | ユージック
アップデートしたLightviewが素晴らしい 2008年2月20日 様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。 Lightview：www.nickstakenburg.com 扱えるファイル 画像 動画(Quicktime) FLASH(swf) AJAX iframe HTML(inline content) このように非常にシンプルなUIで様々なメディアを扱えます。 準備と使い方 スクリプトファイルをこちらからDLします。 続いてヘッダーにスクリプトを読み込む <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'><
ユーザーエクスペリエンス | ユージック
ユーザーエクスペリエンス 2008年4月19日 ユーザーセンタードデザインと並んで最近注目を浴びているユーザーエクスペリエンスドデザインを覚書とあわせてまとめてみようと思います。 ユーザーエクスペリエンス・デザインとは ユーザーが商品を購入する、若しくはサービスを体験する時の満足度といった経験を元にデザイン・情報設計を行う方法論。ユーザーセンタードデザインとはまた概念が異なる。 ユーザーエクスペリエンス・ハニカム ユーザーエクスペリエンス・ハニカムとはユーザーエクスペリエンスを図式で表したものです。今後、変化していっても大丈夫なような拡張性の持てる蜂の巣構造が素晴らしいと思います。 役にたつ(useful) 使いやすい(usable) 好ましい(desirable) 見つけやすい(findable) アクセスしやすい(accessible) 信頼できる(credible) 価値がある(va
MTOSで利用できるプラグイン10選 | ユージック
MTOSで利用できるプラグイン10選 2008年4月16日 MTOSのライセンス形態はGPLで使用できるプラグインもGPLのものに限られます。そこでMTOSで利用できるプラグインをまとめてみようと思います。 MTOSリリース、MT4.1、LogViewer4MTOS公開。 (Junnama Online (Mirror)) 簡単なアクセスログを管理画面で表示できるプラグイン リンクの挿入をより便利にするプラグイン(MT4.1/MTOS専用版) – The blog of H.Fujimoto リンクの挿入をより便利にするプラグイン 携帯からMTにメールで投稿するMoblogプラグイン「Moober」。 (Junnama Online (Mirror)) 携帯から添付ファイル付き投稿できるMTOS用プラグイン 小粋空間: ブログ記事の入力フィールドに初期値を設定するプラグイン ブログ記事の入
WEBコンサルタント | ユージック
WEBコンサルタント 2008年4月16日 最近よく耳にするWEBコンサルタントという新しいWEB業界というフィールドの職種を紹介しようと思います。 ミツエーリンクスさんでの募集項目によると「Webサイトの構築・運用に関わる分析・診断業務を通して、顧客企業への提案活動を行う」との事だそうです。 さらに具体的に引用すると「Webサイトのアクセスログ解析、ユーザビリティ診断、競合サイト調査、SEO対策等の解析・コンサルティング業務」となるらしいです。 WEBプロデューサーとWEBディレクターとどう違うの？という疑問が出てきますが、僕なりの解釈で説明するとWEBコンサルティングはWEBプロデューサーとWEBディレクターに比べ、既にある既存サイトの改善という点と、クライアントのリアルビジネスを含めたWEBを利用しての改善という点が大きいのかなと思います。 従来であれば、フィールドは主に、WEB媒体
IE6向けの便利なCSSハック : ユージック
IE6向けの便利なCSSハック 2008年3月25日 IE6でのロールオーバー時の背景画像のちらつきを解消するためのハックとIE6でmin-heightやmin-widthを効かせるためのCSSハックです。 IE6でのロールオーバー時の背景画像のチラつきを解消するCSSハック html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } IE6でmin-heightやmin-widthを効かすためのCSSハック /* min-height */ .min-h { min-height:100px; height: auto !important; height: 100px; } /* min-width */ .min-w { min-width:100px; width:
jQueryでlightBoxを使うplugin | ユージック
jQueryでlightBoxを使うplugin 2007年10月16日 jQueryでlightBoxを使うpluginをご紹介します。lightBoxはprototype.jsを併用するJavascriptのスライドショーを実装する有名なライブラリですが、今回はjQueryで利用できます。かつ高機能です。 jQueryでlightBoxを使うpluginの英文のサイトはこちら 実装はいたって簡単です。まずは元サイトでスクリプトとCSSをDLして外部リンクします。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script> <link rel="stylesheet" type="te
オープンソースのライセンスは商用利用できるのか？ : 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は
Javascriptのイベントハンドラ設定方法 | ユージック
Javascriptのイベントハンドラ設定方法 2007年5月7日 DOMやJavascriptを勉強しているとイベントハンドラの設定方法が色々とあってどの方法でやれば一番良いのかわからなくなってきたので、自分の覚書もかねてイベントハンドラの設定方法をまとめてみようと思います。 尚、サンプルはボタンを押すと”クリックされました”とアラートが出るだけのシンプルなスクリプトでご紹介します。 （X）HTMLの中に記述する方法 <form> <input type="button" id="myButton" value="Click" onClick="alert('クリックされました');"> </form> （X）HTMLの中でイベントハンドラを利用する方法で（X）HTMLとスクリプトの分離ができていないのであまり良い方法とはされていませんがシンプルな方法の一つです。 .onclickを使う
Open ID | ユージック
Open ID 2007年12月28日 最近ちまたで話題のOpen IDについての記事を書いてみたいと思います。具体的にOpen IDとは何かから、デベロッパーの立場からどのようにOpen IDに対応したシステムを構築するかという視点でまとめてみたいと思います。 Open IDとは何か オープンソースの技術であり、複数のWEBサービスで共通で使用できるIDのサービスです。開発元はOpenID.netという団体です。開発者は元シックスアパートに在籍していた方だそうです。 国内でOpen IDに対応しているサービスではlivedoorやはてな等のサービスで利用できます。Open IDを発行している国内のサービスで代表的な所として韓国のIT企業のAscent Networkが運営しているOpenid.ne.jpなどがあります。 Open IDの仕組み Open IDを具体的に説明すると、Open
MT4のカスタマイズのポイント : ユージック
MT4のカスタマイズのポイント 2008年1月23日 MTはなんといってもカスタマイズが簡単な事がすごく便利なポイントであると思います。今回はMT4でのカスタマイズにフォーカスを当ててMTでのカスタマイズのKeyとなるMTSetVarBlockとMTIfをノンプログラマーから見た視点で解説をしたいと思います。 MTSetVarBlockとは変数を格納できる箱である MTSetVarBlockはMTタグでカテゴリーであったりエントリーのIDなどの変数(条件によって変わる値)を格納する機能があります。name属性に変数を代入するイメージですね。”このカテゴリーにはこれを表示したい”なんてときは下記のように記述します。 <MTSetVarBlock name="catList"><$MTEntryCategory$></MTSetVarBlock> 注意点としてはMTをスタティック(静的)に生成
MT4にアップグレード | ユージック
MT4にアップグレード 2007年9月29日 今日はWEBsig会議が開催した『WebSig会議「Web屋さんのためのMovable Type4」in 大阪』に行ってきました。 そして家に帰ってブログをMT3.3からMT4.01にアップグレードしました。やり方はすごく簡単でしたのではしょって説明します。 MTのバックアップをとる MT4.01をダウンロードする 元MTを削除する※DBとmt-config.cgiは残しておく MT4.01をアップロードする cgiの属性を700もしくは755に変更 mtcgiにアクセスしてMT4.01を走らせる という感じで簡単にアップグレードできます。ただ、MT4.01からBerkeley DBをサポートしなくなったため、Berkeley DBを使用していた場合、Berkeley DBをMySQLもしくはSQliteにコンバートしなくてはなりません。 コン
メニューで現在位置を表示するJSライブラリ | ユージック
メニューで現在位置を表示するJSライブラリ 2007年9月17日 メニューでjavascriptのみで現在位置を表示するJSライブラリをご紹介します。 どういったものかというと、マークアップでメニューに各ページごとにIDやクラスをふらなくても現在のページをハイライトするという機能です。 イメージをCSSで背景にしいて使用する場合は、アンカータグに”here”というclassをつけるという仕組みを利用し、CSSを使わずimgタグでメニューを組む場合は命名規則として、menu_on menu_offといったように通常時に_offとハイライト時に_onとつけてください。src属性にアクセスしてoffとonを置換する仕組みを利用しています。 imgタグをCSSでaタグの背景にしいて利用する場合のHTMLとJavascriptのコード HTML <ul id="menu"> <li><a href=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
