Javascriptが熱い！

JavaScriptがあつい！

というか、自分の中のブームである。つい先日までPythonを調べまくり、その前は環境構築に Vagrantを調べまくりだった。そして今はJavascriptを調べまくり。

このブームが始まったのは、つい先日、とあるハッカソンに参加してJavascriptのライブラリを調べてみると、いろいろでてきて、しかも何か面白そうだぞ！という事で早速、片っ端から触ってみたくなったという状態。

という事で早速だが、特に気になっているものをメモ程度に書いておく。

MVC系フレームワーク

  • AngularJS
  • Backbone.js
  • React（Vのみ）

DOM操作系

モバイル系

UI系テンプレートエンジン

  • JsRender

グラフィカル系

  • D3.js
  • Three.js

特殊な

  • enchant.js
  • node.js
  • NW.js（node-webkit)

ちなみに、この中でちょっとでも触った事があるものは、 jQuery,jQuery Mobile, D3.js, node.js,になる。

という事で、これから触ったものの感想や、作ったものなど作り方含めて ブログで公開していければと思っています。

イノベーションの弊害について考える

教育とは、をもう何年も考え続けてきた、いろいろな捉え方があって、情報の伝達としての一般化をしようと、数式にした事もあった、最近おもっている事は、本質的には、コミュニティの形成上において必要の為に行われる行為であり、コミュニティ の中に適応または、そのコミュニティの求める行為に従順させる為の活動。

とした場合、

学習とは、生物が生まれてから次の子孫繁栄までに生きるおよび、子孫を繁栄する為に環境に適応する事を目的とした能力。

だから、

ときに、教育は学習能力を抑える事で、そのコミュニティの形成を守る。 ときに学習は環境に応じる事で生命の繁栄が最大となるのであればその能力を抑える事をも学習する。

という事で、イノベーションの弊害になる教育が悪いのではなく、そのコミュニティの保持の為に必要な事で、社会的に滅ぶ時がくれば、コミュニティ毎なくなるかも知れないけど、別の新たなコミュニティが生まれて全体的に見たら別にそんな大騒ぎする程のこっちゃないよね。って感じ。

バカと天才が紙一重というのは、単純にはみ出した考えが受け入れられたか否かの違いで、周りの 人の評価にしか過ぎないので、超頑固とか、いう事聞かないとかって、別に悪い事じゃなくて、おまえ、俺のコミュニティで生活してく？って事だけなのかも知れない。

子供が生まれて最初に属するコミュニティは家族であって、その家族がコミュニティとして機能しない状況なら、別にここに教育は生まれない。

だって、必要ないからね。

子供が家庭の次に入るコミュニティは学校だと思う、ここで先生や親が社会との繋がりを重視して いなければ、子供は社会に触れる事なく、２つの小さなコミュニティが全世界となってしまう。

塾や習い事、親が社交的、先生が先進的で社会の話しやアクセスをする、部活を通して他のコミュニティにアクセスする、どこまで多様なコミュニティに触れる事ができるかは非常に重要じゃないかと思う。コミュニティ毎の教育が存在して、コミュニティを超えた学習が発達すれば、一つのコミュニティの保持の為に学習が抑えらえる事が無くなるから。

貧困の連鎖の問題も、イノベーションの弊害も、こんな感じで説明できないか？なんて事を考えている。

連番の番号付きのボタンをpng形式で大量に生産する方法

番号付きのボタンを大量にPNGで作らなければいけない。 簡単な方法知ってる？ と聞かれたので、多分Photoshopでバッチ処理的な何かでできるんじゃなかろうかと思い。

できるよ。と言ってやったものの、普段あまり使わないので方法を忘れないうちに記録しておきます。 いや、そこそこ、ニーズありそうだと思うのですが、僕の場合の使用頻度は少ないので、次使う時に 忘れてしまいそう。

方法は簡単で、Photoshopのファイル＞スクリプト＞参照＞○○.jsを実行することで、番号が連番でついているボタンを生成しPNGで決められたフォルダに保存する。

ということをやらせたい。

で、次のJavaScriptを作った。

setUnit(Units.PIXELS);   // 単位設定

saveFolder = "~/png/";
motoFile = new File("~/base.psd");

textFont = "HiraKakuPro-W6";    // 書体
textSize = 24;  // 文字サイズ（point）
textDX = 40;    // 表示X位置（offset形式）
textDY = 100;   // 表示Y位置（offset形式）
textColor = new SolidColor(); 
textColor.rgb.red = 255;
textColor.rgb.green = 255;
textColor.rgb.blue = 255;

for(i=1; i<=50; i++)
{
    num = "0"+i;
    num = num.substring(num.length-2,3);
    saveName = num;
    open(motoFile);
    layObj = activeDocument.artLayers;
    layRef = layObj.add();
    layRef.kind = LayerKind.TEXT;
    layRef.textItem.contents = saveName;
    layRef.textItem.font = textFont;
    layRef.textItem.size = textSize;
    layRef.textItem.color = textColor;
    layRef.translate(textDX,textDY);
    savePng(saveFolder+"thumb_h_"+saveName+".png");
    activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}

function savePng(pngFileObj)
{
    saveFileObj = new File(pngFileObj);
    var pngOpt = new PNGSaveOptions();
    pngOpt.compression = 9;
    pngOpt.interlaced = true;
    activeDocument.saveAs(saveFileObj, pngOpt, true, Extension.LOWERCASE);
}

function setUnit(unt) { preferences.rulerUnits = unt; }
function getUnit() { return preferences.rulerUnits; }

先にいうと、base.psdにベースとなる背景を作成し、その上に数字の連番をテキストで追加し、png形式で、あらかじめ準備しておいたpngフォルダに保存させている。

今回の要望は50ボタン作成してとのことだったので、ループは１から５０まで回している。

プロジェクションマッピングを習ってきた。

プロジェクションマッピングを習った。

まだ難しい事は全然できないけど、簡単な事からやってみた。

youtu.be

これは、積み木をとると、下のページに広がるイメージで作った。

 

 

ubuntuでShape 形式の地図データをTopoJSON 形式に変換する。

簡単な事を言うと、下記ブログで書かれている事をしようとした時に環境が違うので、ubuntu環境でのやり方を自分の為にも記録。

D3.js で日本地図を描く - y_uti のブログ

ubutnuでShape形式の地図データをTopoJSON 形式に変換する 為に次のステップを踏む必要があるが、ShapeからGeoJSONに変換する為に、ogr2ogrという コマンドを使うらしい。 そのコマンドが使えるライブラリは、CentOSだと、EPELというパッケージに揃っているらしいのだが、私の環境はubuntuで構築しているので、ubuntuでogr2ogrを利用する為の手順を記録しておく。

  1. Shape 形式の地図データを入手する

  2. GeoJSON 形式に変換する

  3. TopoJSON 形式に変換する

まずは、ogr2ogr --version以前構築した際に、環境にすでにインストールしているかもしれないので、バージョンコマンドで確認してみた所、、、、入ってない。（入れた記憶ないし、そりゃそうだ。）

で、丁寧にgdal-binをインストールしなさいと教えてくれたので、管理者権限でインストール。 sudo apt-get install gdal-bin

で無事にインストールできたか確認 ogr2ogr --version GDAL 1.10.1, released 2013/08/26と表示され、無事にインストールできたよう。

では、ogr2ogrを使って、GeoJSONファイルに変換。

ogr2ogr -f GeoJSON ne_10m_admin_0_disputed_areas.geojson ne_10m_admin_0_disputed_areas.shp

ここまでできたので、あとは、上で紹介したブログの通りに進めようとした所、他にもインストールしておく必要のある ライブラリを使っていたので、それもインストール。

apt-get install jq

それから、npmも使うので、インストール。

apt-get install npm npmをインストールしたら、npmをつかって、topjsonをインストール。

npm -g install topojson

とりあえず、これでubuntuでの準備はOK

開発環境整えるまで。自分用のメモ

環境構築のために、いろんなものインストール。 目指す開発環境は、仮想環境上で、webサーバーとserversideの言語をインストールし、webサービス構築の基盤を作ること。 サーバーは、ubuntu14.04 言語は、Python

仮想環境側はVagrantのBox化をして、これ以降の作業で壊しても最低限の環境に素早く復旧できる ようにしておく。

mac側にインストールするもの。

仮想環境側でインストールするもの

とりあえず、この環境でベースとなるVagrant boxを作成。 boxの名前はubuntu14.04xbase

Django環境構築　Linux CentOS 編　その3 Python2.7.9インストール

edtech.hatenadiary.jp

前回の続き

CentOS に入って、まずはアップデートできるものを確認する。 yum check-update

f:id:kuniwoomou:20150427222823p:plain

一応確認し、特に何か確認しておきたいものがあるわけではないので、 スルーして、アップデートを実行する。

updateはルート権限で行う。

sudo yum update

インストールに必要なものをインストール sudo yum install zlib zlib-devel tk-devel tcl-devel sqlite-devel ncurses-devel gdbm-devel readline-devel bzip2-devel db4-devel openssl-devel

続いて、Python2.7.9のインストール

wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz
tar zxvf Python-2.7.9.tgz
cd Python-2.7.9
./configure --with-threads --enable-shared --prefix=/usr/local
make
sudo make altinstall

Python2.7.9の圧縮ファイルをダウンロードして、解凍し、できたPython2.7.9フォルダに移動してから、インストールしています。

つづいて、Djangoをインストールしたいのですが、Djangoを簡単にインストールする為に pipをインストールします。

sudo easy_install pip

Djangoのインストール

pip install Django==1.8

Djangoが無事にインストールされているかの確認。 pythonを実行して、import djangoとしてエラーがでなければ成功。

>>> import django
>>> print django.get_version()

1.8と出たので、Ctrl + DでPythonのインタプリタモードから抜けて、

mkdir test

Djangoでソースを置きたいフォルダを作成し、今回はtestとして作った。 移動する。

次回は、Apache と mod_wsgi のインストールをしていきたいと思います。