※スマホ対応はしてません。

iPhone向けサイト開発に便利なiOSシミューレーターのインストール方法。あと使い方やTipsとか。

カテゴリー: Web, 開発環境

iPhone版のサイトを製作する手順ってどうしてますか。いちいちサーバーにアップロードして実機で確認して、問題があれば修正してアップロードして確認して……って面倒ですよね。

そんなときはシミューレーターです。Macでシミューレーターを起動すると、ローカルファイルにアクセス出来ます。またインスペクター(開発者ツール)を使ってPC版の開発のようにデバッグも行えます。

さくっとインストールしてみましょう!

なお公式に配付されているのはMac版のみです。あとMac OSのバージョンが古いと利用できません。

インストール手順

こういう順序です。

  1. Apple Xcodeをインストールする(無料)
  2. iOSシミューレーターを探す
  3. 起動する

Xcodeをインストールする

(続きを読む…)

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。

カテゴリー: JavaScript

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。

フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。

基本的な流れ

  1. フォームのsubmitを拾う
  2. 通常の送信はキャンセル
  3. 送信ボタンを無効化
  4. 送信先URLやフォームの入力値を取得
  5. 送信
  6. 受信後、送信ボタンを戻す

入力値をどう得るか、というのがポイントかと思います。

送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。

デモ

なんかお問い合わせフォーム的なものを用意しました。

まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

(続きを読む…)

CSS3のtransformを素敵に扱えるjQueryプラグインを作った。

カテゴリー: JavaScript

ダウンロード

なにこれ?

CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。

transform

transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は

transform: scale(.8) rotate(-30deg);

のような指定になります。

詳しくはこのあたりとか。

jQuery + transformの問題点

(続きを読む…)

君は世界最速、最軽量のVanilla JSを知っているか。

カテゴリー: JavaScript

jQueryより軽量なZepto.jsよりもよっぽど軽量なVanilla JSの紹介です。

(この記事は誤解を招きやすい箇所が含まれているので、よく注意して読んでくださいね。)

公式サイト

Vanilla JS
http://vanilla-js.com/

Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.

(続きを読む…)

サーバーサイドエンジニアのためのJavaScript入門、やります。

カテゴリー: JavaScript

(追記: 2013-04-20)

延期後の日程が決まりました。05/18(土)に開催致します。時刻や内容は同じです。

前回参加者を優先するため、参加登録の方法は23日(火)の12:00頃に公開します。何卒ご容赦くださいませ。

(追記: 2013-04-05)

延期します。

樹木が根こそぎ飛ばされ、走行中のトラックが横転するくらいの風が吹くおそれも』との事なので、前日の連絡で申し訳ないのですが、今回はいったん中止とさせて頂きます。

また日程を改め実施したいと考えております。日程が決まりましたら別にATNDを立て、また今回ご登録頂いた方にはATNDのメッセージで連絡させて頂きます。

よろしくお願い致します。


いろいろあって告知が遅れてしまったのですが、いよいよ告知します。

タネマキにて。

なお日程が当初の予定(3/16)から変更になっております。 16日で予定調整してくださった方、おられましたら本当にすみません……。

概要

普段サーバー側のプログラム、PHPやらRubyやらPerlやらを書いている方々向けに、JavaScriptの基本的なところ、サーバー側とは異なる思想の紹介、家に帰ってすぐ使える実例なんかをお話したいと思います。

内容が非フロントの方向けに、という事です。なので別にサーバー側の方でなくても、例えばネイティブアプリを作っておられるような方でも構いません。 if 文みたいなプログラミングの基礎はお話ししませんよーって話です。

あ、勉強会じゃなくて有料の講習会です。あと、手を動かすより話を聞いて頂く時間が長めになりそうな予感です。(本当は手を動かして頂きたいんだけど……。)

内容

  • サーバー側の言語とJavaScriptの違い
  • jQueryとは
  • JavaScriptを取り巻く技術
  • ダイアログ、ドラッグ&ドロップ、リアルタイム更新……よくあるUI
  • 移動、拡大縮小、フェードアウト……よくあるエフェクト
  • JavaScriptのデバッグ方法
  • Ajaxで実装する、画面遷移のないCRUD
  • あと何か習作

テキスト等はありません。講義後にスライド(PDF)のダウンロードURLをお知らせします。

※予定です。当日までに変わる可能性があります。

詳細

(続きを読む…)