PHP 会員制サイトの制作方法 その3
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 前回の PHP 会員制サイトの制作方法 その2 の続きとなります。 今回は、 user_regist.php：会員登録と登録内容送信ファイル index.php：ユーザー登録処理コントロールページ の2ファイルを作成し、完成させましょう。 user_regist.php：会員登録と登録内容送信ファイル 前回作成したファイル regist_confirm.php：会員登録内容確認画面ファイルの後の処理のファイルとなります。 登録内容を確認したあと、データベースに各パラメーターを登録し、登録完了のメールを配信する流れとなります。 ソースはこちら。 <?php /* 入力フォームからパラメータを取得 */ $formList = array('mode', 'input_use
enchant.js HTML5+JavaScript 重力のあるボール挙動
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 いやー。楽しいですね。enchant.jsは。 重力のあるボール挙動のscriptを書いてみました。ボールをドラッグ出来て、放り投げることも可能です。 何より便利だなと感じたのは、「touchstartでクリックスタート」「touchendでクリックエンド」などもカバーしてくれているところです。 デモページ http://webcyou.com/demo/js/enchant/ball/ こちらのscriptの詳細に関しては以前の記事、 ActiinScript2.0 ボールアクション 重力、摩擦、跳ね返り係数 を参照して頂ければと思います。 順番を追って制作されたい方は以下の順を参照してください。 ActionScript 簡単なイージング https://www.we
pjax (pushState + Ajax) jquery plugin 使用方法 などなど
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語（pushState + ajax = pjax）となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!（hashbang）を
enchant.js HTML5+JavaScriptでゲーム開発
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 enchant.js http://enchantjs.com/ja/ 記事を書こう書こうと思いましたら、色々と時は過ぎていくものですね。 もう、すっかり話題のenchant.jsについて書いていこうかと思います。 enchant.jsとは A simple JavaScript framework for creating games and apps と記されているとおり、そうです簡単なJavaScript でゲームやアプリを作れるフレームワークですよ！ってことですね。公式サイトに記述されているのですが、特徴は以下のとおりとなります。 カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワーク。 2011年に公開され、すでに 1,000
HTML5 History APIについて
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 History APIとは History APIはHTML5の機能のひとつとなります。Historyとは履歴のことで、historyという名前のオブジェクトで存在します。 ブラウザの戻る進むボタンのイベントを取得してページの内容を動的に変えることができるものです。 まず、historyについてなんですが、history自体は昔からあり、いくつかメソッドを持つオブジェクトでした。よく使われているメソッドの一つにhistory.backが存在します。 history.back(); では実際に用意しましたので押してみましょう。以下のボタンを押すと一つ前に見たページと戻るかと思います。 <input onclick="history.back()" type="button"
FlashをCanvas等に変換 gree/LWF（Lightweight SWF）を使ってみました。
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 gree/LWF（Lightweight SWF）を使ってみました。 LWFとは、GREEエンジニアが開発したオープンソースで、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5（Canvas）で再生できる様にするツールになります。また、Unityにも使える様になっています。 何はともあれ使ってみましょう。 lwf （Lightweight SWF） lwf GitHub https://github.com/gree/lwf こちらにソースがあるのですが、準備するのが困難なので（一度やってみましたが上手く行かなかったです。） 簡単に設定出来るように「lwfs」というのが用意されていま
FlashをCanvas等に変換 gree/LWF（Lightweight SWF）を使ってみました。その2
の続きとなります。 前回ではlwfsを使いデモファイルを試すところまで行いました。今回は手元にあるswfファイルでテストしてみましょう。 以前、Flash作成を担当させていただいた「lobjet」のサイトのswfで試させていただこうと思います。 lobjet http://www.lobjet-photo.com こちらのマウスによってパララックス的にグイグイ動きページのswfで試してみました。 対象ページ http://www.lobjet-photo.com/top.html 例の如く、「LWFS_work」フォルダにswfを入れてみます。 すると、「status」にNGの文字。。 まぁ。無理だと思っていましたよ。思っていながらも試したわけですよ。振られると思って告白してみたものの。。て感じですよ。それは置いといて。 ではオープニングの軽いアニメーションを試してみましょう。 対象ページ
Macで動画のスクリーンキャプチャ作成
自分のデスクトップの動画のスクリーンキャプチャを作成したいな。 と思っていましたら、Mac OS X に標準でインストールされている QuickTime Player を利用すれば、スクリーンキャプチャを撮ることができるのですね。 手順 1.QuickTime Player を起動 2.ファイル » 新規画面収録 を選ぶ。 3.ウインドウ（コントローラ）が表示されるので、真ん中のボタンをクリック。 すると、撮影が始まります。 フルスクリーンを収録（キャプチャ）する場合は、画面をクリックする。 画面の一部をスクリーンを収録（キャプチャ）する場合は、収録したい部分をドラッグする。 このような感じで範囲で撮影することもできます。 4.止めたい場合は、画面収録のウインドウにある停止ボタンをクリックすると収録が止まります。 画面収録のウインドウ右のメニューをクリックし、 内蔵マイクか、ライン入力での
サーバーサイドJavascript 『node.js』 macにインストール・使用方法
node.jsとはなんぞや？？ サーバーサイドjavascriptと言われるもので、サーバーサイドjavascriptは 文字通りWebアプリケーションのサーバーサイドプログラムをJavascriptで記述出来る技術となります。 で注目されているのが、米GoogleがGoogle Chrome用に開発しているオープンソースのJavascriptエンジン「V8」 をベースにしたNode.jsとなります。 node.js 公式サイト http://nodejs.org こちらにある、INSTALLボタンを押せばパッケージをダウンロードできます。 現在、v0.8.17です。 また、DOWNLODSボタンを押すと、各プラットフォームのパッケージをダウンロードできます。 http://nodejs.org/download/ github https://github.com/joyent/node
サーバーサイドJavascript node.js expressやらnpmやら
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 前回の、サーバーサイドJavascript 『node.js』 macにインストール・使用方法の続きとなります。 node.jsをインストール完了したかと思いますので、 更に便利に使う為、「npm（Node Package Manager）」を利用し、 「express」をインストールしましょう。 npm https://npmjs.org express http://expressjs.com node.jsのwebサイトからパッケージをダウンロードし、インストールした場合、 npm（Node Package Manager）も利用出来る状態かと思います。 npm -v でバージョンが表示すればインストールできている状態となります。 インストールできていない場合は、
HTML5 Webストレージでデータを保存 その２（なんちゃってソーシャルゲーム作成）
の続きで、Webストレージを使って「なんちゃってソーシャルゲーム」を作ってみたいと思います！ ワイヤーフレーム作成 まずは、ワイヤーフレーム作成。ワイヤーフレームは以下のサイトを利用して作りました。 とても扱いやすく、5分ほどで作成できました。 moqups https://moqups.com/ 作成したワイヤーフレームは以下の通りです。 001-クエスト進行画面 画面仕様 概要としまして、 ※ 一番上にはゲームのタイトルh要素を配置。 ※ 現在のプレーヤーLvの表記 ※ Quest進捗をゲージで表示。 ※ Exをゲージで表記。ExがMaxになるとLvがUPします。 ※ Goldの表記。 ※ クエストの背景。クエストによって入れ替える。 ※ ポチポチするボタンを配置。 — ボタンを押すことによって起きる処理 — ※ Quest進捗のゲージが増える ※ Exのゲージが増える。（いっぱいにな
JavaScript オブジェクト指向 プロトタイプなどのまとめ
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 何気にここらへんについては書いていない感じでしたので、ざっとではありますがまとめさせて頂きました。 まず、ここが変だよJavaScriptといったところで挙げられるのは 「厳密な意味でのクラスという概念がない。」ということではないでしょうか。 ここで言う「クラス」とはCSSが参照するclassではなく、 C#、Javaなどといったオブジェクト指向プログラミング言語で使用される「クラス」に該当します。 あくまで厳密な意味で無い。とのことなので、無いこともないのです。 では、どのように作るかと言いますと。 var Webcyou = function(){}; と、最もシンプルなクラスの例を挙げてみました。 var hoge = new Webcyou(); と、呼び出す際は
HTML5 Webストレージでデータを保存 その3（クエスト進行CSS3アニメーション）
前回の HTML5 Webストレージでデータを保存 その２（なんちゃってソーシャルゲーム作成） 続きになります。 今回は、画面仕様である「 背景が変化する。（進んでいる感のアニメ）」の作成を行いたいと思います。 CSS3を使うことによって色々な表現ができるようになりました。 そのなかでも多彩な表現が可能となるkeyframe アニメーションを使ってクエスト進行の作成を行いたいと思います。 keyframe アニメーション .elm { -webkit-animation: 'anime' 1s ease-in 1; } @-webkit-keyframes 'anime' { 0% { opacity:0; } 100% { opacity:1; } } このようにアニメを行いたい対象の要素に対して-webkit-animationの指定を行い、 @-webkit-keyframes ‘任
HTML5 Webストレージでデータを保存 その4（なんちゃってソーシャルゲーム・ゲージ）
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 前回の HTML5 Webストレージでデータを保存 その3（クエスト進行CSS3アニメーション） の続きになります。 前回まではボタンをクリックすると背景画像がCSS3アニメーションし、歩いている感じまで作成しました。 今回は、ボタンをクリックすると「Quest進捗」「Ex」「Gold」の ゲージ及び数値が変わるところを行って行きたいと思います。 対象DOM取得 対象となるDOMを取得するための記述を行います。 HTML <ul class="statusLi"> <li class="lv">Lv:<span class="val">1</span></li> <li class="quest">Quest進捗:<span class="Gauge"><b style=
HTML5 Webストレージでデータを保存 その5（なんちゃってソーシャルゲーム・Lv、Gold編）
前回の HTML5 Webストレージでデータを保存 その4（なんちゃってソーシャルゲーム・ゲージ） の続きとなります。 前回までは、以下のデモページの様に デモページ https://www.webcyou.com/?p=4233 クリックすると「Quest進捗」「Ex」「Gold」それぞれの値が10づつ増加しておりました。 「Quest進捗」「Ex」に関しては100%を超えると0%に戻る様に設定しました。 ここでは、「Ex」は経験値のことを表しているので、この値がMAX値になるとLvの値が上がらないといけません。 ということで「Ex」がMAX値になるとLvの値が1つ上がる設定を行います。 LV 前回記述した関数、setStatus関数内にあるif文 if(exVal >= 100){〜〜 に追記していきます。 lv += 1; lvElem.innerHTML = lv; 以上の2行を追
スマートフォン JavaScript タッチ、フリックイベント実装
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。 タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。 フリックとは、画面にタッチし指やペン等をスライドされる動作となります。 このタッチやフリックを操作する際、JavaScriptで取得出来、扱えるイベントは以下の通りとなっています。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend これらのイベントを使い、操作していきましょう。 タッチされた場合のイベント まずは、タッチ出来るエリアの作成です。スマフォン用にviewportを設定します。 HTML <meta n
CSS Media Queries（メディアクエリ）を使用した指定方法
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 CSS Media Queries（メディアクエリ）を使用したデバイスごとの指定方法です。 CSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめ iPhone, iPadなどのモバイル用にスタイルシートの分ける方法です。 スタイルシートの分け方は ※プロパティ単位 ※ファイル単位 の2種類になります。 プロパティ単位でデバイスごとにスタイルシートを設定 スマートフォン（縦長・横長） @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } スマートフォン（横長） @media only screen and (mi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
