[iOS][Apple Watch] 錬金術師のレシピのApple Watch開発から申請まで3

MetaData rejectされました

CFBundleDisplayNameを変更しましたが、
CFBundleNameも変更する必要がありそうです。

これで再審査だしてみます。

[iOS][Apple Watch] 錬金術師のレシピのApple Watch開発から申請まで2

MetaData rejectされました
プロジェクト名とアプリ名が違わない場合あまり起きないとおもわれる。
Rejectメッセージが丁寧になって、どうすればいいかまで書いてあってすごく助かります。

3.4 - App names in iTunes Connect and as displayed on a device should be similar, so as not to cause confusion
に引っかかったようです。

ちゃんと、リストまで表示してくれています。
- Name on the App Store: Alchemist's Recipe
- Name displayed on iPhone: Alchemist's
- Name displayed on Apple Watch companion app: omoikane
- Name displayed on Apple Watch: Alchemist's

はじめ、
Name displayed on iPhoneは、長いので短くした表示名まで、合わせなくてはいけないようになったかと
焦りましたが、
これは、リリース時から通っているのでsimilarであると信じ
- Name displayed on Apple Watch companion app: omoikane
だけ修正をいれて審査にだしました。
InfoPlist.stringを追加して、CFBundleDisplayNameを定義（En,ja）

extensionのアプリ名までちゃんとしないといけないと思いませんでした。


これで再審査だしてみます。

*プロジェクト名：omoikane(オモイカネ)は、知恵の神様です。

[iOS][Apple Watch] 錬金術師のレシピのApple Watch開発から申請まで

「錬金術師のレシピ」にApple Watch対応の開発から申請までの困ったこと(ISSUE)。

[開発]
１、iOS6対応の古いソースに追加してよいのかわからなかった。
　　追加可能だった。
２、xcode6.3.1を使用すると、apple watchがbuildできない。
    IPHONEOS_DEPLOYMENT_TARGET = 8.3;を４箇所「8.2」にかえてやる必要がある
　　 watch OSが8.2でiOSのバージョンより下なのが問題なのだろう。
３、Objectiv-Cで作成したが、WEBで検索するとサンプルがswift.
４、アプリ名のローカライズ
　　InfoPlist.stringでAppleWatchもアプリ名が指定できる
５、アイコンのサイズがpt単位
　　基本２倍のpxで、@3指定のものはptを３倍にすればOK.
　　形式でアルファチャンネルをいれないようにする。
　　対応したつもりでアップロードしたら、メールでアルファチャンネルはいっているよ。って送られてきた。

[申請]
１、Watch Kit,ExtensionともにAppidを作成して、プロビジョニングを作成する必要がある
　　開発段階だと気にしなくてよく、アーカイブもできるけど、いざアップロードしようとすると失敗する
２、5.5,4.7インチのスクリーンショットが、画面サイズに対応すると必須になった

とりあえず審査待ち状態になった。

HagaoitaのAndroid側のメモ

Ajaxでアクセスしたものに対して途中で、自分の好きなものを返す。
キャッシュされたデータ、写真とか返すとかに使われる手法。
(Android開発者登録したから、リリースしたいな。)

public class MainActivity extends ActionBarActivity {

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView)findViewById(R.id.webView);
        webView.setWebViewClient(new MyWebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
       //これがないとlocalファイルでajaxできない
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.loadUrl("file:///android_asset/index.html");
    }
}

public class MyWebViewClient extends WebViewClient{


    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        Log.d("#WEB", "aa111:"+url);
        if(url.indexOf("7777")>0){
            Log.d("#WEB", "aa111:IN");
            InputStream bais = new ByteArrayInputStream("{'Hello':'test'}".getBytes());
            WebResourceResponse res = new WebResourceResponse("application/json","UTF-8",bais);

            return res;
        }
        return super.shouldInterceptRequest(view, url);
    }

    @Override
//本当はこっちがつかわれるはずなんだけど、この先でまだ、上のほうがつかわれている
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return super.shouldInterceptRequest(view, request);
    }
}

環境構築してみた

sass:ある程度覚えた
compass:イマのところ、つかいどころなし
coffeescript: 楽しい部分もあるけど、微妙
gulpでタスクをいれるとすごくいい

browser-syncは、
変更ファイルがあるとその部分を配信更新してくれるので、
iphoneやシュミレータで、つくるときに、webkitやwebViewで一旦は、browser-syncのサーバでリモートでアクセスしながら作成できるので、形にできそうな気がします。その変更ソースは、iphoneの配信ソースそのままで良いので、リビルドなしである程度いけるというのが素晴らしい。

{
  "name": "javascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.6.4",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-plumber": "^1.0.0",
    "gulp-sass": "^1.3.3",
    "gulp-uglify": "^1.2.0"
  }
}

[ratchet] 次のステップ

一通りjsを確認したので、次のステップとして、

　1,CSSをみる
  2,POPサンプルのすごく簡易版をつくる
  3,リストでスワイプしたら削除ボタンがでる

とかをやってみたいと思う。

[ratchet] push.jsをみる

今まで以上にながいけど、ひととおり目を通す。 - sessionStrageにデータを保持 - histをしっかり書き換える もっと簡易なものをサンプルとしてかいてみると、もっと理解できそう。

/* ========================================================================
 * Ratchet: push.js v2.0.2
 * http://goratchet.com/components#push
 * ========================================================================
 * inspired by @defunkt's jquery.pjax.js
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

/* global _gaq: true */

!(function () {
  'use strict';

// no oprationとかの略かな？

  var noop = function () {};


  // Pushstate caching
  // ==================

  var isScrolling;
  var maxCacheLength = 20;
/*
Web Storage
 sessionStorage(ウィンドウやタブを閉じるまで)
 localStorage(永続的)
*/
  var cacheMapping   = sessionStorage;
  var domCache       = {};
  var transitionMap  = {
    slideIn  : 'slide-out',
    slideOut : 'slide-in',
    fade     : 'fade'
  };

  var bars = {
    bartab             : '.bar-tab',
    barnav             : '.bar-nav',
    barfooter          : '.bar-footer',
    barheadersecondary : '.bar-header-secondary'
  };

  var cacheReplace = function (data, updates) {
    PUSH.id = data.id;
    if (updates) {
      data = getCached(data.id);
    }
    cacheMapping[data.id] = JSON.stringify(data);
/*
現在の履歴エントリの URL または state オブジェクトを更新する
*/
    window.history.replaceState(data.id, data.title, data.url);
/*
子ノードも含めてクローンしたものを保持
*/
    domCache[data.id] = document.body.cloneNode(true);
  };

/*
キャッシュにpushしている（データを追加している）
*/
  var cachePush = function () {
    var id = PUSH.id;

    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');

    cacheBackStack.push(id);
/*
全部削除
*/
    while (cacheForwardStack.length) {
      delete cacheMapping[cacheForwardStack.shift()];
    }
/*
指定数を超えたら、古いものから削除
*/
    while (cacheBackStack.length > maxCacheLength) {
      delete cacheMapping[cacheBackStack.shift()];
    }

/*
遷移なしで履歴を追加
*/
    window.history.pushState(null, '', cacheMapping[PUSH.id].url);

/*
作り直したものを保持
*/
    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
  };


/*
キャッシュにpopしている（データを(取り出して)削除している）
*/
  var cachePop = function (id, direction) {
    var forward           = direction === 'forward';
    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
    var pushStack         = forward ? cacheBackStack    : cacheForwardStack;
    var popStack          = forward ? cacheForwardStack : cacheBackStack;

/*
すこし気になる部分、使う箇所によって意味がすごくかわる
*/
    if (PUSH.id) {
      pushStack.push(PUSH.id);
    }
    popStack.pop();

    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
  };

  var getCached = function (id) {
    return JSON.parse(cacheMapping[id] || null) || {};
  };



  var getTarget = function (e) {
//今までみてきたものと同じ、イベント発生部分をAタグで検索
//Aタグに何かをかぶせたりして、先にイベントを取っちゃうのをかんがえているのかな。
    var target = findTarget(e.target);

    if (!target ||
        e.which > 1 ||
        e.metaKey ||
        e.ctrlKey ||
        isScrolling ||
        location.protocol !== target.protocol ||
        location.host     !== target.host ||
        !target.hash && /#/.test(target.href) ||
        target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') ||
        target.getAttribute('data-ignore') === 'push') { return; }

    return target;
  };


  // Main event handlers (touchend, popstate)
  // ==========================================

  var touchend = function (e) {
    var target = getTarget(e);

    if (!target) {
      return;
    }

    e.preventDefault();

    PUSH({
      url        : target.href,
      hash       : target.hash,
      timeout    : target.getAttribute('data-timeout'),
      transition : target.getAttribute('data-transition')
    });
  };

  var popstate = function (e) {
    var key;
    var barElement;
    var activeObj;
    var activeDom;
    var direction;
    var transition;
    var transitionFrom;
    var transitionFromObj;
    var id = e.state;

    if (!id || !cacheMapping[id]) {
      return;
    }

    direction = PUSH.id < id ? 'forward' : 'back';

    cachePop(id, direction);

    activeObj = getCached(id);
    activeDom = domCache[id];

    if (activeObj.title) {
      document.title = activeObj.title;
    }

    if (direction === 'back') {
      transitionFrom    = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
      transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
    } else {
      transitionFromObj = activeObj;
    }

    if (direction === 'back' && !transitionFromObj.id) {
      return (PUSH.id = id);
    }

    transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;

    if (!activeDom) {
      return PUSH({
        id         : activeObj.id,
        url        : activeObj.url,
        title      : activeObj.title,
        timeout    : activeObj.timeout,
        transition : transition,
        ignorePush : true
      });
    }

    if (transitionFromObj.transition) {
      activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
      for (key in bars) {
        if (bars.hasOwnProperty(key)) {
          barElement = document.querySelector(bars[key]);
          if (activeObj[key]) {
            swapContent(activeObj[key], barElement);
          } else if (barElement) {
            barElement.parentNode.removeChild(barElement);
          }
        }
      }
    }

    swapContent(
      (activeObj.contents || activeDom).cloneNode(true),
      document.querySelector('.content'),
      transition
    );

    PUSH.id = id;

    document.body.offsetHeight; // force reflow to prevent scroll
  };


  // Core PUSH functionality
  // =======================

  var PUSH = function (options) {
    var key;
    var xhr = PUSH.xhr;

    options.container = options.container || options.transition ? document.querySelector('.content') : document.body;

    for (key in bars) {
      if (bars.hasOwnProperty(key)) {
        options[key] = options[key] || document.querySelector(bars[key]);
      }
    }

    if (xhr && xhr.readyState < 4) {
      xhr.onreadystatechange = noop;
//処理を止める
      xhr.abort();
    }

    xhr = new XMLHttpRequest();
    xhr.open('GET', options.url, true);
    xhr.setRequestHeader('X-PUSH', 'true');

    xhr.onreadystatechange = function () {
      if (options._timeout) {
        clearTimeout(options._timeout);
      }
      if (xhr.readyState === 4) {
        xhr.status === 200 ? success(xhr, options) : failure(options.url);
      }
    };

    if (!PUSH.id) {
      cacheReplace({
        id         : +new Date(),
        url        : window.location.href,
        title      : document.title,
        timeout    : options.timeout,
        transition : null
      });
    }

    if (options.timeout) {
      options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
    }

    xhr.send();

    if (xhr.readyState && !options.ignorePush) {
      cachePush();
    }
  };


  // Main XHR handlers
  // =================

  var success = function (xhr, options) {
    var key;
    var barElement;
    var data = parseXHR(xhr, options);

    if (!data.contents) {
      return locationReplace(options.url);
    }

    if (data.title) {
      document.title = data.title;
    }

    if (options.transition) {
      for (key in bars) {
        if (bars.hasOwnProperty(key)) {
          barElement = document.querySelector(bars[key]);
          if (data[key]) {
            swapContent(data[key], barElement);
          } else if (barElement) {
            barElement.parentNode.removeChild(barElement);
          }
        }
      }
    }

    swapContent(data.contents, options.container, options.transition, function () {
      cacheReplace({
        id         : options.id || +new Date(),
        url        : data.url,
        title      : data.title,
        timeout    : options.timeout,
        transition : options.transition
      }, options.id);
      triggerStateChange();
    });

    if (!options.ignorePush && window._gaq) {
      _gaq.push(['_trackPageview']); // google analytics
    }
    if (!options.hash) {
      return;
    }
  };

  var failure = function (url) {
    throw new Error('Could not get: ' + url);
  };


  // PUSH helpers
  // ============

  var swapContent = function (swap, container, transition, complete) {
    var enter;
    var containerDirection;
    var swapDirection;

    if (!transition) {
      if (container) {
        container.innerHTML = swap.innerHTML;
      } else if (swap.classList.contains('content')) {
        document.body.appendChild(swap);
      } else {
        document.body.insertBefore(swap, document.querySelector('.content'));
      }
    } else {
      enter  = /in$/.test(transition);

      if (transition === 'fade') {
        container.classList.add('in');
        container.classList.add('fade');
        swap.classList.add('fade');
      }

      if (/slide/.test(transition)) {
        swap.classList.add('sliding-in', enter ? 'right' : 'left');
        swap.classList.add('sliding');
        container.classList.add('sliding');
      }

      container.parentNode.insertBefore(swap, container);
    }

/*
以下遷移に合わせのアニメーション動作
*/
    if (!transition) {
      complete && complete();
    }

    if (transition === 'fade') {
      container.offsetWidth; // force reflow
      container.classList.remove('in');
      var fadeContainerEnd = function () {
        container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
        swap.classList.add('in');
        swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
      };
      var fadeSwapEnd = function () {
        swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
        container.parentNode.removeChild(container);
        swap.classList.remove('fade');
        swap.classList.remove('in');
        complete && complete();
      };
      container.addEventListener('webkitTransitionEnd', fadeContainerEnd);

    }

    if (/slide/.test(transition)) {
      var slideEnd = function () {
        swap.removeEventListener('webkitTransitionEnd', slideEnd);
        swap.classList.remove('sliding', 'sliding-in');
        swap.classList.remove(swapDirection);
        container.parentNode.removeChild(container);
        complete && complete();
      };

      container.offsetWidth; // force reflow
      swapDirection      = enter ? 'right' : 'left';
      containerDirection = enter ? 'left' : 'right';
      container.classList.add(containerDirection);
      swap.classList.remove(swapDirection);
      swap.addEventListener('webkitTransitionEnd', slideEnd);
    }
  };

/*
push完了通知
*/
  var triggerStateChange = function () {
    var e = new CustomEvent('push', {
      detail: { state: getCached(PUSH.id) },
      bubbles: true,
      cancelable: true
    });

    window.dispatchEvent(e);
  };

  var findTarget = function (target) {
    var i;
    var toggles = document.querySelectorAll('a');

    for (; target && target !== document; target = target.parentNode) {
      for (i = toggles.length; i--;) {
        if (toggles[i] === target) {
          return target;
        }
      }
    }
  };

  var locationReplace = function (url) {
    window.history.replaceState(null, '', '#');
    window.location.replace(url);
  };

  var extendWithDom = function (obj, fragment, dom) {
    var i;
    var result = {};

    for (i in obj) {
      if (obj.hasOwnProperty(i)) {
        result[i] = obj[i];
      }
    }

    Object.keys(bars).forEach(function (key) {
      var el = dom.querySelector(bars[key]);
      if (el) {
        el.parentNode.removeChild(el);
      }
      result[key] = el;
    });

    result.contents = dom.querySelector(fragment);

    return result;
  };

  var parseXHR = function (xhr, options) {
    var head;
    var body;
    var data = {};
    var responseText = xhr.responseText;

    data.url = options.url;

    if (!responseText) {
      return data;
    }

/*
取ってきたデータを変換している
*/
    if (/]*>([\s\S.]*)<\/head>/i)[0];
      body.innerHTML = responseText.match(/]*>([\s\S.]*)<\/body>/i)[0];
    } else {
      head           = body = document.createElement('div');
      head.innerHTML = responseText;
    }

    data.title = head.querySelector('title');
    var text = 'innerText' in data.title ? 'innerText' : 'textContent';
    data.title = data.title && data.title[text].trim();

    if (options.transition) {
      data = extendWithDom(data, '.content', body);
    } else {
      data.contents = body;
    }

    return data;
  };


  // Attach PUSH event handlers
  // ==========================

  window.addEventListener('touchstart', function () { isScrolling = false; });
  window.addEventListener('touchmove', function () { isScrolling = true; });
  window.addEventListener('touchend', touchend);
  window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} });
  window.addEventListener('popstate', popstate);
  window.PUSH = PUSH;

}());

[Unity][ios][Hagoita] NSURLProtocol を使ったiOS連携のテスト

Unityで出力したProjectでのHagoitaが導入できるかテストしてみました
Hagoita： https://github.com/withstandist/hagoita

今回は、簡単な動作テストのため、HKURLProtocolをカスタマイズしたものを使います。
つまり、普通にNSURLProtocolとUnityの連携になります。
1,Unityで,uGUIでボタンを作成

using UnityEngine;
using System.Collections;

public class buttonAction : MonoBehaviour {

 // Use this for initialization
 void Start () {
 
 }
 
 // Update is called once per frame
 void Update () {
 
 }

 public void ClickTest () {
  Debug.Log ("Clicked.");
  StartCoroutine(Get("http://localhost:7777/test"));
 }

 IEnumerator Get (string url) {
  // 送信開始
  WWW www = new WWW (url);
  yield return www;
  
  // 成功
  if (www.error == null) {
   Debug.Log ("Get Success");
  } else {
   Debug.Log ("Get ERROR");
  }
 }
}

２、HKURLProtocolカスタムを用意

//
//  HKURLProtocol.m
//  Unity-iPhone
//
//  Created by KIMITA Yusuke on 2015/04/09.
//
//

#import "HKURLProtocol.h"

@implementation HKURLProtocol


+ (BOOL)canInitWithRequest:(NSURLRequest *)request{
    NSLog(@"canInitWithRequest");
    return YES;
}


+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request
{
    return request;
}

- (void)startLoading
{
//Alertをだしてみた
    UIAlertView* alert = [[UIAlertView alloc]initWithTitle:@"title" message:@"message" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    [alert show];
    
    [self responseJSONWithHttpStatusCode:200 data:[@"{}" dataUsingEncoding:NSUTF8StringEncoding]];
}

- (void) responseJSONWithHttpStatusCode:(int)statusCode data:(NSData*) data{
    NSDictionary*headers = [NSDictionary dictionaryWithObjectsAndKeys:@"application/json", @"Content-Type",
                            [NSString stringWithFormat:@"%ld",[data length]], @"Content-Length",
                            nil];
    NSHTTPURLResponse* response = [[NSHTTPURLResponse alloc] initWithURL:[self.request URL]
                                                              statusCode:statusCode
                                                             HTTPVersion:@"1.1"
                                                            headerFields:headers];
    
    [self.client URLProtocol:self
          didReceiveResponse:response
          cacheStoragePolicy:NSURLCacheStorageNotAllowed];
    
    [self.client URLProtocol:self didLoadData:data];
    [self.client URLProtocolDidFinishLoading:self];
}

- (void)stopLoading
{
}

@end

3、UnityAppController.mmでNSURLProtocolを登録する

- (void)startUnity:(UIApplication*)application
{
    [NSURLProtocol registerClass:HKURLProtocol.class];

４、結果
できました。
アンドロイドでの同様な仕組みができれば、使い道は広がりそうです。

[Ratchet] sliders.jsをみる

display: inline-block;のスクロール制御で実装されている

/* ========================================================================
 * Ratchet: sliders.js v2.0.2
 * http://goratchet.com/components#sliders
 * ========================================================================
   Adapted from Brad Birdsall's swipe
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict';

  var pageX;
  var pageY;
  var slider;
  var deltaX;
  var deltaY;
  var offsetX;
  var lastSlide;
  var startTime;
  var resistance;
  var sliderWidth;
  var slideNumber;
  var isScrolling;
  var scrollableArea;

  var getSlider = function (target) {
    var i;
//.sliderのしたslide-groupにslideたちがありそれが対象する
    var sliders = document.querySelectorAll('.slider > .slide-group');

    for (; target && target !== document; target = target.parentNode) {
      for (i = sliders.length; i--;) {
        if (sliders[i] === target) {
          return target;
        }
      }
    }
  };

  var getScroll = function () {
    if ('webkitTransform' in slider.style) {
      var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
      var ret = translate3d ? translate3d[1] : 0;
      return parseInt(ret, 10);
    }
  };

  var setSlideNumber = function (offset) {
    var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
    slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
    slideNumber += offset;
    slideNumber = Math.min(slideNumber, 0);
    slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
  };

//初期位置の値のセット
  var onTouchStart = function (e) {
    slider = getSlider(e.target);

    if (!slider) {
      return;
    }

    var firstItem  = slider.querySelector('.slide');

    scrollableArea = firstItem.offsetWidth * slider.children.length;
    isScrolling    = undefined;
    sliderWidth    = slider.offsetWidth;
    resistance     = 1;
    lastSlide      = -(slider.children.length - 1);
    startTime      = +new Date();
    pageX          = e.touches[0].pageX;
    pageY          = e.touches[0].pageY;
    deltaX         = 0;
    deltaY         = 0;

    setSlideNumber(0);

    slider.style['-webkit-transition-duration'] = 0;
  };

  var onTouchMove = function (e) {
    if (e.touches.length > 1 || !slider) {
      return; // Exit if a pinch || no slider
    }

    deltaX = e.touches[0].pageX - pageX;
    deltaY = e.touches[0].pageY - pageY;
    pageX  = e.touches[0].pageX;
    pageY  = e.touches[0].pageY;

    if (typeof isScrolling === 'undefined') {
      isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
    }

    if (isScrolling) {
      return;
    }

    offsetX = (deltaX / resistance) + getScroll();

    e.preventDefault();

    resistance = slideNumber === 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
                 slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;

    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
  };


//Slideを位置に合わせて移動
  var onTouchEnd = function (e) {
    if (!slider || isScrolling) {
      return;
    }

    setSlideNumber(
      (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
    );

    offsetX = slideNumber * sliderWidth;

//cssでアニメーション
    slider.style['-webkit-transition-duration'] = '.2s';
    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';

//Slideイベントを発生
    e = new CustomEvent('slide', {
      detail: { slideNumber: Math.abs(slideNumber) },
      bubbles: true,
      cancelable: true
    });

    slider.parentNode.dispatchEvent(e);
  };


//Eventの紐付け
  window.addEventListener('touchstart', onTouchStart);
  window.addEventListener('touchmove', onTouchMove);
  window.addEventListener('touchend', onTouchEnd);

}());

[Ratchet] segmented-controllersを見る

/* ========================================================================
 * Ratchet: segmented-controllers.js v2.0.2
 * http://goratchet.com/components#segmentedControls
 * ========================================================================
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict';

  var getTarget = function (target) {
    var i;

//modal.js,popover.jsとちがい直接的に指定することで限定している。
    var segmentedControls = document.querySelectorAll('.segmented-control .control-item');

    for (; target && target !== document; target = target.parentNode) {
      for (i = segmentedControls.length; i--;) {
        if (segmentedControls[i] === target) {
          return target;
        }
      }
    }
  };

//touchendEventに紐付け
  window.addEventListener('touchend', function (e) {
    var activeTab;
    var activeBodies;
    var targetBody;
    var targetTab     = getTarget(e.target);
    var className     = 'active';
    var classSelector = '.' + className;

    if (!targetTab) {
      return;
    }

//activeなものを検索
    activeTab = targetTab.parentNode.querySelector(classSelector);

    if (activeTab) {
//一旦削除
//一つしかactiveがない想定（変なhtmlはだめ）
      activeTab.classList.remove(className);
    }

//自分をactiveに
    targetTab.classList.add(className);

    if (!targetTab.hash) {
      return;
    }

//href でターゲットを指定
    targetBody = document.querySelector(targetTab.hash);

    if (!targetBody) {
      return;
    }

// 大きなくくりの中に、各ページが用意されている必要がある
    activeBodies = targetBody.parentNode.querySelectorAll(classSelector);

    for (var i = 0; i < activeBodies.length; i++) {
      activeBodies[i].classList.remove(className);
    }
//activeを一つへ
    targetBody.classList.add(className);
  });

  window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} });
}());

[Ratchet] popoverをみる

/* ========================================================================
 * Ratchet: popovers.js v2.0.2
 * http://goratchet.com/components#popovers
 * ========================================================================
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict'; //厳密モード

  var popover;

/*
Modalと同じ
*/
  var findPopovers = function (target) {
    var i;
    var popovers = document.querySelectorAll('a');

    for (; target && target !== document; target = target.parentNode) {
      for (i = popovers.length; i--;) {
        if (popovers[i] === target) {
          return target;
        }
      }
    }
  };

/*
閉じる
*/
  var onPopoverHidden = function () {
    popover.style.display = 'none';
    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
  };

/*
後ろに薄い背景のこと
*/
  var backdrop = (function () {
    var element = document.createElement('div');
    element.classList.add('backdrop');

/*
backdropをタッチでクローズ処理
*/
    element.addEventListener('touchend', function () {
//element.addEventListener('touchend', function (e) {
      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
      popover.classList.remove('visible');
      popover.parentNode.removeChild(backdrop);
//e.preventDefault(); 
    });

    return element;
  }());

/*
Modalと基本ロジック同じだが、例外処理(try/catch)をしている
*/
  var getPopover = function (e) {
    var anchor = findPopovers(e.target);

    if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
      return;
    }

    try {
      popover = document.querySelector(anchor.hash);
    }
    catch (error) {
      popover = null;
    }

    if (popover === null) {
      return;
    }

    if (!popover || !popover.classList.contains('popover')) {
      return;
    }
    return popover;
  };

/*
PopOverを表示するよう登録
*/
  var showHidePopover = function (e) {
    var popover = getPopover(e);

    if (!popover) {
      return;
    }

    popover.style.display = 'block';
    popover.offsetHeight;
    popover.classList.add('visible');

    popover.parentNode.appendChild(backdrop);
  };

//touchendイベントにbind
  window.addEventListener('touchend', showHidePopover);

}());

[Ratchet] modalをみる

Open modal


  

    
    
Modal
  
  

    
内容
  

href="#myModalexample" と div id="myModalexample" がポイント

/* ========================================================================
 * Ratchet: modals.js v2.0.2
 * http://goratchet.com/components#modals
 * ========================================================================
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict';

/**イベント発生したものが、処理の対象になるか検索する。**/
  var findModals = function (target) {
    var i;
//selecterでelementを検索し、取得
    var modals = document.querySelectorAll('a');

/**
イベント発生したところから、documentに向けて、親に向かって上がっていき、
aタグのリストの中で一致するものを探します。
**/
    for (; target && target !== document; target = target.parentNode) {
      for (i = modals.length; i--;) {
        if (modals[i] === target) {
          return target;
        }
      }
    }
  };

/**表示するモーダルを特定**/
  var getModal = function (event) {
    var modalToggle = findModals(event.target);

    if (modalToggle && modalToggle.hash) {
　 //modalToggle.hashがそのままモーダルのIDとして指定される
      return document.querySelector(modalToggle.hash);
    }
  };


/** touchend イベントにListener登録**/
  window.addEventListener('touchend', function (event) {
    var modal = getModal(event);
    if (modal) {
/**
getModalの時点でcontains('modal')とかの判定もしてよい気もするが、設計上の意味があるかしれないので、留意しておく。
**/
      if (modal && modal.classList.contains('modal')) {
/**
classList.toggleでcssListに'active'がなければ追加、あったら削除する
**/
        modal.classList.toggle('active');
      }
　  //通常事項されるアクションをキャンセルする
　 //この場合ページ遷移
      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
    }
  });
}());

どうやらactiveの追加、削除だけでmodalの動作を実装している
class="modal"
class="modal active"

/*!
 * =====================================================
 * Ratchet v2.0.2 (http://goratchet.com)
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 *
 * v2.0.2 designed by @connors.
 * =====================================================
 */

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
.modal {
  position: fixed;
  top: 0;
  z-index: 11;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;//←

/* //カンマで区切って２つ指定している(-transition) */
  -webkit-transition: -webkit-transform .25s,       opacity 1ms .25s;
     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
          transition:         transform .25s, opacity 1ms .25s;

  -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.modal.active {
  height: 100%;
  opacity: 1; 　//←
  -webkit-transition:  -webkit-transform .25s;
     -moz-transition:    -moz-transform .25s;
          transition:         transform .25s;

  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

[Ratchet] Ratchetをみると決めた

https://github.com/withstandist/hagoita は、webUIだけでなく、Unityとかでもしかしたら動くかも(そしてもしかして主力?) と思いながらも、webUIからはじめてみます。
実際使ってみながら修正して、使えないでもなんらかの判断ができれてばという感じです。

見た目がよいとテンションが上がるので、framework的なものをさがしました。しかし、だいたいこれで、いつも疲れて、やっぱりnative最高ってなるのです。


今回、調べて使おうかとおもったもの
Onsen-UI
famework7
ratchet(http://goratchet.com/)

ratchetはそんなに中身がゴテゴテしないというコンセプトです。

最初、macのsafariで動かしてみたら、動かなくて困りましたが、単純にタッチイベントをブラウザが送らなかったからでした。実は、ちゃんと英語のreadmeに書いてあります。
chromeのエミュレータモード?で動作をみてます。

gitHubでなにか公開したかったから、UIWebViewとiOSの連携を考えなおしてみた

iOSとWebViewとの連携の仕方は
- shouldstartloadwithrequestでフックして、カスタムスキーマを動かす
- UIWebViewでjavascriptdでオブジェクトを制御して連携する
等ぐらいは知っていた。
でもこのやり方がどうしても馴染めなかった。

きっと自分はwebサーバと一緒の時間が長かったというのもあるのだけれども、
普通にajaxをなげて、サーバがデータを返すようにiOSが情報を返してくれるものが欲しかった。

といったものを
3年前ぐらいに考えて放っておいたものを
githubでなにか公開したいという理由で作ってみました。


動作フローは以下のとおりです
1, ajax等でex) http://xxxx.xxxx.xx:7777/test/ssss.jsonでアクセス
　　htmlは普通のサーバとのやりとりのように書くことができます。
2, NSURLProtocolが、登録しているURIでロジックオブジェクトへハンドリング
3, ロジックオブジェクトが処理をし返却するデータを準備
　　iOS側のロジックもhtmlのDOMとか気にしなくてよくなります。
4, まるで通信した結果のように、JSONとしてデータを受け取る

もしかしたら、
一回、iOS側のロジックをとおして、サーバに通信することで、セキュリティ向上できるかもしれません。

こんなことやるより、直接やる方が効率がよさそうですが、
馴染んでいる方法を選択するのも一つという

プロトタイプとして
https://github.com/withstandist/hagoita

においてあります。

できれば、このやり方で一回アプリを出してみたいと思います。

いろいろと手をだしていきたい

明日に進んでいくために現状を整理してみました。

去年の末にはLINEスタンプもリリースできました。

2014.12.27 release
 モヒカン猫 - LINE クリエイターズスタンプ
 https://store.line.me/stickershop/product/1054849/ja

■ 現在手をだしているものリスト
- youtube (動画配信)
- pixiv
- twitter
- facebook
- blog
- アプリ開発(5つ公開中、iOSハンドル１つ)
- LINE クリエイターズスタンプ(8つ申請中)
- swift言語
- iPhonePLUS (http://iphone.ascii.jp)(開発者投稿)
- 切り絵(専用はさみ購入)

いろいろと手を出していますが、やってるだけで、質と頻度が低いですね。
でも、やらないより、やったほうがわかることが多い。
ちゃんとした人はやらなくても検証ができるらしいが、私にはできません。
それぞれの質を向上させながらも、今年もいろいろと手をだしていきたい。

去年末、悩んだFireFoxOSは、いまのところやめてます。

■ 手を出すかもしれないもの

- enchantMoom

- FireFoxOS

以上、今年も宜しくお願いします。