Rubyの勉強、はじめました。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


TiddlyWikiをレスポンシブWebデザイン対応にする方法

個人のメモ用にTiddlyWikiという1ファイル構成の手軽なWikiを使用しています。
正確にはTiddlySpotというTiddlyWikiをホスティングしてくれるサービスを使って
自宅でも会社でも同じWikiを更新していました。
ただiPhoneでは使いにくすぎて、実用レベルではないという感じで、はや数年。

ある時、レスポンシブWebデザインについて調べることがあったのですが、それで思いつきました。


TiddlyWikiをレスポンシブWebデザインにしたら、iPhoneでも使いやすくなるじゃないか!


もろもろ試した結果、実用レベルにまでなったかなと思ったので手順公開しておきます。
  • Step1. viewportを設定する
  • Step2. StyleSheetを設定する
  • Step3. SnapPluginを設定する


できあがるとこんな感じになります。

通常時の表示
TiddlyWikiのレスポンシブ対応

スナップしてメニューを表示
スナップメニュー

編集状態
編集モード


Step1. viewportを設定する

レスポンシブWebデザインの基本として、まずviewportを<head>内に設定する必要があります。
TiddlyWikiの場合、<head>内への追加はMarkupPreHead(またはMarkupPostHead)というTiddlerに記述すれば、
その内容が<head>内に反映されます。

MarkupPreHead




これだけでTiddlyWikiが画面いっぱいに表示されるようになったことがわかるかと思います。


Step2. StyleSheetを設定する

TiddlyWikiではStyleSheetというtiddlerにcssを記述すると、それが反映されます。
レスポンシブWebデザインにするため、mediaクエリをここに書いていきます。

StyleSheet
/*{{{*/
@media screen and (max-width: 800px) {
  #contentWrapper {
    /* tiddler表示領域を横幅いっぱいにする */
    width: 100%;
    /* はみ出した要素は非表示 */
    overflow: hidden;
    /* 要素の移動初期値 */
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  
  #mainMenu {
    display: none;
  }
  
  #sidebar {
    display: none;
  }
  .snapjs-right #sidebar {
    /* スナップ時の設定 */
    display: block;
    width: 175px;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-transition: width 0.3s ease;
       -moz-transition: width 0.3s ease;
        -ms-transition: width 0.3s ease;
         -o-transition: width 0.3s ease;
            transition: width 0.3s ease;
  }
  
  /* DOM要素の追加を検知するための設定 */
  @-webkit-keyframes elementInserted {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @-moz-keyframes elementInserted {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @-o-keyframes elementInserted {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @-ms-keyframes elementInserted {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @keyframes elementInserted {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  
  #displayArea {
    /* tiddler表示領域を横幅いっぱいにする */
    width: 100%;
    margin: 0 auto;
    -webkit-animation: elementInserted 0.001s 1;
       -moz-animation: elementInserted 0.001s 1;
        -ms-animation: elementInserted 0.001s 1;
         -o-animation: elementInserted 0.001s 1;
            animation: elementInserted 0.001s 1;
  }
  
  /* フルードイメージ設定 */
  img {
    max-width: 100%;
  }
  
  /* backstageのスタイル設定 */
  #backstageToolbar {
    overflow: scroll;
  }
  
  /* tiddlerの中のスタイル設定 */
  .viewer pre {
    /* <pre>は横スクロール可能にする */
    overflow: scroll;
  }
  .editor textarea {
    /* 編集時のテキストエリアの高さを低くする */
    height: 6em;
  }
  
  /* Snap.js向けの設定 */
  .snapjs-right .left-drawer,
  .snapjs-left .right-drawer {
      display: none;
  }
}
/*}}}*/
これで780px以下の小さい画面の時だけに反映されるcssを設定できました。
とりあえずmainMenuのtiddlerは非表示にしています。このへんはおいおい改善しようかなと思っています。
sidebarもいったん消えてしまいます。これは次のSnapPluginで表示できるようになります。

あとSelectThemePluginなどでテーマを設定している方はStyleSheetを各テーマのテンプレートに紐づける必要があります。
例えばGTDd3などを使用しているならGTDd3StyleSheetの末尾にStyleSheetへのリンクを追記すればOKです。

GTDd3StyleSheet
[[StyleSheet]]


Step3. SnapPluginを設定する

sidebarは新しいtiddlerを作ったり、僕が利用しているTiddlySpotに保存するのに必須です。
ただ普通に表示しているとtiddlerが見えにくくなってしまうので
Facebookなどでも使用されている横から滑り出してくるメニューにしてしまいます。
これにはSnap.jsというJavaScriptライブラリを導入します。
導入方法はSnapPluginというtiddlerを作成して、systemConfigというタグをつければOKです。

SnapPlugin
/***
![[Snap.js|https://github.com/jakiestfu/Snap.js]]
***/
//{{{
/*
 * Snap.js
 *
 * Copyright 2013, Jacob Kelley - http://jakiestfu.com/
 * Released under the MIT Licence
 * http://opensource.org/licenses/MIT
 *
 * Github:  http://github.com/jakiestfu/Snap.js/
 * Version: 1.9.0
 */
/*jslint browser: true*/
/*global define, module, ender*/
(function(win, doc) {
    'use strict';
    var Snap = Snap || function(userOpts) {
        var settings = {
            element: null,
            dragger: null,
            disable: 'none',
            addBodyClasses: true,
            hyperextensible: true,
            resistance: 0.5,
            flickThreshold: 50,
            transitionSpeed: 0.3,
            easing: 'ease',
            maxPosition: 266,
            minPosition: -266,
            tapToClose: true,
            touchToDrag: true,
            slideIntent: 40, // degrees
            minDragDistance: 5
        },
        cache = {
            simpleStates: {
                opening: null,
                towards: null,
                hyperExtending: null,
                halfway: null,
                flick: null,
                translation: {
                    absolute: 0,
                    relative: 0,
                    sinceDirectionChange: 0,
                    percentage: 0
                }
            }
        },
        eventList = {},
        utils = {
            hasTouch: (doc.ontouchstart === null),
            eventType: function(action) {
                var eventTypes = {
                        down: (utils.hasTouch ? 'touchstart' : 'mousedown'),
                        move: (utils.hasTouch ? 'touchmove' : 'mousemove'),
                        up: (utils.hasTouch ? 'touchend' : 'mouseup'),
                        out: (utils.hasTouch ? 'touchcancel' : 'mouseout')
                    };
                return eventTypes[action];
            },
            page: function(t, e){
                return (utils.hasTouch && e.touches.length && e.touches[0]) ? e.touches[0]['page'+t] : e['page'+t];
            },
            klass: {
                has: function(el, name){
                    return (el.className).indexOf(name) !== -1;
                },
                add: function(el, name){
                    if(!utils.klass.has(el, name) && settings.addBodyClasses){
                        el.className += " "+name;
                    }
                },
                remove: function(el, name){
                    if(settings.addBodyClasses){
                        el.className = (el.className).replace(" "+name, "");
                    }
                }
            },
            dispatchEvent: function(type) {
                if (typeof eventList[type] === 'function') {
                    return eventList[type].call();
                }
            },
            vendor: function(){
                var tmp = doc.createElement("div"),
                    prefixes = 'webkit Moz O ms'.split(' '),
                    i;
                for (i in prefixes) {
                    if (typeof tmp.style[prefixes[i] + 'Transition'] !== 'undefined') {
                        return prefixes[i];
                    }
                }
            },
            transitionCallback: function(){
                return (cache.vendor==='Moz' || cache.vendor==='ms') ? 'transitionend' : cache.vendor+'TransitionEnd';
            },
            canTransform: function(){
                return typeof settings.element.style[cache.vendor+'Transform'] !== 'undefined';
            },
            deepExtend: function(destination, source) {
                var property;
                for (property in source) {
                    if (source[property] && source[property].constructor && source[property].constructor === Object) {
                        destination[property] = destination[property] || {};
                        utils.deepExtend(destination[property], source[property]);
                    } else {
                        destination[property] = source[property];
                    }
                }
                return destination;
            },
            angleOfDrag: function(x, y) {
                var degrees, theta;
                // Calc Theta
                theta = Math.atan2(-(cache.startDragY - y), (cache.startDragX - x));
                if (theta < 0) {
                    theta += 2 * Math.PI;
                }
                // Calc Degrees
                degrees = Math.floor(theta * (180 / Math.PI) - 180);
                if (degrees < 0 && degrees > -180) {
                    degrees = 360 - Math.abs(degrees);
                }
                return Math.abs(degrees);
            },
            events: {
                addEvent: function addEvent(element, eventName, func) {
                    if (element.addEventListener) {
                        return element.addEventListener(eventName, func, false);
                    } else if (element.attachEvent) {
                        return element.attachEvent("on" + eventName, func);
                    }
                },
                removeEvent: function addEvent(element, eventName, func) {
                    if (element.addEventListener) {
                        return element.removeEventListener(eventName, func, false);
                    } else if (element.attachEvent) {
                        return element.detachEvent("on" + eventName, func);
                    }
                },
                prevent: function(e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                }
            },
            parentUntil: function(el, attr) {
                var isStr = typeof attr === 'string';
                while (el.parentNode) {
                    if (isStr && el.getAttribute && el.getAttribute(attr)){
                        return el;
                    } else if(!isStr && el === attr){
                        return el;
                    }
                    el = el.parentNode;
                }
                return null;
            }
        },
        action = {
            translate: {
                get: {
                    matrix: function(index) {

                        if( !utils.canTransform() ){
                            return parseInt(settings.element.style.left, 10);
                        } else {
                            var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
                                ieOffset = 8;
                            if (matrix) {
                                matrix = matrix[1].split(',');
                                if(matrix.length===16){
                                    index+=ieOffset;
                                }
                                return parseInt(matrix[index], 10);
                            }
                            return 0;
                        }
                    }
                },
                easeCallback: function(){
                    settings.element.style[cache.vendor+'Transition'] = '';
                    cache.translation = action.translate.get.matrix(4);
                    cache.easing = false;
                    clearInterval(cache.animatingInterval);

                    if(cache.easingTo===0){
                        utils.klass.remove(doc.body, 'snapjs-right');
                        utils.klass.remove(doc.body, 'snapjs-left');
                    }

                    utils.dispatchEvent('animated');
                    utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
                },
                easeTo: function(n) {

                    if( !utils.canTransform() ){
                        cache.translation = n;
                        action.translate.x(n);
                    } else {
                        cache.easing = true;
                        cache.easingTo = n;

                        settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;

                        cache.animatingInterval = setInterval(function() {
                            utils.dispatchEvent('animating');
                        }, 1);
                        
                        utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
                        action.translate.x(n);
                    }
                    if(n === 0){
                        settings.element.style[cache.vendor+'Transform'] = '';
                    }
                },
                x: function(n) {
                    if( (settings.disable === 'left' && n>0) ||
                        (settings.disable === 'right' && n<0)
                    ){ return; }
                    
                    if( !settings.hyperextensible ) {
                        if( n === settings.maxPosition || n > settings.maxPosition ) {
                            n = settings.maxPosition;
                        } else if( n === settings.minPosition || n < settings.minPosition ) {
                            n = settings.minPosition;
                        }
                    }

                    n = parseInt(n, 10);
                    if(isNaN(n)){
                        n = 0;
                    }

                    if( utils.canTransform() ){
                        var theTranslate = 'translate3d(' + n + 'px, 0,0)';
                        settings.element.style[cache.vendor+'Transform'] = theTranslate;
                    } else {
                        settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';

                        settings.element.style.left = n+'px';
                        settings.element.style.right = '';
                    }
                }
            },
            drag: {
                listen: function() {
                    cache.translation = 0;
                    cache.easing = false;
                    utils.events.addEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
                    utils.events.addEvent(settings.element, utils.eventType('move'), action.drag.dragging);
                    utils.events.addEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
                },
                stopListening: function() {
                    utils.events.removeEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
                    utils.events.removeEvent(settings.element, utils.eventType('move'), action.drag.dragging);
                    utils.events.removeEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
                },
                startDrag: function(e) {
                    // No drag on ignored elements
                    var target = e.target ? e.target : e.srcElement,
                        ignoreParent = utils.parentUntil(target, 'data-snap-ignore');
                    
                    if (ignoreParent) {
                        utils.dispatchEvent('ignore');
                        return;
                    }
                    
                    if(settings.dragger){
                        var dragParent = utils.parentUntil(target, settings.dragger);
                        
                        // Only use dragger if we're in a closed state
                        if( !dragParent && 
                            (cache.translation !== settings.minPosition && 
                            cache.translation !== settings.maxPosition
                        )){
                            return;
                        }
                    }
                    
                    utils.dispatchEvent('start');
                    settings.element.style[cache.vendor+'Transition'] = '';
                    cache.isDragging = true;
                    cache.hasIntent = null;
                    cache.intentChecked = false;
                    cache.startDragX = utils.page('X', e);
                    cache.startDragY = utils.page('Y', e);
                    cache.dragWatchers = {
                        current: 0,
                        last: 0,
                        hold: 0,
                        state: ''
                    };
                    cache.simpleStates = {
                        opening: null,
                        towards: null,
                        hyperExtending: null,
                        halfway: null,
                        flick: null,
                        translation: {
                            absolute: 0,
                            relative: 0,
                            sinceDirectionChange: 0,
                            percentage: 0
                        }
                    };
                },
                dragging: function(e) {
                    if (cache.isDragging && settings.touchToDrag) {

                        var thePageX = utils.page('X', e),
                            thePageY = utils.page('Y', e),
                            translated = cache.translation,
                            absoluteTranslation = action.translate.get.matrix(4),
                            whileDragX = thePageX - cache.startDragX,
                            openingLeft = absoluteTranslation > 0,
                            translateTo = whileDragX,
                            diff;

                        // Shown no intent already
                        if((cache.intentChecked && !cache.hasIntent)){
                            return;
                        }

                        if(settings.addBodyClasses){
                            if((absoluteTranslation)>0){
                                utils.klass.add(doc.body, 'snapjs-left');
                                utils.klass.remove(doc.body, 'snapjs-right');
                            } else if((absoluteTranslation)<0){
                                utils.klass.add(doc.body, 'snapjs-right');
                                utils.klass.remove(doc.body, 'snapjs-left');
                            }
                        }

                        if (cache.hasIntent === false || cache.hasIntent === null) {
                            var deg = utils.angleOfDrag(thePageX, thePageY),
                                inRightRange = (deg >= 0 && deg <= settings.slideIntent) || (deg <= 360 && deg > (360 - settings.slideIntent)),
                                inLeftRange = (deg >= 180 && deg <= (180 + settings.slideIntent)) || (deg <= 180 && deg >= (180 - settings.slideIntent));
                            if (!inLeftRange && !inRightRange) {
                                cache.hasIntent = false;
                            } else {
                                cache.hasIntent = true;
                            }
                            cache.intentChecked = true;
                        }

                        if (
                            (settings.minDragDistance>=Math.abs(thePageX-cache.startDragX)) || // Has user met minimum drag distance?
                            (cache.hasIntent === false)
                        ) {
                            return;
                        }

                        utils.events.prevent(e);
                        utils.dispatchEvent('drag');

                        cache.dragWatchers.current = thePageX;
                        // Determine which direction we are going
                        if (cache.dragWatchers.last > thePageX) {
                            if (cache.dragWatchers.state !== 'left') {
                                cache.dragWatchers.state = 'left';
                                cache.dragWatchers.hold = thePageX;
                            }
                            cache.dragWatchers.last = thePageX;
                        } else if (cache.dragWatchers.last < thePageX) {
                            if (cache.dragWatchers.state !== 'right') {
                                cache.dragWatchers.state = 'right';
                                cache.dragWatchers.hold = thePageX;
                            }
                            cache.dragWatchers.last = thePageX;
                        }
                        if (openingLeft) {
                            // Pulling too far to the right
                            if (settings.maxPosition < absoluteTranslation) {
                                diff = (absoluteTranslation - settings.maxPosition) * settings.resistance;
                                translateTo = whileDragX - diff;
                            }
                            cache.simpleStates = {
                                opening: 'left',
                                towards: cache.dragWatchers.state,
                                hyperExtending: settings.maxPosition < absoluteTranslation,
                                halfway: absoluteTranslation > (settings.maxPosition / 2),
                                flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
                                translation: {
                                    absolute: absoluteTranslation,
                                    relative: whileDragX,
                                    sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
                                    percentage: (absoluteTranslation/settings.maxPosition)*100
                                }
                            };
                        } else {
                            // Pulling too far to the left
                            if (settings.minPosition > absoluteTranslation) {
                                diff = (absoluteTranslation - settings.minPosition) * settings.resistance;
                                translateTo = whileDragX - diff;
                            }
                            cache.simpleStates = {
                                opening: 'right',
                                towards: cache.dragWatchers.state,
                                hyperExtending: settings.minPosition > absoluteTranslation,
                                halfway: absoluteTranslation < (settings.minPosition / 2),
                                flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
                                translation: {
                                    absolute: absoluteTranslation,
                                    relative: whileDragX,
                                    sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
                                    percentage: (absoluteTranslation/settings.minPosition)*100
                                }
                            };
                        }
                        action.translate.x(translateTo + translated);
                    }
                },
                endDrag: function(e) {
                    if (cache.isDragging) {
                        utils.dispatchEvent('end');
                        var translated = action.translate.get.matrix(4);

                        // Tap Close
                        if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) {
                            utils.events.prevent(e);
                            action.translate.easeTo(0);
                            cache.isDragging = false;
                            cache.startDragX = 0;
                            return;
                        }

                        // Revealing Left
                        if (cache.simpleStates.opening === 'left') {
                            // Halfway, Flicking, or Too Far Out
                            if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
                                if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed
                                    action.translate.easeTo(0);
                                } else if (
                                    (cache.simpleStates.flick && cache.simpleStates.towards === 'right') || // Flicking Open OR
                                    (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
                                ) {
                                    action.translate.easeTo(settings.maxPosition); // Open Left
                                }
                            } else {
                                action.translate.easeTo(0); // Close Left
                            }
                            // Revealing Right
                        } else if (cache.simpleStates.opening === 'right') {
                            // Halfway, Flicking, or Too Far Out
                            if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
                                if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { // Flicking Closed
                                    action.translate.easeTo(0);
                                } else if (
                                    (cache.simpleStates.flick && cache.simpleStates.towards === 'left') || // Flicking Open OR
                                    (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
                                ) {
                                    action.translate.easeTo(settings.minPosition); // Open Right
                                }
                            } else {
                                action.translate.easeTo(0); // Close Right
                            }
                        }
                        cache.isDragging = false;
                        cache.startDragX = utils.page('X', e);
                    }
                }
            }
        },
        init = function(opts) {
            if (opts.element) {
                utils.deepExtend(settings, opts);
                cache.vendor = utils.vendor();
                action.drag.listen();
            }
        };
        /*
         * Public
         */
        this.open = function(side) {

            utils.klass.remove(doc.body, 'snapjs-expand-left');
            utils.klass.remove(doc.body, 'snapjs-expand-right');

            if (side === 'left') {
                cache.simpleStates.opening = 'left';
                cache.simpleStates.towards = 'right';
                utils.klass.add(doc.body, 'snapjs-left');
                utils.klass.remove(doc.body, 'snapjs-right');
                action.translate.easeTo(settings.maxPosition);
            } else if (side === 'right') {
                cache.simpleStates.opening = 'right';
                cache.simpleStates.towards = 'left';
                utils.klass.remove(doc.body, 'snapjs-left');
                utils.klass.add(doc.body, 'snapjs-right');
                action.translate.easeTo(settings.minPosition);
            }
        };
        this.close = function() {
            action.translate.easeTo(0);
        };
        this.expand = function(side){
            var to = win.innerWidth || doc.documentElement.clientWidth;

            if(side==='left'){
                utils.klass.add(doc.body, 'snapjs-expand-left');
                utils.klass.remove(doc.body, 'snapjs-expand-right');
            } else {
                utils.klass.add(doc.body, 'snapjs-expand-right');
                utils.klass.remove(doc.body, 'snapjs-expand-left');
                to *= -1;
            }
            action.translate.easeTo(to);
        };

        this.on = function(evt, fn) {
            eventList[evt] = fn;
            return this;
        };
        this.off = function(evt) {
            if (eventList[evt]) {
                eventList[evt] = false;
            }
        };

        this.enable = function() {
            action.drag.listen();
        };
        this.disable = function() {
            action.drag.stopListening();
        };

        this.settings = function(opts){
            utils.deepExtend(settings, opts);
        };

        this.state = function() {
            var state,
                fromLeft = action.translate.get.matrix(4);
            if (fromLeft === settings.maxPosition) {
                state = 'left';
            } else if (fromLeft === settings.minPosition) {
                state = 'right';
            } else {
                state = 'closed';
            }
            return {
                state: state,
                info: cache.simpleStates
            };
        };
        init(userOpts);
    };
    if ((typeof module !== 'undefined') && module.exports) {
        module.exports = Snap;
    }
    if (typeof ender === 'undefined') {
        this.Snap = Snap;
    }
    if ((typeof define === "function") && define.amd) {
        define("snap", [], function() {
            return Snap;
        });
    }
}).call(this, window, document);
//}}}
/***
!スナップメニューの作成
***/
//{{{
var snapper;
// DOM要素の追加を検知して、以下を実行
document.addEventListener('webkitAnimationStart', function(event){
  var e = event.srcElement;
  if (event.animationName == 'elementInserted') {
    snapper = new Snap({
      element: e,
      disable: 'left',
      minPosition: -175
    });
  }
}, true);
//}}}

tiddler表示エリアを左へスナップするとメニューが表示できます。


以上です。
cssはまだ荒削りでもっと改善ポイントがあるかと思いますが、
これでひとまずはiPhoneで使えるレベルになるかなと思います。
TiddlyWikiを使用して同じ悩みをお持ちの人は活用ください。
スポンサーサイト


Web2Stanzaちょっと更新

ちょっとePub関連で新しいネタを思いついたので
思い出しがてらWeb2Stanzaメンテしました。

GaeVFSというGoogleAppEngineでファイル扱えるライブラリを使ってましたが、
ここが性能ネックになっていたようなので外しました。
代わりにいったんメモリ上でZip作ってから
Datastoreに直接保存するようにしました。
少し処理速くなった気がしますw

メモリ上でZipつくるときにちょっとハマったのでメモ。
ByteArrayOutputStreamを使いましたが、そこから作ったZipOutputStreamをcloseする前に
Datastoreに保存してしまうと変に保存されてしまう模様。
ちゃんとストリームを閉じてから永続化しないとダメでした。


『Web2Stanza』公開しました

iPhoneアプリの『Stanza』を愛用しています。
ePub形式の電子ブックをオフラインで読めるアプリなんですが、
ページをめくる動作が素敵だったり、読んだ位置を覚えてくれてたり、
ディテールが素晴らしいです。

ただWebページからePub形式を作るのにはちょっと手間がかかっていました。
ポール・グレアムとかジョエル・スポルスキーとかの
Web上のエッセイを読むのに使いたかったので、
なんかもっと手軽にできないかなと思いました。

調べてみるとePubは割と簡単に作れる模様。
(参考サイト:電子書籍ファイルePubについて -ePubを自分で作成する- « lab.naoki.sato.name
そこでWebページを自動でePubに変換してくれるWebサービスを作ってみました。

Web2Stanza

InstapaperとかRead it Laterとかもあるのでどれだけ需要あるかわかりませんが、
Stanzaを気に入っている人なら便利だと思います。


特徴

  • ブックマークレット形式。
  • 無料です。
  • iPhoneで表示中のWebページを直接Stanzaに取り込むことができる。
  • テキストの保存だけなので、画像やCSSには対応していません。
  • iPhone以外のブラウザから使うとePubファイルをダウンロード。
  • GAE/J上にサービス構築しているので1MBを超えるページを扱えません。
    (テキストだけなのでそうそう問題にはならないと思います)

ついでにGoogle Code使ってソース公開しました。
主に以下の言語・ライブラリを使って開発しました。
素晴らしいライブラリを無償で提供している方々に感謝です。

だいぶ勉強にもなったので、各ライブラリのレビューとかも書いていきたいですね。



msysGitと日本語

github使い始めた。

リーナス・トーバルスはGitについて講演しているときに、
「Subversionを使っている人がいるなら、
この場から去ったほうがいいかもしれない」と言ったそうだ。

Subversion愛用してたんですが…
そんなに違うものなのかな、まだいまいちわかってない。


で、そんなGitを使い始めたので、Git on Windowsでの日本語について少し。

Gitは文字をUTF8で処理するので、CP932なコマンドプロンプトとかとは相性が悪い。
TortoiseGitなら日本語問題なしだけど、
エディターはvim大好きっ子なのでそのままgit commitしちゃいたい。

Git on コマンドプロンプト with 日本語コミットログの設定方法。


1. 環境変数EDITOR


EDITORという環境変数を新規作成したげて、エディタを指定する。当然vim。
こうしとくとgit commit -a でエディタが立ち上がる。


2. vimの設定


vimrcに以下を追加。
au BufRead COMMIT_EDITMSG set fenc=utf8
これでGitのコミットメッセージ編集する時には、UTF8で処理するようになる。
(COMMIT_EDITMSGがGitのコミットメッセージのファイル名)


git logとかしちゃうと文字化けしちゃいますが、
TortoiseGitから見ればちゃんと表示できてる。

とりあえずはこれでよいかな。

git logで文字化けせずに表示する方法、誰か教えて!


MechanizeでZipPluggableParser

ちょっと調べたけど検索にひっかかってこなかったので、
Mechanize用ZIPファイルパーサ置いておきます。
解凍にはzipruby使う想定。
zip_parser.rb
require 'rubygems'
require 'mechanize'
require 'zipruby'

class ZipParser < Mechanize::File
  def initialize(uri = nil, response = nil, body = nil, code = nil)
    super(uri, response, body, code)
  end

  def open
    streaming = lambda { return @body.slice!(0, 256) }

    Zip::Archive.open_buffer(streaming) {|zip_ar| yield(zip_ar)}
  end
end
Mechanize::PluggerableParserってのでMIMEタイプに応じたパーサを設定できるそうな。
#openでZip::Archiveを渡せば使いやすいかなと。

使い方はこんな感じ。
require 'rubygems'
require 'mechanize'
require 'zip_parser'

agent = Mechanize.new

agent.pluggable_parser["application/zip"] = ZipParser
agent.pluggable_parser["application/octet-stream"] = ZipParser

url = 'http://github.com/zeero/zeero_work/raw/master/zip_parser.zip'
agent.get(url) {|file|
  file.open {|zip_ar|
    zip_ar.each do |zf|
      puts zf.name
    end
  }
}

7行目でMIMEタイプ別でパーサを登録。
'application/zip'だけでいいと思いきや、
githubからだと'application/octet-stream'でくるのでそちらも登録。
これでagent.getでZipParserが生成される。
あとはopenでZip::Archiveつくって、ファイル名の一覧表示させる、と


次のページ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。