TypeScriptについて発表した

最近TypeScriptを触ったりしてたので、開催した勉強会で発表してみました。

スライド

TypeScript紹介とJSライブラリの世界

サンプル

TypeScriptで簡単なサンプル(三目並べ)を作ってみました。

meganehouser/ts-ticktacktoe · GitHub

開発環境

TypeScript 0.9
IDE Visual Studio 2012 Express for Web
テストランナー Testem

自分のJavaScript知識がAjax流行りだした頃で止まっていたのですが、今は便利なライブラリがたくさんあるんですね。 このサンプルではKnockout.js, underscore.js, jasmineを使っています。

F#談話室に憧れて知り合いでIT勉強会開いた話

F#談話室に何回か出席させてもらっているのですが、その雰囲気が好きなので、自分でもそのような会を開いてみました。

F#談話室とは

月1回ペースで7shiさんが開催されているF#に関する勉強会です。 目的は限定しないで、F#について語ったり、語らなかったり、もくもくと作業したり、LTしたりしている会です。 その自由な雰囲気とか、F#について何でも話しやすい場が好きで何回か参加しました。

F#談話室 - connpass

IT勉強会の開催動機・目的

知り合いにエンジニアが何人かいるけれど、一緒にコード書いたり、技術について語ったりして見たいなぁ、と思い開催してみました。

お互いの興味のある技術について知ったり、業務や現場について情報交換したり、コードを書きながらわいわいするのが目的です。

開催概要

場所

池袋のレンタル会議室「マイスペース&ビジネスブース 池袋西部横店」

My Space マイスペース&ビジネスブース 池袋西武横店 | 店舗検索|ルノアール

8名参加、4時間、オプションで無線LAN・プロジェクターを借りて一人当たり1800円くらいです。

飲食持ち込み禁止ですが、ドリンクバーがあります。

内容

  • 自己紹介・今回自分がやる作業の紹介
  • わいわいしながら作業
  • LT
  • 作業の成果発表

特に作業やLTのテーマは定めませんでした。

実際やってみて

各参加者がこの会でやってた作業

  • Twilioで電話対応システムの開発
  • 形態素解析エンジンのmecabを触ってみる
  • C#Redmineのチケット投稿ツールを開発
  • JavaScriptの書籍を参考に簡単なゲームを作ってみる
  • iOSアプリ開発の学習
  • サポートページのWebデザイン
  • F#でDelta Engineを触ってみる

見事にバラバラw

LTの内容

  • FP(ファイナンシャル・プランナー)試験の薦め
  • TypeScriptとJSライブラリの紹介
  • テストコードを書くことのメリットについて

収穫

やはりいろんな他業種のエンジニアの参加者と情報交換できたのは楽しかった。

特に、Webデザインをやっている参加者や転職経験者の参加者からは、興味深い話を聞くことができました。

課題

テーマを定めなかったため、各自の作業テーマがバラバラになり、作業について質問や議論などが発生しづらい状況でした。 何かゆるくてもテーマなどあった方がいいかもしれません。

まとめ

この規模の勉強会は気軽に開けて、楽しかったのでおすすめです。 他の参加者からも「また参加したい」「次回はLTやります」など言ってもらうことができ、会としても成功したのかなと思います。

球根の水栽培について

植物の根や茎、葉がガンガン伸びたり、花が咲いたりを見るのは心が和むものです。
もう秋植えの球根が出回ってるのでおさらいがてらまとめる。

1.水栽培が可能な球根

 以下のような球根が可能

上記の球根は肥料を与えなくても花が咲く。球根内にすでに十分な養分を蓄えているため。
また、球根の時点で内部に花芽ができる種類であることも条件らしい。
球根は9月末から10月にかけてホームセンターや園芸店に出回る。

2.器

器は水栽培専用の器が販売されている。
専用のものでなくても、球根が固定できればなんでもよい。
クロッカスなどは丈が小さいため、コップに高分子ポリマーを引き詰めただけでも大丈夫。

3.育て方

3.1.寒さに当てる

秋植えの球根は、冬の寒さに当たることによって花芽をつけるらしい。
しばらく外に置いておく。

3.2.根を伸ばす

10月頃から栽培を行う。
容器に、球根の底部に水が触る位に入れる。
※ 水位が高く水が触れる部分が多いとカビが生える!!生えた!!

球根を容器に置き、暗いところに置いておく。
(被いなどをかける)
球根に土の中にいると錯覚させるためである。暗い方が根の伸びが良い。気づくと根がガンガン伸びる。楽しい。
水が濁ったら取り替えること。
根が伸びてきたら少しずつ水位を下げ、最終的に3分の2程度にする。

3.3.発芽後

芽が出始めたら、室内の明るいところに移す。
※ 日当たりが悪いとひょろひょろになる!!なった!!

1月中ごろまでは、あまり暖房の効かない部屋で管理する。
水が濁ってきたら取り替える。

春ごろ、咲く!

CPUとメモリ消費量の3次元グラフをぐりぐり動かす

matplotlibの3次元グラフ描いてみたい!そしてグラフをアニメする機能があるらしいのでぐりぐり動かしたい!

1. WindowsでCPUとメモリの消費量を取得する。

ぐりぐりリアルタイムで動かすデータと言えばCPUとメモリ消費量が気軽でいいかな。Windowsではちょうどいいコマンドが用意されていないので探したらPythonのモジュールでちょうどいいのがあった。


psutil -


A cross-platform process and system utilities module for Python - Google Project Hosting

プロセスとシステムの使用量(CPU, disk, memory, network)を取得できる。
しかもLinux, Windows, OSX,FreeBSDに対応!32bitでも64bitでも!頼もしい!

(1) システムのCPU使用量(%)
import psutil
psutil.cpu_percent(interval=0.1, percpu=False)
  • intervalはCPU割り当て時間の計測期間
    • CPU割り当て時間 / 経過時間 * 100
    • interval=0.0 の場合は前回にこのメソッドが呼び出され時から計測
  • percpuは複数CPUある場合の挙動
    • Falseの場合は結果は1個にまとめられる。(上限は100%)
    • Trueの場合は結果はCPUの個数分、リストで出力される。
(2) システムの物理メモリ使用量(%)
import psutil
psutil.used_phymem()
(3) プロセスのCPU使用量・メモリ使用量
import psutil
# プロセスIDからProcessオブジェクトを生成
p = psutil.Process(pid)

# CPU使用量(%)
# interval引数の使い方は(1)と同様
# CPUが複数個の場合はCPU個数*100が上限となる
p.get_cpu_percent(interval=0.0)
# メモリ使用量(%) 
p.get_memory_percent()

2.3次元グラフを動かす

(1) 3次元のグラフ描画
from mpl_toolkits.mplot3d import Axes3D
import numpy as np
import matplotlib.pyplot as plt

# Axes3DSubplotを取得
fig = plt.figure()
ax = fig.gca(projection='3d')

# 直線をプロット
x = [i for i in range(10)]
y = [i for i in range(10)]
z = [i for i in range(10)]
line, = ax.plot(x, y, zs=np.array(z), zdir='z')
plt.show()
(2) グラフを動かす

matplotlib.animationのFuncAnimation関数を使用する。

import matplotlib.animation as animation
line_ani = animation.FuncAnimation(fig, update_line, frames=360,
                                        fargs=(line, ax),
                                        interval=100, blit=False)
plt.show()
引数
fig Figureオブジェクト
func グラフを更新する関数。この関数の1個目の引数は現在のフレーム数が渡される。
frames 描画するフレーム数
fargs funcに渡す引数
interval グラフを更新する間隔
blit 描画するグラフを最適化するかどうか(?)
グラフを更新する関数の例
def update_line(num, line, ax):
    # ラインの更新
  # x軸、y軸、z軸それぞれに値リストをセットする。(伸びてく直線)
    line.set_xdata([i for i in range(num)])
    line.set_ydata([i for i in range(num)])
    line.set_3d_properties([i for i in range(num)])
    # グラフ全体を回転
    ax.view_init(30, 1 * num)

3.作ったスクリプト

psutil と matplotlib を使用してシステム・プロセスの3次元グラフ(x軸:メモリ使用量、y軸:時間、z軸:CPU使用量)をリアルタイムで描画するスクリプト。
This is a script which draws the amount of CPU used and memory usage of a process to a 3D graph. — Gist
(GitHubのGistを使ってみた。初回保存時、ログオンし忘れててAnonymousになってしまった……。)

<実行例>

f:id:meganehouser:20120206232535p:image
FuncAnimationの結果を動画で保存できるっぽいんだけどうまくいかない…。

全「???48」を生成してみる

課題1

  • 大文字のアルファベット3文字 + '48' の全パターンのリストを作る

解答 その1

単純にループの入れ子で
# まず大文字のアルファベットのリストを作る
al = [chr(a) for a in range(65, 91)]

# 全パターンのジェネレータ
def akb():
    for a1 in al:
        for a2 in al:
            for a3 in al:
                yield a1 + a2 + a3 + '48'
# リストで取得
allptns = [p for p in akb()]

allptns.index('AKB48') #=> 本家は261番目に出てきた

解答 その2

リスト内包表記の入れ子
# al は大文字アルファベットのリスト
# 全パターンのリスト
allPtns = [a1 + a2 + a3 + '48' for a1 in al for a2 in al for a3 in al]

解答その3

アルファベットの桁数を指定できるようにしてみる

# al は大文字アルファベットのリスト

# 2個のリストを組み合わせる関数
getprd = lambda list1, list2 : [a1 + a2 for a1 in list1 for a2 in list2]

# 全パターンのリストを生成する関数
def akb(num):
    temp = ['']
    def _akb(tl, n):
        if n == 0:
            return getprd(tl, ['48'])
        else:
            return _akb(getprd(tl, al), n - 1)
    return _akb(temp, num)
allPtns = akb(3)

なんかいまいちだなー。もっとかっこよい解答求む。

課題2

課題1に制限を加える

アルファベット3文字は別々のアルファベットを使う(AAAとかAABはダメ)

解答

課題1の解答3のリストを組み合わせる関数(getprd)を以下に修正すれば対応できる。

# 2個のリストを組み合わせる関数(重複省く)
getprd = lambda list1, list2 : [a1 + a2 for a1 in list1for a2 in list2 if a2 not in a1]

課題2の場合は本家は216番目に出てきた。

やってみた感想

ループとか関数とか考えながら書けるので、初めてのプログラミング言語に取り組むときはHello Worldよりこの課題やると楽しそう。

別解

ちなみに標準モジュールのitertoolsを使えば以下のように書ける。
至れり尽くせり!

import itertools
# al は大文字アルファベットのリスト

# 課題1
allptns1 = [''.join(a) + '48' for a in itertools.product(al, al, al)]
# 課題2
allptns2 = [''.join(a) + '48' for a in itertools.permutations(al, 3)]

EXIFタグで写真の情報を見てみる

自分がデジカメで撮った写真のEXIFタグ情報を見てみようかと思い立った。大量に集めれば何か撮影の傾向が見えるかも?
とりあえずPythonEXIF情報を取得してみよう。

1.EXIF情報を取得するモジュール

EXIF.py プロジェクト日本語トップページ - SourceForge.JP
2008年8月のリリース以後、更新されていないので2010年に策定されたExif2.3に対応したデジカメだとうまく情報がとれないかもしれない。

Exif規格に7年ぶりの新バージョンExif 2.3 - PhotoXP


自分のデジカメは2011年1月発売のOLYMPUS PEN Lite E-PL2。まあ試してみてダメだったら考えよう。

2.EXIFを読み込み!

EXIFモジュールのprocess_file関数使用する。

> from EXIF import process_file
> fp = r'd:\sample.jpg' # EXIFタグを読みたい画像ファイルパス
> f = open(fp, 'rb')
> exifDic = process_file(f)

process_fileは以下の名前付き引数が指定できる。

名前 既定値 説明
stop_tag 'UNDEF' 出現した場合に読み込みを切り上げるタグ名を指定する
details True メーカーが独自に使っているMakerNoteタグを読み込むかどうか。
strict False タグ読み込み時にエラーが発生した場合に実行を停止するかどうか。
debug False タグ読み込み時にデバッグレベルの情報を出力するかどうか

戻り値はタグ名がkeyでEXIF.IFD_Tagのインスタンスをvalueとする辞書型となる。

> ifdTag = exifDic['Image Model'] #IFD_Tagのインスタンス
> dir(ifdTag)
['__doc__',
 '__init__',
 '__module__',
 '__repr__',
 '__str__',
 'field_length',
 'field_offset',
 'field_type',
 'printable',
 'tag',
 'values']

E-PL2のタグはdetailsにFalseを指定すると読み込むことができた。

3.サンプル画像を読み込む!

以下の関数で、フォルダ内のjpgファイルのEXIFタグ情報を一度に読めるようにする。

ExifReader.py

#cording:utf-8
import EXIF
import os
import glob

# 読み込みたくないタグは以下に指定する
excludetags = ['JPEGThumbnail','TIFFThumbnail']

def getTagValueDict(filePath):
    f = open(filePath, 'rb')
    exifTags = EXIF.process_file(f, details=False, strict=False)
    f.close()
    exifKeys = [key for key in exifTags.keys() if key not in excludetags]

    exifDict = {}
    for exifKey in exifKeys:
        exifDict[exifKey] = exifTags[exifKey].printable
    return exifDict

def getTagValueDicts(root, pattern='*.jpg'):
    files = glob.glob(os.path.join(root, pattern))
    exifDicts = {}
    for file in files:
        tags = getTagValueDict(file)
        exifDicts[os.path.basename(file)] = tags
    return exifDicts

EXIF.py プロジェクト日本語トップページ - SourceForge.JPではサンプル画像もダウンロードできるので読み込ませてみる。
デジカメで撮った画像である以下を対象とする。

Canon_40D.jpg
Canon_DIGITAL_IXUS_400.jpg
Fujifilm_FinePix6900ZOOM.jpg
Fujifilm_FinePix_E500.jpg
Kodak_CX7530.jpg
Konica_Minolta_DiMAGE_Z3.jpg
Nikon_COOLPIX_P1.jpg
Nikon_D70.jpg
Olympus_C8080WZ.jpg
Panasonic_DMC-FZ30.jpg
PC040163.JPG
Pentax_K10D.jpg
Ricoh_Caplio_RR330.jpg
Samsung_Digimax_i50_MP3.jpg
Sony_HDR-HC3.jpg
WWL_(Polaroid)_ION230.jpg

さらにE-PL2で撮った画像を一枚対象に含める。

全機種で使われているタグを調べてみる

> from ExifReader import getTagValueDicts,getTagValueDict
> rootPath = r'D:\Exif_test_images' # サンプル画像のフォルダ
> exifTagsDict = getTagValueDicts(rootPath)
> tagSets = [tagnames for dic in exifTagsDict.values() for tagnames in dic.keys()]
> distinctTags = reduce(lambda x,y: x.intersection(y) ,tagSets)
> distinctTags
set(['EXIF Flash', 'Image ExifOffset', 'Image Model', 'EXIF ColorSpace', 'EXIF DateTimeOriginal', 'Image XResolution', 'Image Make', 'Image DateTime', 'Image YResolution', 'EXIF FNumber', 'EXIF ExifImageLength', 'Image ResolutionUnit', 'EXIF ExifImageWidth'])

サンプル画像のExifバージョンを調べる

> versions = [str(v) for tags in exifTagsDict.values() for t,v in tags.iteritems() if t=="EXIF ExifVersion"]
> set(['0220', '0221', '0210'])

ちなみにE-PL2で撮った画像の結果は以下

> d = getTagValueDict(epl2FilePath)
> tagNames = sorted(d.keys())
>  for t in tagNames:
    v = d[t]
    print t,':'v

EXIF ColorSpace : sRGB
EXIF ComponentsConfiguration : YCbCr
EXIF Contrast : Normal
EXIF CustomRendered : Normal
EXIF DateTimeDigitized : 2011:12:04 12:18:44
EXIF DateTimeOriginal : 2011:12:04 12:18:44
EXIF DigitalZoomRatio : 1
EXIF ExifImageLength : 4032
EXIF ExifImageWidth : 3024
EXIF ExifVersion : 0221
EXIF ExposureBiasValue : 0
EXIF ExposureMode : Auto Exposure
EXIF ExposureProgram : Program Normal
EXIF ExposureTime : 1/500
EXIF FNumber : 71/10
EXIF FileSource : Digital Camera
EXIF Flash : Auto Off
EXIF FlashPixVersion : 0100
EXIF FocalLength : 17
EXIF GainControl : None
EXIF ISOSpeedRatings : 200
EXIF InteroperabilityOffset : 17202
EXIF LightSource : Unknown
EXIF MaxApertureValue : 761/256
EXIF MeteringMode : Pattern
EXIF Padding : []
EXIF Saturation : Normal
EXIF SceneCaptureType : Standard
EXIF Sharpness : Normal
EXIF Tag 0xEA1D : 1872
EXIF WhiteBalance : Auto
Image Artist : 
Image Copyright : 
Image DateTime : 2011:12:31 21:47:17
Image ExifOffset : 2538
Image ImageDescription : OLYMPUS DIGITAL CAMERA         
Image Make : OLYMPUS IMAGING CORP.  
Image Model : E-PL2           
Image Orientation : Horizontal (normal)
Image Padding : []
Image PrintIM : [80, 114, 105, 110, 116, 73, 77, 0, 48, 51, 48, 48, 0, 0, 37, 0, 1, 0, 20, 0, ... ]
Image ResolutionUnit : Pixels/Inch
Image Software : Microsoft Windows Photo Viewer 6.1.7600.16385
Image XResolution : 314
Image YCbCrPositioning : Co-sited
Image YResolution : 314
Thumbnail Compression : JPEG (old-style)
Thumbnail JPEGInterchangeFormat : 17864
Thumbnail JPEGInterchangeFormatLength : 5873
Thumbnail ResolutionUnit : Pixels/Inch
Thumbnail XResolution : 72
Thumbnail YResolution : 72