フロントエンド開発を裏から支えるデバッグアプリケーション4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。4月1日からLIGで働いてます、ハカセです。今後フロントエンドの開発に関する情報を発信していきますので、よろしくお願いします。 さて、フロントエンド開発でのブラウザチェックって結構大変ですよね。こういう作業は重要なのですが、飽きやすいので、効率よく進めていきたいところです。 LIGでもブラウザチェックなどのデバッグの方法については定期的に議論がなされる永遠のテーマです。 そこで今回は、チェックやデバッグを助けてくれるツールから、Win/Mac共通で使えるものを厳選してご紹介します。 1. Edge Inspect http://html.adobe.com/edge/inspect/ Adobe社が提供しているアプリケーションで、Creative Cloudに入っています。 PCのブラウザとモバイル端末で同時にリアルタイムの確認ができたり、スクリーンショットを取ったりすること
モバイル向けの新クラウド、BaaS（Backend as a Service）とは何か。「Parse」が正式サービス開始
モバイル向けの新クラウド、BaaS（Backend as a Service）とは何か。「Parse」が正式サービス開始 iPhoneやAndoroidのようなモバイルデバイスはPC以上に普及し、クラウドに接続するデバイスとしてもっとも一般的なものになると予想されています。これからのクラウドアプリケーションの主役はモバイルデバイスの上で動くものになるというわけです。 そのモバイルアプリケーションに特化したクラウドの形態として「BaaS」（Backend as a Service）と呼ばれるサービスが登場してきています。 BaaSとは一般に、モバイルアプリケーションのバックエンドとして求められるデータストア機能、プッシュ通信機能、ユーザー管理機能、ソーシャルとの連係、ロケーションとの連係などを備え、それらの機能をモバイルアプリケーションからAPIで呼び出すことで、サーバ側のコードを書くことな
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（マルチタッチ編）
90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
[携帯]xhtmlのリンク指定方法〜cssとbodyの違い │ これからゆっくり考L +α
結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。 <body link="#5994FF" vlink="#59E2FF"> <style type="text/css"> <![CDATA[ a:link{color:#5994FF;} a:focus{color:;} a:visited{color:#59E2FF;} ]]> </style> サンプルページ →サンプルページを見る bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？ って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。 まずは予備知識として docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモード
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 サンプルを元に解説してくれているので分かりやすいです。 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 携帯サイトの作り方 5年前の情報なので参考程度に。今は随
[携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 │ これからゆっくり考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 フォーカス時のリンク色 未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって
mixiアプリモバイルを作る前に知っておきたい、PC版との違い5点 : LINE Corporation ディレクターブログ
モバイル事業を担当している渡邉雄介です。ライブドアでは2月に初のmixiアプリモバイル「わんにゃん★マイスター」をリリースし、現在も複数のアプリの開発を進めています。 リリースまでの手順はmixi Developer Center (開発者向けサイト) に詳しく載っていますが、PCと比較するとモバイルは勝手が違うところがいくつかあります。今回は実際にmixiアプリモバイルを申請した経験をふまえ、考慮しておきたいPC版との違い5点をまとめました。 その1 開発できるのは法人だけ 意外と知られていないのですが、モバイル版を開発できるのは法人だけです。個人がアプリ開発をする際のデベロッパー登録はPC版のみに適用され、モバイル版は対象外になっています。 ＜参照元＞ mixi Developer Center >> パートナーアカウント登録 個人の方は通常のアカウントを用いて、「デベロッパー登録」よ
NTTドコモがOpenIDを採用、PCサイトも“iモード認証”が可能に
NTTドコモは3月9日、OpenID技術を活用し、PCサイトでもモバイルサイトと同じようにユーザー認証できる「docomo ID認証」の提供を開始した。モバイルサイトの認証サービス「iモードID」と、NTTドコモが自社のPCサイトで利用している「docomo ID」を連動させたもので、一般のコンテンツプロバイダーが利用できる。 iモードIDは、NTTドコモの携帯電話番号ごとに1つずつ付与されている、iモード用のユニークなID。公式サイトだけでなく一般サイトでも利用可能なことから、NTTドコモ向けモバイルサイトのユーザー認証に広く使われている。一方のdocomo IDは、NTTドコモ契約者が無料で発行できるPC用の認証ID。現在はNTTドコモの「My docomo」「imode.net」などのPCサービスで採用されている。 docomo ID認証はOpenID技術を活用し、PCサイト運営者が
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
ke-tai.org > Blog Archive > 各キャリアのメールサーバのIPアドレス帯域をまとめてみました
各キャリアのメールサーバのIPアドレス帯域をまとめてみました Tweet 2010/3/3 水曜日 matsui Posted in サーバ | No Comments » ちょっと別件で各キャリアのメールサーバのIPアドレスをまとめたので、そのURLと現在の帯域をメモしておきます。 まずはドコモです。 → NTTdocomo 作ろうiモードコンテンツ iモードセンタの各種情報 [nttdocomo.co.jp] メール送信時（インターネット→iモード） 203.138.180.0/24 203.138.181.0/24 メール受信時（iモード→インターネット） 203.138.203.0/24 続いてauです。 → au by KDDI 技術仕様 EZwebメールサーバIPアドレス情報 [au.kddi.com] メール送信時(EZweb→インターネット) 59.135.39.192/2
ke-tai.org > Blog Archive > Google Analytics携帯版の導入方法まとめ
Google Analytics携帯版の導入方法まとめ Tweet 2009/11/30 月曜日 matsui Posted in 記事紹介・リンク | 14 Comments » 先月発表された「Google Analytics携帯版」ですが、Googleから正式なリリース告知は無いものの、ケータイからのアクセス解析が一応利用できる状態になっているようです。 PC版でGoogleAnalyticsを利用しているので、モバイル版でも利用したいという方も多いと思います。 しかしながら、セットアップ方法が少し複雑なため、導入に手間取っているという話も良く聞きます。 今回は自分のメモ代わりもかねて、Google Analytics携帯版について触れているブログを集めてみました。 まず便利なのがこちらのサイトです。 タイトルからもわかるとおりGoogle Analyticsを専門に扱っているブログ
携帯電話からのアクセスを真似する·Moxy MOONGIFT
MoxyはPerl製のオープンソース・ソフトウェア。日本において携帯電話サイトの需要は大きい。スマートフォンの活況もあって、PC向けと同時に携帯電話向けをリリースすることも多くなっている。また将来的にはPCよりもモバイルのシェアが大きくなると言われている。 携帯電話からのアクセスを模倣できる そんな携帯電話向けサイトの開発を行う場合、PCからアクセスを偽装してテストを行う必要がある。専用のソフトウェアの他、FirefoxのMobileSimulatorも使えるが、ここではWebブラウザベースのMoxyを紹介しよう。 MoxyはPerl製のソフトウェアで、専用のWebサーバとしてサービスが立ち上がる。ブラウザからアクセスすると、URLを指定して外部のWebサービスにアクセスできる。その際にはUserID、ユーザエージェント、HTTPヘッダーを任意に入れ替えてアクセスも可能だ。 Googleへ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
ウノウラボ Unoh Labs: Flash Lite初学者の為のまとめ
おはようございます。内田です。 最近はmixiアプリモバイルやモバゲー上のゲームのようなソーシャルゲームが流行ってるようですね。 私もソーシャルゲーム＆Flash Lite案件を手がけることになったので、その時に参考にしたサイトを紹介します。 開発の前に覚えること 最初にFlash Liteの仕様とケータイ開発の障壁ともいえるキャリア間の差異を知る必要があります。 Flash Lite ことはじめ。 我らがryosuke氏のエントリー 仕様とキャリア毎の情報が分かりやすくまとまってます。 [Flash Lite 1.1]制作前に知っておきたいことをQ＆A形式でまとめてみた 上記エントリーと重複する部分も多いですが、Q＆Aの形で調べやすい。 「一般的なガイドラインが知りたい！」を厳守すれば3キャリアで動作するswfがつくれそうです。 コンテンツの作成 Flash Liteコンテンツのつく
FlashLite2.0の動向 | _level0 - KAYAC Front Engineer Blog
アナウンス直後からかなり注目していたFlashLite2.0に、そろそろ動きが出てきそうです。 先日、今年のクリスマス商戦モデルとなる各キャリアの最新新機種一覧が発表されました。 MNPが本格的に始まるためか、各キャリア共にデバイスのスペックにもかなり力が入っています。 GPSをはじめ、Flashクリエイター念願のFlashLite2.0対応機種も一気にリリースされます。 以下３キャリアの対応状況 Flashlite2.0対応状況// ソフトバンク 機種別情報一覧 対応機種：910SH、810SH、811SH、910T、810T、811T ファイルサイズ：150KB 備考：SharedObjectが使用できない。 AU 機種別情報一覧 対応機種：W43SA、W45T、W43CA、W43H、W43S、W43K、W42SA ファイルサイズ：100KB上限 備考：loadMovieの連続読込みで
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
Developing Flash Lite 2.x Applications
FLASH LITE 2.x ® ™ アプリケーシ ョンの開発 © 2007 Adobe Systems Incorporated. All rights reserved. Flash® Lite™ 2.x アプリケーションの開発 本マニュアルがエンドユーザー使用許諾契約を含むソフトウェアと共に提供される場合、本マニュアルおよびその中に 記載されているソフトウェアは、エンドユーザー使用許諾契約にもとづいて提供されるものであり、当該エンドユー ザー使用許諾契約の契約条件に従ってのみ使用または複製することが可能となるものです。当該エンドユーザー使用許 諾契約により許可されている場合を除き、本マニュアルのいかなる部分といえども、Adobe Systems Incorporated ( アドビ システムズ社 ) の書面による事前の許可なしに、電子的、機械的、録音、その他いかなる形式・手段で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
調査レポート / IMJモバイル
作ろうiモードコンテンツ：基本絵文字一覧