iPadでスワイプ / jQueryゼロから

By どめ | Published: 2012年5月18日

ちょっと特殊だけど、iPadでスワイプ処理を自分で書くことがあったので。
たぶんGalaxyでもあんまり変わらないはず。

タッチイベントは touchstart, touchend, touchmove で拾えます。
touchmove の際に event.touches に座標が入ってます。
配列なのは5つまでデータが入っているから。
今回は、ただのスワイプなので touches[0] だけ使います。

とりあえず座標を拾ってみます。

1
2
3
// touchmove で座標を拾う
X = event.touches[0].pageX;
Y = event.touches[0].pageY;

サンプル ※iPadで見てください

touches には pageX, pageY, screenX, screenY, clientX, clientY があり、ページやスクリーンの相対座標として取得できます。
画面を固定する場合は特に変わりはないですが、スクロールする場合は使い分けが必要です。
※pageX, pageYはスクロールする場合は指に追従してページも移動するので

とりあえず、touchstart と touchend の時の座標の差でスワイプを判定してみます。
X方向に100px動いたらスワイプします。※値は適当です

1
2
3
4
5
6
// touchendで判定
if (startX - endX > 100) {
// prev
} else if (endX - startX > 100) {
// next
}

サンプル

これでもスワイプは出来るのですが、いくつか問題があるのでもう少し調整してみます。
・縦(斜め)にスワイプしても横移動が100px以上ならスワイプするのをやめる
→ touchstart と touchend の確度を小さくする(2点を結ぶ直線の傾きが0.5以下としてみる)
・速度が遅くてもスワイプするのをやめる
→ 0.7秒以内のみスワイプとする
・iPadだと画面がズレる(指に追従する)のをやめる
→ よく使われている方法を参考に preventDefault でブラウザの挙動を無視する

サンプル

Posted in jQuery, Mobile | Leave a comment

LLCの作り方

By どめ | Published: 2012年2月3日

とりあえず作るだけなら簡単なので手続系からまとめておきます。
まずは前提としてウチはこんな感じの企業です。

  • Web制作企業
  • メンバーは3人(デザイナ、マークアップエンジニア、プログラマ)
  • 全員フリーランスあがり

フリーランスから法人にしたのはよく一緒に仕事してるからというのと、有限責任かな。
株式会社じゃなく合同会社なのは、株主総会がいらないとか手続が安いからというのもあるけど、新しい会社法から追加されたので単に興味というのが大きかったりします。制作の悪いクセで試しにやっちゃおうと。

以下、手続きする際にやったことです。(やった順)

会社名を決める
法務局で似たような社名がないか検索できる端末があります。最近は登記する住所や業種が違えば同じ名前でも良いみたいです。
ただ、社名で検索上位に表示させたいなら競合は避けたいところです。
サーバ、ドメイン契約
業種柄、すぐ出来るので登記前に取って準備しました。co.jpは登記必要なので後から取りました。
会社ロゴ、コーポレートカラー決定
こういう場合、メンバーにデザイナいると早いです
名刺作成
早めに配れるに越したことはないので。登記前からフリーランス時代のお客さんに名刺持って営業行きました。
設立までのスケジュールを立てる
半年計画くらいで、割りとゆっくり計画立てました。フリーランスの仕事しながらだったので。
起業経験者に話し聞いたりアドバイスもらったりしました。やむを得ず会社たたんだ人の方が参考になるかも。
定款作成
何事も経験！ということで、ネット見ながら自分たちで定款作りました。(登記は行政書士さんに頼んだので定款もやってもらうのが早いです)
ついでに契約書などの書類もつくりました。
Webサイト作成
同時にWebサイトもつくりました。
シェアオフィスを借りる
登記に住所必要なので、まずは代表個人で手続きします。シェアオフィス co-lab でフレックス(席はフリーアクセスで会議室が使用可能)に登録しました。Web制作なので基本自宅作業で会議の時に使用してますが、いろんな人達がいるのでもっと活用したいです。
行政書士さんに依頼
知人に行政書士さんを紹介してもらい、指示に従って進めていきます。
資本金の準備
行政書士さんに指示されてから代表の口座に振り込みます。(日付も関連するので、うっかり前もって振り込んでやり直したりしましたw)
社印をつくる
ネットで3点セットとかで作れます。あとゴム印つくったけど、あんまり使ってないです…
陰影はデジタルでもらえたりするのでPDFで請求書とか出す時に使えます。(クライアントによるけど書面でなくて済むので)
各種登記書類の用意
行政書士さんの指示に従いました。 

  • 合同会社設立登記申請書
  • 代表の就任承諾書
  • 代表者印決定書
  • 資本金の額の計上に関する証明書
創業計画書作成
行政書士さんに進めてもらいつつ、同時進行で創業計画書作成。そんなしっかりしたものではないけど、会社としてどんな仕事をしていくか日付つきで計画立てたり、家賃やサーバ代など月々の経費と自分たちの給与から月いくら稼がなきゃなのか試算しました。フリーランスも兼業なので無難な目標にしたけど、最初で攻めた方が良いです。どうせ思い通りになんて行かないので。
払込証明書作成
代表の口座に振り込んだ資本金の通帳コピーに法人代表者印を押します。あとは行政書士さんに手続きしてもらい、審査の通過待ち。
一発ですんなり通ったので、後からもっとイロイロ試せば良かったかなと思ったり。
法人口座の用意
Web制作だしネット銀行にしてみようかと思い楽天銀行で口座作成。念のためゆうちょ銀行もつくりました。
結果から言えば、社保の引き落としができないので、作れそうならメガバンク、東京都民銀行とかの自銀が良いです。(社保は日銀の代理店でないと取り扱えないので楽天銀行は出来ないそうな)
融資を受けるつもりなら貸してくれそうな銀行で。メガバンクはそもそも作れなかったりすることも…
登記申請
法務局に登記申請、印鑑登録して印鑑カードをもらいます。ここも行政書士さんに手続きしてもらいました。
税務署、都税事務所に申請
ここで国税の納付とかで使う整理番号とかもらいます。毎月の給与源泉を半年に1回(1/10, 7/10)に出来る、納期の特例があるので申請しとくと楽。外注さんの報酬源泉は払った月の翌10日までなので、こちらは毎回払いに行きます。普通の銀行窓口で出来るので、会社の口座関係なく最寄りの銀行に行けば良いです。

あとは毎月の経理も自分でやろうとするとなかなかに大変なんですが、それはまたの機会に。

Posted in ゆるぶ活動 | Leave a comment

画像をプリロード / jQueryゼロから

By どめ | Published: 2012年1月9日

画像のプリロードは前にもやったんだけど少し小技をはさんでみた。
プリロードしたって間に合わん時は間に合わんので、せめて見栄えが悪くないようにしようかってはなしです。

下記の感じで画像のプリロード時に読み込み完了後の処理を指定しちゃいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imagePath = '/images/';
var preloadImages = [
    'ooo.jpg',
    'xxx.jpg',
    '***.jpg'
];
var images = [];

(function($){
    for (var i = 0; i < preloadImages.length; i++) {
        var image = new Image;
        image.src = imagePath + preloadImages[i];
        images.push($(image).hide());
        (function(i){
            image.onload = function(){
                images[i].fadeIn();
            };
        })(i);
    }
})(jQuery);

読み込みが間に合わなかった時のために画像は hide() で非表示にして、image.onload で読み込み完了時の動作を指定しました。
※今回だとfadeInさせてます

サンプル

Posted in jQuery | 1 Comment

カスタムフィールド使ってみる / よくあるWordPress

By どめ | Published: 2012年1月8日

カスタムフィールドでやりくりした時のメモ。

お客さんに使ってもらう時は管理画面ライクなインターフェイスにしたいのでプラグインのカスタムフィールド・テンプレートを使ってます。
使い方はこちらが詳しいです。
http://39kn.com/2011/05/30/5486/

ということでPHPでテンプレ側の処理を。
カスタムフィールド・テンプレート使った場合はショートコードがあるんだけど、普通の人に使ってもらうにはわかりにくいのでテンプレ側で処理します。

カスタムフィールドのデータはget_post_customで連想配列で取得できます。

1
2
3
4
5
6
7
8
9
10
$custom = get_post_custom();

foreach ($custom as $key => $value) {
    if (substr($key, 0, 1) == '_') {
        continue;
    }
    switch ($key) {
        case ...
    }
}

同じ名前で複数登録できるので一旦取り出したほうがイイかも。
ただ、foreachだと余計な変数入ってるので、「_」で始まるものは除外しとく。
カスタムフィールド・テンプレート使っててもデータは同様に取得できます。

Posted in WordPress | Leave a comment

jQueryゼロから / ナビ付きスライドショー

By どめ | Published: 2011年11月3日

前回のスライドショーによくあるナビつけてみることに。
任意の写真をクリックで選べるようにします。

ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。
アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var interval;
// スライド再生
function startSlide(wait){
    wait = wait | 0;
    var intervalTime = 3000;
    setTimeout(function(){
        interval = setInterval(function(){
            // アニメーション処理
        }, intervalTime);
    }, wait);
}

// スライド停止
function stopSlide(){
    clearInterval(interval);
}

ナビのロールオーバーとかはJavaScriptのイベントじゃなく、CSSで設定するようにしました。
あとは意外にそんな前のと変わらんので、jQueryのプラグインにして、$(セレクタ).slide(オプション) でスライドショーになるようにしてみた。
サンプル

ナビ付きスライドショー – jsdo.it – share JavaScript, HTML5 and CSS

Posted in jQuery | 1 Comment

よくあるWordPress / 投稿の最初か最後を判定する

By どめ | Published: 2011年10月15日

投稿を一覧表示する際にデザイン上、リストの最初と最後が必要なときに。
記事ループ内だと $wp_query を使って下記のように判定します。
※テンプレ内で使用することを想定

1
2
3
4
5
6
<?php if ($wp_query->current_post === 0) : ?>
    <li class="first">
<?php elseif ($wp_query->current_post === $wp_query->post_count - 1) : ?>
    <li class="last">
<?php endif; ?>
...

自分で一覧取ってくる時もWP_Queryで取得していればだいたい同じ。

1
2
3
4
5
6
7
8
9
10
11
<?php
$result = WP_Query(array('posts_per_page' => 10)); // 適宜欲しい内容を取得
while ($result->have_posts()) {
    $result->the_post();
    if ($result->current_post === 0) {
        echo '<li class="first">';
    } elseif ($result->current_post === $feed->post_count - 1) {
        echo '<li class="last">';
    }
...
}
Posted in WordPress | Leave a comment

よくあるWordPress / トップを固定ページにした時に投稿一覧を表示するには

By どめ | Published: 2011年10月14日

すげえ基本的なことなんだけど、忘れちゃうのでメモ。
CMSとして使う時にトップページはWordPressの固定ページにしたいんだけど、デフォルトのトップはお知らせ一覧として使いたいよって時の設定方法。
結果から言うと、基本機能で出来るんだけどテンプレートで解決しようとして迷わないように。

まずは、固定ページ機能から「トップページ」と「お知らせ一覧ページ」(デフォルトトップの投稿一覧を使いたいページね)を作成します。
トップはそれなりに作るとして、お知らせ一覧は本文は無視されるのでブランクで良いす。

WordPress管理画面の「設定 → 表示」にあるフロントページの表示を下記のように設定します。

そうなのよね、単に「投稿ページ」の所に設定するとそこがこれまでのトップと同様に投稿一覧を表示してくれるようになるのね。
トップを固定ページに差し替えるのはよくやってたけど、こちらは見逃してたわ。

Posted in WordPress | Leave a comment

JavaScript で cron ちっくに指定時間で実行

By どめ | Published: 2011年9月26日

毎時0分に実行、みたいな処理したいなと思って調べた。
jsCron というのがよく使われているみたい。
cronちっくに 0 * * * * Function() のように指定するとその時間に実行する、と。
jsCron, portando Cron a Javascript | aNieto2K

ソース見てみると setInterval で現在時刻をチェックして、指定時間と一致するなら実行、という感じ。
定期的に時刻指定で実行するときは参考に。

応用してこんなのも。
サンプル (HTML5 audioでチャイム鳴らす)

下記は簡単なサンプル。(00秒に赤い★が表示されるだけ)
一秒以下の誤差はざっくりと無視してます。

JavaScriptで毎時実行 – jsdo.it – share JavaScript, HTML5 and CSS

Posted in HTML5, jQuery | Leave a comment

HTML5 / Audio 定期的に再生する

By どめ | Published: 2011年9月19日

あんまり利用しないケースかもだけど audio 再生で同じ音を繰り返し再生する時にちょっとした使い分けを。

まずは普通に audio 読み込み。

1
2
3
4
5
6
7
8
9
10
11
12
try {
  var audio = new Audio('');
  if (audio.canPlayType('audio/ogg') {
    audio.src = 'chime.ogg';
  } else if (audio.canPlayType('audio/mp3') {
    audio.src = 'chime.mp3';
  } else {
    throw('非対応');
  }
} catch(e) {
  alert('非対応');
}

これを例えば定期的に同じ音を再生しようと下記のようにします。

1
2
3
setInterval(function(){
  audio.play();
}, 1000);

この時、繰り返し間隔が短い場合、再生中の音が終わるまでは次の音は再生されません。
これを意図的に音を中断して、再生したい場合は下記のようにします。

1
2
3
4
setInterval(function(){
  audio.load();
  audio.play();
}, 1000);

audio.load() で初期状態にリセットされるので、また先頭からの再生になります。
audio.currentTime = 0; という方法もあるけれど、一度も再生されていない時に使用すると firefox でエラーとなるみたい。
この時、audio.mute や audio.volume はそのまま。

Posted in HTML5 | Leave a comment

続・jQueryの書き方

By どめ | Published: 2011年8月16日

ノンプログラマに jQuery のおまじない部分でつまずくと言われたのと、自分も少し使い分けが整理できてきたのでまとめてみる。意外とルーブとか条件判定は悩まんけど、その前後にあるごにょごにょした部分がひかかるのだとか。

誤解を恐れずにまとめると JavaScript はグローバル変数を汚染しやすく、コンフリクトしたら嫌なので回避しようぜってコトよね。
んで、その書き方がいくつかありますよと。

<head> タグ内でサクッと済ませたい時

1
2
3
jQuery(function($){
    // $('#id').click() とかココに書いてく…
});

Onload前に実行したい場合にこう書いてます。
<head> タグ内だけじゃなく別ファイルでも使えるけど、ちょっと試したい時とか、簡単な処理の時によく使うかな。

$(function(){…}); って書き方もあるけど、古くは prototype.js と競合したり、気が付けばWordPressのデフォルトで呼ばれる jQuery が noConfrict になってて使えなかったりするので、こう書くようにしてます。
また、noConfrict をあえて宣言して $ を使わず、$j = jQuery; として置き換えたり、潔く全て jQuery(…) で書いてもいいんだけど、$ で書くのが手軽だし最初にこう書くだけで、その中ではいつも通りというのが楽なんよね。

先読みするファイル内で jQuery 使いたい時

1
2
3
(function($){
    // $('#id').click() とかココに書いてく…
})(jQuery);

自前の関数とかでも jQuery 使いたい時とか。別ファイルだと読み込みのタイミングで評価されるので、実行部分よりも関数とかあらかじめ指定する時によく使うかな。
(function(){})(); って書き方は function ooo(){…} 的な指定と ooo(); って実行をまとめて書いてるだけです。これに引数として jQuery を渡して、内側では $ で記述できるようにしてます。

あ、でも、関数定義して他の js ファイルからもこれを利用したい場合は、そのままでは使えません。その場合は、下記のようにしてあえてグローバルにしたりします。

1
2
3
4
5
6
(function($){
    function ooo(){
        ...
    }
    window.ooo = ooo;
})(jQuery);

※蛇足かも…

jQuery のプラグイン

1
2
3
jQuery.fn.ooo = function(){
...
};

これプラグイン書かないと使わないので、なんでこんな書き方なんだという説明だけしとく。
jQuery も当たり前にコンフリクト対策してあって、グローバル変数は jQuery と $ しか使わないように工夫されてます。プラグインであってもこのルールに乗っかれるようになってて、jQuery.fn.ooo のように指定すれば、$(‘#id’).ooo() といった統一の書き方になるように作られてます。

たまにコンフリクト考えてなくて $.fn.ooo から書かれてるプラグインあったりするので、その場合は2番目の方法でプラグイン指定を囲んでやると良いす。一行目に (function($){ 、最後の行に })(jQuery); って書けばうまく行く事もあれば、行かない事もあるよ。

あ、ちなみに JavaScript では下記2つは大体同じ意味です。
※厳密には評価されるタイミングが違う

1
2
3
4
5
6
7
function ooo() {
...
}

var ooo = function(){
...
};

うーん、あんまりまとまってないかな？
んでも、書き方はイロイロあるけど簡潔に書かれてるものが好まれてるだけと思う。

Posted in jQuery | Leave a comment

  • Ads