タグ

モバイル制作に関するkiyokichiのブックマーク (91)

  • .htaccess だけで簡単キャリア判定してみる | バシャログ。

    まだ 6 月だってのに早くも今年初あせもができちゃったよ!かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ

    .htaccess だけで簡単キャリア判定してみる | バシャログ。
  • Movable Type の PHP化(その2:.html のままPHPを有効にする)

    Movable Type の PHP化(その1)では拡張子を変更する方法を説明しましたが、このエントリーでは拡張子を変更せず、html のままPHP化を行うカスタマイズを紹介します。 このカスタマイズを行えば、モジュール化やページ分割等を、拡張子の変更なしで利用できるようになります。 1年以上前、自宅サーバで運営している時にこのテクニックを知ったのですが、.htaccess を利用すればレンタルサーバでも可能であることに最近気がつきました。 ここでは、 AddType ディレクティブによる設定 ForceType ディレクティブによる設定 AddHandler ディレクティブと Action ディレクティブによる設定 の3つの方法を紹介します。 基的には1項の設定で動作するはずですが、さくらインターネットでは3項の方法でしか有効になりませんでした。4項以降の作業は1?3項共通です。 なお

    kiyokichi
    kiyokichi 2011/04/05
    モバイルでgoogleAnalyticsを導入するときに、普通にテンプレートへ<?php~?>とか書いてもphpとして認識されないので、AddType記述した.htaccessを生成ディレクトリ(/m/とか)に設置すればおk
  • [携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 │ これからゆっくり考L +α

    モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、xhtmlの場合はhead内に記述する必要があります。 <body link="#000000" vlink="#ff0000" alink=""> ・link 通常のリンク色 ・vlink 訪問済みのリンク色 ・alink フォーカス時のリンク色 <head> ... <style type="text/css"> <![CDATA[ a:link{color:#000000;} a:visited{color:#666666;} a:focus{color:;} ]]> </style> </head> ・a:link 通常のリンク色 ・a:visited 訪問済みのリンク色 ・a:focus フォーカス時のリンク色 未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって

    kiyokichi
    kiyokichi 2011/04/01
     alinkとa:focusの関係性が各機種で違うからいやになる・・・
  • ウノウラボ Unoh Labs: Ext JSをUIに使って携帯サイトのシミュレータを作ってみた

    五十川です。 携帯サイトの見栄えをシミュレートするウェブアプリ作りました。と言っても、実際に作ったのはかれこれ半年以上前で、手直ししてから公開しようと思ってたら、結局「guid=ON」を付け足したくらいであとは放置だったので、さすがにいい加減晒そうと。 任意のヘッダでリクエストして、レスポンスの絵文字とか変換してサイトの見栄えを確認するというものですが、これはそもそもExt JSをいじってた頃に、Ext JSでこういうの作ればいい感じになるんじゃね?ということで、丁度2.0がリリースされた頃にデモ用に作ったものなのでした(なので、かれこれ半年以上前) 実機テストの代用になるわけでは、もちろんありませんが、絵文字も含めたマルチキャリアでの見栄えを手軽に確認したいときなどに、わりと便利に使えてたりします。 スクリーンショット 機種ごとのプリセットのヘッダグループをYAMLファイルに書いておいて

    kiyokichi
    kiyokichi 2011/03/30
    しみゅれーた。あとでみる
  • ガイド−電話番号リンクを張ろう|携帯サイト作成ツール katy(ケイティ)

    kiyokichi
    kiyokichi 2011/03/17
     電話番号にリンク張って電話できるようにする記述
  • キャッシュコントロールってご存じですか? 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    携帯電話のコンテンツブラウザには、ある程度のキャッシュを保持できる領域を持っています。例えば、携帯でホームページを閲覧しているとき、前の画面に戻る際にページに用意されている「戻る」を押すよりも、携帯のバックボタン(←やクリアボタン)を押した方が余計な通信を行わずに、パケット代を節約できると言われています。 これはブラウザのキャッシュを利用しているのですが、簡単に言えば、キャッシュ保存は携帯に限って言えば、パケット代を節約するために一度見たページの内容を端末に保存しておく便利機能です。画面保存とは少し違います。 現在の常時接続の時代では、キャッシュの保存機能をとやかく言う人はいないのですが、電話回線で接続している時代や、現在の携帯電話など通信料によって課金される従量課金では、一度見たページをキャッシュから再表示する機能はとてもありがたい機能です。 このような利用者の観点からすると、このキャッ

    kiyokichi
    kiyokichi 2011/03/11
    トップページ等更新頻度が高いページのキャッシュクリア(meta記述)
  • 能下载AⅤ片的网站_日韩高清67194_鞭 虐 跪 爬 露出 调教_韩国三级av

    男女上下色视频,hegreat 精油按摩,精品无码人受辱av,99影视在线看,国产野战无套Av毛片,欧美理论完整在线,99久久无码播放,九九精品热线免费观看6,成年欧美1314www色惠美网,亚洲第一成人网国内自拍,99精品视频澳门全免费,日在线观看视频高清免费

    kiyokichi
    kiyokichi 2011/03/10
    これとMTEncodeTextがあればmt4iなくてもケータイMT対応できるっぽい。
  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

    kiyokichi
    kiyokichi 2010/09/07
    対スマートフォンの一環として、そろそろ仕様そろえてもいんじゃね?したらもうちょい自由度・デザインも底上げされそうな気がするんだけど…
  • ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α

    モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない!」という項目は以下の6つ ・xhtmlhtml? ・文字コードは? ・tableは使ってOK? ・絵文字は? ・カタカナの扱いは?半角?全角? ・VGA対応は? xhtmlhtml? 最近は基xhtmlで作成という流れに(私の場合は)なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください!」と言われてやり直したことがあります...。 文字コードは? 携帯サイトといったらSh

    kiyokichi
    kiyokichi 2010/07/07
     確認事項とか。Table使っていいかのくだりは対応機種確認時に相当すると思うが、「全部(の機種に対応!)」って言ってくるお客さまがいてなんというかキレ(ry
  • ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました

    ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ

    kiyokichi
    kiyokichi 2010/06/01
     画像の回り込みと解除の記述方法について
  • またわぷ

    携帯サイトでドメイン指定受信のドメインコピー欄や、form形式で テキストを表示したいときに <input type=”text” value=”●●●” /> などと使ったりしますが、ドコモではこのinputタグだけでは、 携帯サイト上で表示されません。なぜかformタグも書いてあげる必要があります。 さらにformタグにはaction, methodの両方を記述しないと非表示のままですので、 <form action=”” method=””><input type=”text” value=”●●●” /></form> とやってあがげる必要があります。au や SoftBankはformタグがなくても inputタグだけで表示されます。また、action, methodタグの中身は空でもOK!

    またわぷ
    kiyokichi
    kiyokichi 2010/05/28
    コピー用に<input type="text" value="****" size="" />入れてると、docomoだけ表示されない⇒<form action="" method="">ではさまんと悪い(method、actionは空でもおk)
  • 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α

    「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ

    kiyokichi
    kiyokichi 2010/05/19
     このデザインはめんどくさいor実装できないよー、という項目一覧
  • [携帯]各キャリア別、背景画像の対応状況 │ これからゆっくり考L +α

    3キャリア1ソースで作成するときは、「背景画像は1つまで!」ルールでやっているのですが、各キャリアの対応状況ってどんなんだろーと思いちょっと確認してみました。 1キャリアのみ対応の案件もたまにあるので、柔軟に対応できますように。 サンプルページ →サンプルページを見る 結果発表 htmlのサンプルページ bodyに指定 <body background="bg.gif" ...> docomo:○ au:○ softbank:○ table/tdに指定 <table background="bg2.gif"> <tr> <td>サンプルです</td> </tr> </table> <table> <tr> <td background="bg2.gif">サンプルです</td> </tr> </table> docomo:×(iモードブラウザ1.0)、○(iモードブラウザ2.0) au:○

    kiyokichi
    kiyokichi 2010/05/19
     bodyへの指定はいけそうだけど、tdとかへの指定はiモードブラウザ1.0だと⊂ミ⊃^ω^ )⊃ アウアウ!!
  • モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト

    モバイルデザインアーカイブとは? 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー?」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。

    kiyokichi
    kiyokichi 2010/03/23
     モバイルデザイン集
  • オンライフモバイルの開発で役立った情報源やライブラリのまとめ : akiyan.com

    オンライフモバイルの開発で役立った情報源やライブラリのまとめ 2009-03-23 日、株式会社ヨセミテにて提供中のみんなの闘病サイト オンライフのモバイル版がオープンしました。 日初、携帯電話から闘病情報の共有ができる『オンライフ モバイル』を提供開始 (プレスリリース) 僕自身、ログインやフォーム送信などの機能を備えたモバイルサイトの格的な開発は初めてだったので、多くの情報源やライブラリに助けられました。その中でも特に役立ったものを紹介します。 目次 モダンなモバイル開発のススメ (PHP編) ゆどうふ氏による最近のモバイル開発事情と利用ライブラリのまとめ。ライブラリはPHPですが事情説明は共通ですので、PHPな人もそうでない人もぜひ。 モダンなモバイル開発のススメ :: handsOut.jp PHP×携帯サイト デベロッパーズバイブル PHP×携帯サイト デベロッパーズバイブ

    オンライフモバイルの開発で役立った情報源やライブラリのまとめ : akiyan.com
    kiyokichi
    kiyokichi 2010/03/19
    制作にあたり役立ちそうなものまとめ
  • MobileHackerz - MobileHackerz Knowledgebase Wiki

    MobileHackerz Knowledgebase Wiki † 「携帯動画変換君」の機種別対応状況や、設定のカスタマイズなど、MobileHackerz 内コンテンツの「便利な使い方」を集約しています。 2012/06/02 最新版 FFmpeg 用設定とだけ書かれているものは、残念ですが最新版のFFmpegで動作するものはほとんどありません。 なので、書き込みをされる方はFFmpegのrev.No.も記入してください。 FFmpeg rev.41062 などのように書かれているものは、その rev.No.のFFmpegを使用すれば動作します。( au CA004の設定など ) &color(Red){質問を目的とした新規ページは作成しないことが推奨されます。}; &color(Red){『質問する前に』に書かれていることを質問する人はスルーしてください。}; 掲示板で質問する前には

    kiyokichi
    kiyokichi 2010/03/08
     「携帯動画変換君」の使い方とかの説明wiki
  • YouTubeの動画を携帯サイトに貼り付ける場合(簡易)|携帯|Kamitani79-メロンとバナナとブログ

    YouTube モバイルが、NTTドコモ・KDDI(au)・ソフトバンクモバイルの主要機種で視聴可能になったと発表した。2009年4月4日からYouTube モバイルに「分割再生」と呼ぶ機能を実装したため可能になったわけで、今後はもっと利用されることでしょう。 携帯サイトにURLを貼り付ける場合と埋め込みの場合も公式サイトでは公表されていません。 携帯サイトにURLを貼り付けるのみ現在対応できます。 特に変更なしです。埋め込みはまだ未対応な感じです。 PCサイトと携帯サイト連動していて、PCサイトは埋め込みで、携帯サイトはURLを貼り付けてリンクする場合、以下のようにすれば簡易的に対応が可能です。 <object>?</object>が埋め込みでPCのも表示、<noscript>?</noscript>がURLのリンクで携帯サイトに表示。 ※Webブラウザで元々scriptを無効にしている

    kiyokichi
    kiyokichi 2010/03/08
     モバイルにyoutubeリンクさせる場合。Softbankの場合は<a href=""></a>じゃないと表示されなかた。
  • やさしい携帯動画変換君入門 for Windows|動画FLVを携帯動画(3GP2/3GPP)に変換する方法|3GP_Converter

    MobileHackerzの3GP_Converter(携帯動画変換君)を使って、YouTube等のFLV動画を、かんたんに、携帯用(3GP2/3GPP)に変換して見ましょう。 携帯動画変換君は、ffmpegおよびQuickTimeを利用してMPEG/AVI形式などの動画ファイルを、モバイル関連の動画形式に変換します。 ・入力可能な形式は、MPEG/AVI/MOV/WMV(AviSynth 2.5以降が必要)/RM形式(RealMedia Splitterが必要)及び  FLV形式(圧縮がSorensonの場合。FLV1という。)などです。 ・出力可能な形式は、3GP2/3GPP/MQV/MP4/MOVなどです。 なお、携帯動画変換君の標準のインストールでは、つぎのことができません。 ニコニコ動画等の動画圧縮(コデック)がOn2VP6のFLV(FLV4という)は、携帯動画変換君では変

    kiyokichi
    kiyokichi 2010/03/08
     携帯動画変換君の+αの説明
  • case:MobileDesign! モバイルサイトのデザイン紹介ブログ

    case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-08 >

    kiyokichi
    kiyokichi 2010/02/17
     これはいいできないまとめ
  • そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ

    こんにちは、「プチペット」を担当している吉沢です。 最近はモバイルサイトを作成するためのブログやノウハウなどがたくさん出てきて、とても便利になってきましたね。 個人的にはモバイルサイトのデザインやユーザインターフェース関連に関心が高いので、ブログでは「モバイルデザインアーカイブ」さん、「case:MobileDesign!」さん、では日々、こちらで勉強させていただいております。 モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 著者:株式会社ゆめみ 販売元:インプレスジャパン 発売日:2008-12-25 おすすめ度: クチコミを見る モバイルデザインアーカイブ。―携帯Webコレクション 著者:モバイルデザインアーカイブ 販売元:春日出版 発売日:2009-08 おすすめ度: クチコミを見る ケータイサイトのレイアウト 企業・キャンペーン・サービ

    そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ
    kiyokichi
    kiyokichi 2010/01/13
     見てくれ的な部分が主。