このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

スマートフォン

「Band's」スマートフォン版リリースしました! Band's  http://bands-music.jp/ 音楽を演る人、聴く人、愛する人の為のwebサービス「Band's」のスマートフォン版リリースしました! URLは変わらず切り替えの対応しちゃってます。 お…

続きを読む

スマートフォンと呼ばれる端末が世に出て、早。。。何年だ?何年かは忘れましたが、 私はそのスマートフォン端末登場と共に、正式に「フロントエンドエンジニア」と呼ばれる職種につきました。 それまではデザインだったり、構成作成したり、モバイルやったり、Flashだったり、PHP用いてのサーバー…

続きを読む

どもです。今回は、 スマートフォンアプリである「ドラゴンクエストモンスターズ スーパーライト」や「パズドラ」のジェムを無料で50,000円分GETできる!! と、言った感じで書かれている「お小遣い稼ぎサイト」を試してみました。 それは本当なのか否か。 このお小遣い稼ぎサイトとは…

続きを読む

や、や、やっとリリースされましたぁぁ〜〜!!! 長かった。いやぁなんか長かった。。。 と、言うわけで今回、UI設計、フロントエンド全般 その他etc...を担当させて頂いたプロジェクト 「連撃のブレイブハーツ」がついにリリースされたのです!!! パチパチパチぃ!! 「連撃のブ…

続きを読む

スマートフォンコンテンツを制作していくと、何かとタッチイベントが必要となってきます。 一部のAndroid端末で「touchmove」イベントが上手く取得できない。なんてことも多々あります。 そんな時用の為にスマートフォン タッチイベント確認ページを作成しました。 そんな大逸れた…

続きを読む

Mac SafariのWebインスペクタでのデバック iOS6になり、iPhoneで開いているページをMacのsafariからwebインスペクタによるデバックが可能になりました。 MacのSafariのバージョンが古い方はこちらからアップデートを行えます。 iPhoneの設定…

続きを読む

あ、ども僕です。 最近、何かとスライダー的なやつを扱う機会が増えております。 よくあるスライダーですね。 こんな感じのやつですね。 画像がスーっと行くやつ。バナーなんかで良く見かけますよね。 これをスマフォンサイトでも実装しているのですが、マークアップは単純に [code]…

続きを読む

昨今、CSS3でのグラデーションや、様々なプロパティを用いて様々な事が出来るようになったのは、 大分浸透しているかと思います。 当方はCSS3のバトルアニメーションを作成し、カヤックが企画しているjsDoitのコンテストで受賞しております。 宜しければご覧下さい。 http…

続きを読む

前回の スマートフォン JavaScript タッチ、フリックイベント実装 の続きとなります。 今回は、フリックの判定、CSS3アニメーションでフリック判定によってボールを飛ばす。の2点をお届けします。 では、 タッチ、フリックイベント判定 なにを判定するかというと、右にフ…

続きを読む

スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。 タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。 フリックとは、画面にタッチし指やペン等をスライドされる動作となります。 このタッチやフリックを操作する際、JavaScriptで取…

続きを読む

本来、iPhoneアプリを制作するとなると、objective-CやC言語も用いて制作するのですが、web制作言語のHTML5やCSS3、JavaScriptでスマートフォンネイティブアプリを制作可能と出来るのが「PhoneGap」となります。 アプリ制作の為、慣れない言語のobject…

続きを読む

前回の記事の css3 3d 回転 transform rotate()や css3 3d 回転 transform rotate() perspective追加 を参考に今回は、CSS3で立体的な四角形のアニメーションを作りたいと思います。(Javascriptまたは画像を一切使用…

続きを読む

CSSを圧縮出来るwebサービス CSS Drive css compressorの紹介になります。 公式サイト http://www.cssdrive.com/index.php/main/csscompressor/ たかがCSS。されどCSS。 スマフォン時代 重要視されるパフォ…

続きを読む

Android 端末は様々なディスプレイサイズ、解像度があり、そのままだとボタンなどが拡大されたりして画像が汚くなったりします。 これを避けるためボタンなどが拡大されても汚くならないよう画像素材を引き伸ばし可能な状態にする必要があります。 それを可能するのが「NINE Patch 画像」と…

続きを読む

CSS3では、transitionプロパティやanimation-nameでkeyframesを呼びだして アニメーションを作成することができます。 それらを使用し、「ライトボックス風 アニメーション」を作りたいと思います。 (少々強引な方法ではありますが。。。) saf…

続きを読む

Xcodeはアップルが提供しているiOS SDKに含まれている、開発の中心となるツールです。 プロジェクト全体の管理や、プログラムの入力、実行ファイルの作成などが行えます。 統合開発環境(IDE)と呼ばれており、 必要な時にiOSシュミレーターなど他ツールを起動する事が出来ます。 1.…

続きを読む

JavaScriptを用いて、「ユーザーエージェント」の振り分けの方法です。 ユーザーエージェントとはwebブラウザーや検索エンジンのクローラーといったwebサイトへアクセスするプログラムのことをいうのですが、web制作では一般的に「webブラウザーがHTTP通信時にサーバーへ送信する固…

続きを読む

スマートフォンでは、デフォルトでは数字がリンクに変わってしまう仕様となっております。 MobileSafariでは、数字7桁、10桁、11桁で電話番号リンクと認識しリンクテキストになります。 MobileSafari以外のブラウザでは6桁以上で電話番号リンクとなります。 回避方法は …

続きを読む

前回の CSSで図形 三角形&台形 の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。 まず、復習です。 HTML [code]<div id="triangle"></div>[/code] CSS3 [code…

続きを読む

iPhoneにはiOSというOSが使われており、 iOS3.0からiPhone内蔵webブラウザ「safari」上で動くjavascriptに GPSデータの取得機能が追加されています。 safariに搭載されているGPS関連機能はW3CのGeolocationAPIに準拠し、 F…

続きを読む

前回の スマートフォンサイトで3D効果 transform rotate() の続きとなります。 こちらにperspectiveを追加し、遠近感効果を付けます。 HTML [code]<div id="turn"> <div id=&q…

続きを読む

css3のみで行う3d 回転 transformプロパティです。 transform:rotate()を使い回転させましょう。 【回転】 rotate(回転角度) 角度による2D回転の指定を行えます。 [code]-webkit-transform: rotate(0deg)…

続きを読む

モバイル版(スマフォン用) JavaScriptライブラリjQuery mobileの使い方です。 jQuery mobileとはモバイルサイト構築用のフレームワークのことで jQuery mobileの「data-role」属性などを設定することで javascriptを書かずスマ…

続きを読む

前回の補足?続きになるのですが、 スマートフォン devicePixelRatio について iPhone3GS  iPhone4では解像度に違い(2倍の解像度)により、 配置した画像がピンぼけしちゃいます。(アンドロイドは1.5倍機種によって異なりますが。) それを回避するため、…

続きを読む

リキッドレイアウトとは何か? リキッドレイアウトとはwebデザインにおいて、 表示領域の幅が変更されても従来のレイアウトを維持できる手法である。 と書かれていたりします。 そう、数年前流行ったやら、流行らないやらのレイアウト手法。 簡単に言うと、レイアウトをpxで指定して固定せず、 %で…

続きを読む

CSS3で出来なかったことが色々と出来るようになりました。 今まで、webサイト制作の際、gifやjpgまたはpngの画像ファイルで表現していた部分も、 css3で記述する事によって、表現することが可能です。 え?そんな面倒くさいことしなくていいじゃん! って思われがちですが、 …

続きを読む

使えるセレクタシリーズ第1弾。nth-child() を紹介します。 w3c http://www.w3.org/TR/css3-selectors/#nth-child-pseudo いやぁ、こちらを参考にしていきたいのですが、 英語だし、難しいですね。 では簡単に。 H…

続きを読む

使えるcss3セレクタシリーズ 今回はonly-child() 唯一の子要素を指定する事が可能です。 HTML [code] <div id="test"> <div>divの要素</div> </div>…

続きを読む

使えるセレクタシリーズぅ 属性セレクタです。属性セレクタは、属性名や属性値によって、要素を指定する事ができます。 まずは属性名を指定する方法 HTML [code] <a href="#" title="hogehoge">titleは…

続きを読む

もうかなりcss3を導入されているサイトが増えて来ていると思いますが、 ここでもう一回おさらいをしちゃったりしましょう。 CSS3で何が出来る?? ・デザインの実装が画像を使用せず実装化 ・Flash、jsを使用せずアニメーション化 と2点。 あれ?意外に思いつかなかった。…

続きを読む

CSS Media Queries(メディアクエリ)を使用したデバイスごとの指定方法です。 CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめ iPhone, iPadなどのモバイル用にスタイルシートの分ける方法です。 スタイルシート…

続きを読む

スマートフォンには、画像1pxが実際のデバイス上で何pxとしてレンダリングされるかを示す devicePixelRatioという値があります。 これの値はwebkit系であれば、window.devicePixelRatioに入っています。 javascriptで出力する場合、 …

続きを読む

最適化に必須の表示制御タグ「viewport」 「viewport」というmeta要素の属性を使って、表示制御できる。 「viewport」で指定出来る属性 width : viewportの横幅 height : viewportの縦幅 initial-scale : 倍率の…

続きを読む

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。