Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

GO言語を導入する

若干参考もとが古かったようです。
GOROOTはすでに不要です。
詳しくは以下を参照
shuzo-kino.hateblo.jp

実際のところ

OS X

そのままズバリ、パッケージで導入しましょう。
この辺りは大分熟れたようで、昔のようにGOPATHがどうのこうのと心配しなくて良いです。
余計なトコで根性みせる必要はありません!

Downloads - The Go Programming Language

#NIX系、あるいはOS Xでもビルドしたい人

tar -C /usr/local -xzf go$VERSION.$OS-$ARCH.tar.gz

$HOME/.profileに以下の記述を追加

export PATH=$PATH:/usr/local/go/bin
export GOROOT=$HOME/go1.X
export PATH=$PATH:$GOROOT/bin

Getting Started - The Go Programming Language

【読書メモ】1000円ゲーム  5分で人生が変わる「伝説の営業法」

1000円ゲーム ?5分で人生が変わる「伝説の営業法」

1000円ゲーム ?5分で人生が変わる「伝説の営業法」

黄色い表紙が目につく営業論の本です。
文字密度、イラストの量からして何だか小学校高学年向けの読み物みたいな印象をうける組版
その分頭に入って来やすい内容です。

方法論はどうであれ、相手の役に立つという大前提をもつこと。
その上で、聞き取りの中から真のニーズを拾って役に立つように行動すれば、
自ずと売上は上がってくるという話でした。

「心・技・体」なんて言葉もあるように、
まずちゃんとした動機がないと行き詰まるから、
その辺りちゃんと意識しなさいよ……というのが、この本の結論です。


私の会社はお客様側からの持ち込み企画に対して、技術で貢献するというタイプの仕事の進め方をしています。
そのためか、こういう事は自然とできていたように感じます。
今後業態を拡大するにあたって、なんとなく出来てた事をちゃんと意識してやってくべきなんでしょうね。

【読書メモ】新人デザイナーのための Webデザインを基礎から学べる本

新人デザイナーのための Webデザインを基礎から学べる本

新人デザイナーのための Webデザインを基礎から学べる本

タイトル通り、Webデザインについての入門書です。
章の最初に分野の基礎知識が入り、
その後は「いいケース」「わるいケース」を比較しながら、
ここではこう考える……という思考に道筋を提示してくれます。

実装につかったHTML/CSSファイルは特に用意されてないので、
そこは自分でやる必要があります。

ただ、作中の画像素材の多くは、Pixtaさんから持ってきているようです。
無料素材という訳でもないようなので、透かしが入りますが……。
あくまで自習用に拝借するのはなんとかセーフ??
pixta.jp

同一生成元ポリシー(Same-Origin Policy)のお節介を防止するSafariブラウザの機能

同一生成元ポリシー(Same-Origin Policy)は、自己が置かれた鯖以外からのデータ取得を制限するアレです。
これにより、不正なアクセスからデータやブラウザを守る事ができます。
ところがギッチョン、自分のアプリを作る際にこれが余計でサンプル動作の検証すらままならない事があったりします。
例えば、動作を模すlocalhostの疑似鯖に接続したい時など。
CORS(Cross-Origin Resource Sharing)は、こういった自鯖以外からの変な読み込みを許可する仕組みです。

実際のところ

Safari => 開発 => クロスオリジンの制限を無効にする
f:id:shuzo_kino:20170310200220p:plain

pythonのglobal変数を関数内で利用するときはちゃんと宣言する

ちょっと横着して、グローバル変数を使おうとしたところ

UnboundLocalError: local variable 'count' referenced before assignment

なるエラーが。

調べてみると、Python公式に以下のような記述が

Python では、関数内で参照されるだけの変数は暗黙的にグローバルにです。関数の本体のどこかで値が変数に代入されたなら、それは明示的にグローバルであると宣言されない限り、ローカルであるとみなされます。

というわけで、hoge関数中でグローバル変数countを使いたい場合、関数冒頭で以下のようにします。

def hoge():
    global count

    //...

leaflet-realtimeで「ピザ配達状況」めいたマップアプリをつくる

leaflet-realtimeは@perliedman氏が提供するleafletJsのサードパーティ拡張です。
サーバ上に置いたGeoJSONを呼び出して、「ピザ配達状況」めいたマップアプリをつくる事ができます。

実際のところ

とりあえず、公式から持ってきましょう。

$ git clone https://github.com/perliedman/leaflet-realtime.git

とれたら、サンプルを起動してみます。

$ cd leaflet-realtime/example
$ open trail.html

三秒ごとにトークンが移動し、数回分の移動軌跡が残るサンプルが表示される筈。
f:id:shuzo_kino:20170308233110p:plain
ここで表示されるデータは
https://wanderdrone.appspot.com/
にあり、三秒ごとに一回更新されているようです。
中身はこんな感じ。

{"geometry": {"type": "Point", "coordinates": [111.19591175057819, -4.9534701779661079]}, "type": "Feature", "properties": {}}

自前のをやる

では、trailを参考に少し改造してみましょう。
trail.jsを以下のようにします。

var map = L.map('map'),
    trail = {
        type: 'Feature',
        properties: {
            id: 1
        },
        geometry: {
            type: 'LineString',
            coordinates: []
        }
    },
    
    realtime = L.realtime(function(success, error) {
        L.Realtime.reqwest({
            url: 'http://localhost:8080/api/status',
            type: 'json'
        })
        .then(function(data) {
            var trailCoords = trail.geometry.coordinates;
            trailCoords.push(data.geometry.coordinates);
            trailCoords.splice(0, Math.max(0, trailCoords.length - 5));
            success({
                type: 'FeatureCollection',
                features: [data, trail]
            });
        })
        .catch(error);
    }, {
        interval: 3 * 1000
    }).addTo(map);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

realtime.on('update', function() {
    map.fitBounds(realtime.getBounds(), {maxZoom: 3});
});

次に、localhostにGeoJSONを吐く鯖を用意します。
私はbottleでやっつけてます。
shuzo-kino.hateblo.jp
本当に最小構成でこんな感じ

from bottle import get, run

@get('/api/status')
def api_status():
    return {"geometry": {"type": "Point", "coordinates": [111.19591175057819, -4.9534701779661079]}, "type": "Feature", "properties": {}}

run(host='localhost', port=8080)

データ鯖を立ち上げつつ、CORSを無効化できるブラウザで起動します。
OS Xなら、Safariですね。
ちゃんと行けば、こんな感じでボ〜っとトークンが突っ立っている絵がでます。
動かしても3秒毎に中心が変わるので、更新が掛かっている事は確認できます。
f:id:shuzo_kino:20170308235335p:plain

leaflet.jsでGeoJSONデータを扱う

shuzo-kino.hateblo.jp
の続き。
ホントはコレをやりたかったのです。

GeoJSONは地理データを記述する用JSON派生です。
特定の地点に吹き出し書いたり、国土領域をポリゴン埋めしたり、旅のルートを線で書いたりできます。
また、Githubに"geo.json"でUPするとOpenMapsでレンダリングまでしてくれる優れもの。

実際のところ

本体部分のmyapp.jsは以下の通り。
他の部分は冒頭の記事と同じです。
今回の例では直接書いちゃってますが、外部から読み込むのがクレバーです。

なお、GeoJSONの経度緯度の順とLeaflet.JSの順がどうも逆のようです。
私はそこでハマったので気をつけて下さい。

//leaflet OSM map
function init() {
    
    // create a map in the "mapid" div,
    // set the view to a given place and zoom
    var map = L.map('mapid');
    map.setView([35.656083, 139.544056], 12);
    
    // add an OpenStreetMap tile layer
    var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
	maxZoom: 18,
    });
    tileLayer.addTo(map);
 

var geojsonFeature = [
  {"type":"Feature","geometry":{"type":"Point","coordinates":[139.544056,35.656083]},"properties":{"name":"電気通信大学"}}
]
    
    L.geoJSON(geojsonFeature).addTo(map);
    
   
    // add layers
    var baseLayers = {
    	"OpenStreetMap": tileLayer
    };
    var overlays = {
    	"Marker": mapMarker,
    };
    L.control.layers(baseLayers, overlays).addTo(map);				
    
    // add control scale 
    L.control.scale().addTo(map);
    
}

ちゃんとできてれば、こんな感じでレンダリングされてるはず。
f:id:shuzo_kino:20170307234748p:plain