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

web帳

NewEntry

前回の HTML5 Webストレージでデータを保存 その2(なんちゃってソーシャルゲーム作成) 続きになります。 今回は、画面仕様である「 背景が変化する。(進んでいる感のアニメ)」の作成を行いたいと思います。 CSS3を使うことによって色々な表現ができるようになりました。 …

続きを読む

document.querySelector 概要 与えられたクラスの最初の要素を返します。 [code]element = document.querySelector( selectors );[/code] element は element オブジェクト…

続きを読む

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

続きを読む

何気にここらへんについては書いていない感じでしたので、ざっとではありますがまとめさせて頂きました。 まず、ここが変だよJavaScriptといったところで挙げられるのは 「厳密な意味でのクラスという概念がない。」ということではないでしょうか。 ここで言う「クラス」とはCSSが参照…

続きを読む

それでは前回の HTML5 Webストレージでデータを保存 の続きで、Webストレージを使って「なんちゃってソーシャルゲーム」を作ってみたいと思います! ワイヤーフレーム作成 まずは、ワイヤーフレーム作成。ワイヤーフレームは以下のサイトを利用して作りました。 とても扱いやすく、5…

続きを読む

HTML5で利用可能となったAPIで「Web Storage(Webストレージ)」と呼ばれるものがあります。 Webストレージはクライアント側にデータを保存したり読み出しを出来るようにする仕組みとなっております。 保存期間の異なる2種類のWebストレージ Webストレージには以下…

続きを読む

前回の、サーバーサイドJavascript 『node.js』 macにインストール・使用方法の続きとなります。 node.jsをインストール完了したかと思いますので、 更に便利に使う為、「npm(Node Package Manager)」を利用し、 「express」をインストー…

続きを読む

インストールしたまま、かれこれ数年経った気が。w node.jsについて触れてみました。 node.js node.jsとはなんぞや?? サーバーサイドjavascriptと言われるもので、サーバーサイドjavascriptは 文字通りWebアプリケーションのサーバーサイドプログ…

続きを読む

自分のデスクトップの動画のスクリーンキャプチャを作成したいな。 と思っていましたら、Mac OS X に標準でインストールされている QuickTime Player を利用すれば、スクリーンキャプチャを撮ることができるのですね。 手順 1.QuickTime Player…

続きを読む

明けましておめでとうございます! 早いもので、2013年も4日過ぎちゃいました! 1年経つのはホントに早いですねぇ〜! というわけで、今年もweb制作に必要な情報をUPしていければと思っております!! 今年も何卒宜しくお願い致しますmm 昨年末に行われた、「全国統一HTML5…

続きを読む

今日、第二回全国統一 HTML5実技コンテストの 結果発表と共に、授賞式がありまして、先ほど終了致しました。 結果は…. て、タイトルで大バレですが、1位を頂きましたぁ〜〜〜〜!!!!!! http://jsdo.it/event/html5csc/vol2 てっぺんとったわ…

続きを読む

css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 trans…

続きを読む

ども。お久しぶりです。 性懲りも無く、HTML5実技コンテストに参加しております。 仕事も忙しく、即席に作った感じになっていますが。。 できる限り調整を行って行ければと思っております。   フルスクリーンで確認して頂ければと思っております。 どうぞ、応援の程宜しく…

続きを読む

昨今、ソーシャルゲームが大人気なのですが、そもそもソーシャルゲームとは何ぞや? ってとこですね。 今、人気のソーシャルゲームをざっと 拡散性ミリオンアーサー 販売元: SQUARE ENIX Co., Ltd. © 2012 SQUARE ENIX CO., LTD. Al…

続きを読む

前回の Facebook OGPを動的に切り替え フィード画像切替 その2 の続きとなります。 いよいよ今回の課題、「OGPを動的に切り替え」となるのですが、 当初はJavaScriptでmeta(OGP)を切り替えればいいんじゃない? と思い、以下のサイトを参考に htt…

続きを読む

前回の Facebook OGPを動的に切り替え フィード画像切替 の続きとなります。 では以下のページからいいねボタンを生成しましょう。 https://developers.facebook.com/docs/reference/plugins/like/ 「いいね」の対…

続きを読む

最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はgetElementByClassNameとquery…

続きを読む

ども。 最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はclassListについてです。 jQue…

続きを読む

前回までの記事、 FacebookなどのSNSサービスで必要となってくる OGPについておさらい その2 等の続きで、Facebookのいいねボタンとの連携で実際に実装した経緯となります。 制作要件 要望としましては、以下の通りとなります。 ・HTMLファイル1枚に画像が20…

続きを読む

iPhoneで未開封メール全て開封済みにする方法です。 油断しているとメールが貯まり未開封のマークが付き、それを一つ一つ開いていくのは大変手間です。 全部開封済みにできないのか?と思いきや、出来たのですね。。 手順 まず、未開封のあるメールボックスを開きます。 右上にある編集ボタ…

続きを読む

かなり今更ですが。。。 Mac OS10.4を扱う機会があって、ネットワーク設定を開くと "ネットワーク設定は他のアプリケーションによって変更されました"とアラートが出て無限ループしていました。 これは、MacOSX 10.4のアップデータのバグによって発生しているようで、 回…

続きを読む

以前、紹介した-webkit-fillterプロパティがiOS6にて対応となっています。 過去の記事は以下から css3 Fillter Effects -webkit-filterを試してみました。 またより一層、表現の幅が広がりますねー。 Androidは。。。うーん。…

続きを読む

JavaScript、HTML、CSSクリエイターの採用試験 SPECVol.5 結果出ました。 SPEC Vol.5 http://jsdo.it/event/spec/vol5 前回、前々回に引き続き、SPEC Vol.5に参加していたのですが、結果が出ました! 結果は…

続きを読む

先日、iPhone5が発売されましたが、皆さん手に入れましたでしょうか? 当方は予約はしましたが、未だ手にしていない状態です。 そんな、iPhone熱が冷めやまぬ今日この頃ですが、 無料で使用可能のモックアップ用ベクター素材が早くも登場しております。 Pixeden Psd …

続きを読む

Facebook https://www.facebook.com/ いいねボタン設置 https://developers.facebook.com/docs/reference/plugins/like/ Facebook Javascript SDK script…

続きを読む

前回の FacebookなどのSNSサービスで必要となってくる OGPについておさらい の続きとなります。 前回に引き続きOGP(Open Graph protocol)についてです。 今回はOGPの情報を使って、音源や動画をフィードに流す方法となります。 音声ファイル au…

続きを読む

ども、僕です。 2012年9月現在、日本国内のFacebookユーザーも1500万人超えてきて、 何かと「いいねボタンを設置したい」「フィードに画像を流したい。」なんて要件も増えて来ている今日この頃です。 というわけで、何かと重要なOGP(Open Graph Protocol)…

続きを読む

ども、僕です。 2012年9月現在、日本国内のFacebookユーザーも1500万人超えてきて、 何かと「いいねボタンを設置したい」「フィードに画像を流したい。」なんて要件も増えて来ている今日この頃です。 というわけで、何かと重要なOGP(Open Graph Protocol)…

続きを読む

とりあえず、一通り完成させました。 jsのソースなんて汚いところあるのですが、整理も疲れますよね。(笑) iPhoneではシェイクで合成出来るようになっています。 スマートフォンからの確認はこちらから↓ 【URL】 http://jsrun.it/panicdragon/blT…

続きを読む

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

続きを読む

流れでSmartyを使うことになりましたので、色々と残していければよいかと。 まず、Smartyとはなんぞよ?のところから。 簡単に言いますとPHPのテンプレートです。(きっぱり) PHPにはHTML内にコードを埋め込むことが出来るという他の言語にない特徴を持っていまして、初心者…

続きを読む

Facebook PHP SDKを使用していた際に表示したエラーとなります。 表示した内容は以下のとおりです。 ********************************************************************** API Error Cod…

続きを読む

いやぁ、気がつけば8月も終わり9月ですね! 皆さんどのようにお過ごしでしょうか? 僕は懲りずにSPEC vol.5に参加しUI作っています。 今回のテーマは「合成」ということで、色々と関係するところなので、負けられないな。と。 そんな作品は以下の様な感じです。 時間いっぱいま…

続きを読む

今回、今週末に行われる第22回 Fukuoka東区花火大会のwebスポンサーとして参加することになりました!! 第22回 Fukuoka東区花火大会 公式HP http://hanabi.beacons.jp/ 構成も素晴らしく、クオリティの高いFukuoka東区の花火大会、…

続きを読む

ついに来ましたぁ! iPhoneでテザリング出来る日が。テザリングとは、スマートフォンなどを外付けモデムの様に用いて他のコンピューターにインターネット接続する事です。 つまり、スマートフォンがWIfiルーターになる。って事ですね。 Androidでは、標準でテザリング出来るのです…

続きを読む

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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