GitコミットログのAuthorの変更

  • 2014.07.11

違うメールアドレスと名前で間違ってコミットしてそのままGitHubにpushしたら違うメールアドレスでちゃったやばいどうしよーとかっていうことやっちゃいがちですよね。 僕はたまにやっちゃって悲しい想いをします。

そんな時のための修正コマンドです。直前のコミットに関してはこれでいけます。

% git commit --amend --author='Author name <name@hoge.hoge>'

CabinJSのcode highlightにmonokaiをつくった

  • 2014.07.09

まさかの連続エントリー。CabinJS楽しくなってきたのでいろいろいじってみる。

とりあえずコード書いてみよう!と思い、highlightを試してみたところ、solarized-dark がデフォだった。というかsolarized-darkしかない。monokai大好き派としてはmonokaiを使いたい!

ということでmonokaiつくりました。早速適当なコードを書いてみましょう。

JavaScript

var Greetter = (function () {
    function Greetter() {
        this.hello = "hello world";
    }
    Greetter.prototype.greeting = function () {
        return this.hello;
    };
    return Greetter;
})();

var gree = new Greetter();
alert(gree.greeting()); // "hello world"

TypeScript

class Greetter {

    hello: string = "hello world";

    greeting(): string {
        return this.hello;
    }
}

var gree: Greetter = new Greetter();
alert(gree.greeting()); // "hello world"

良い感じです!monokai最高!

ソースこんな感じ

funnythingz.comを作りなおした

  • 2014.07.08

こんにちは!funnythingzです。

自分のサイトほど手をいれることがないので思い切ってリニューアルしてみました!

といってもCabinJSでちゃちゃっとgenerateしただけなので全然手間暇かかっていません。

昔はHTML/CSS/JS全部を自分でかかないと気がすまない派でしたが、最近はすっかりどうでもいいです。 車輪の再発明とかしてる暇あったらすでにある便利なものをつかってもっと生産的に開発していったらいいよねって思うくらいめんどくさがり屋になりました。

そんな感じで非生産的なこのfunnythingz.comはきっとこのまま何も更新されないでいくのだろうなと思ってます。

(・ω<)<てへぺろ

美人時計の画像を取得するPHPスクリプトを書いてみた2014版

  • 2014.05.25

ぐーてんもーげん!前回のブログから早2ヶ月、重い腰を上げてやっとブログを書く気がでたので久しぶりに更新します。

はるか昔、美人時計の画像収集をひたすらやっていた時期があって、なんだか懐かしくなって美人時計をみてみたんです。

そしたらものすんごい数の美人時計があってびっくりしました。 オフィシャル美人時計とローカル美人時計の棲み分けがいまいちわかりませんが、増えるのはとても良いことですね!ぜひとも全国制覇してほしいです。

さて、過去に収集していた身としてはまた収集してみたくなったのでついうっかりスクリプトを書いてしまいました。 昔はリファラー制御やら時間指定の制御やらいろいろ入ってて難しかったのですが

以前はRubyで書いてたのですが、今回は今さら感たっぷりのPHPで書いてみました。

<?php

date_default_timezone_set('UTC');

class BijintWGetter {

    static public function getBijintAll($type) {

        $dirname = date('Ymd') . '_' . $type;

        shell_exec('mkdir ' . $dirname);

        $commandList = array();

        $filename = '';
        for($hour = 0; $hour < 24; $hour++){
            for($minutes = 0; $minutes < 60; $minutes++){
                if($hour < 10){
                    if($minutes < 10){
                        $filename = '0' . $hour . '0' . $minutes . '.jpg';
                    } else {
                        $filename = '0' . $hour . $minutes . '.jpg';
                    }
                } else {
                    if($minutes < 10){
                        $filename = $hour . '0' . $minutes . '.jpg';
                    } else {
                        $filename = $hour . $minutes . '.jpg';
                    }
                }

                $command = 'wget http://www.bijint.com/' . $type . '/tokei_images/' . $filename . ' -P ' . __DIR__ . '/' . $dirname . '/';
                array_push($commandList, $command);

            }
        }

        foreach($commandList as $value) {
            shell_exec($value);
            sleep(1);
        }

    }

}

BijintWGetter::getBijintAll('jp');

使い方はTerminalを開いてこのスクリプトを実行するだけです。

% php get-bijint.php

特に難しいことはしていないのですが、サーバーに負担をかけないようにsleep(1)をいれて1秒ごとに取得するようにしています。

もちろん運営している美人時計様に迷惑がかからないようにしましょう。

よくわかるTypeScriptでjQueryを使う方法

  • 2014.03.25

こんにちは!ちょっとちゃんとブログを書いていこうと思った僕です。 今回はTypeScriptでjQueryを使う方法をわかりやすく紹介します。

準備

TypeScriptをインストール!

% npm install -g typescript

TypeScriptでjQueryを使うにはdefinition fileというjQueryのInterfaceが記述されたjquery.d.tsが必要になるので下記からダウンロードしてください。 もちろんjQueryも必要になるのでダウンロードしましょう。

ディレクトリ構造

こんな感じのシンプルな構成でいきます。

jquery.d.ts
jquery-2.1.0.min.js
app.ts
app.js
app.html

Hello world してみよう!

HTMLとTypeScriptをこんな感じで書きます。

app.html

<!Doctype><html><head><meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head><body></body></html>

app.ts

/// <reference path="jquery.d.ts" />

var $p: JQuery = $('<p class="greeting">');
$p.html('hello world');

$('body').append($p);

TypeScriptをコンパイルしよう!

% tsc app.ts

こんな感じでapp.html開いて hello world が表示されたらおkです!

WindowsにCygwin入れてSass/Compass/TypeScript/Gruntな環境を構築してみた

  • 2014.03.19

Windows環境しか使えないという場所でがっつりMac/UnixなユーザーのためにWindowsでコマンドプロンプト使うのつらたんってな環境がありまして、どうにかならないかと思ってググってみたらどうやら最近のCygwin(v1.7)はかなりいい感じらしい。 ということでCygwinいれてUnixライクな環境をつくってみることにした。

Cygwin Install

Cygwin公式サイトからsetup-x86.exeを落としてインストールする。 http://cygwin.com/install.html

導入パッケージ - git-svn - svn - git - zsh - screen - wget - tree - make - openssh - openssl - vim - g++ - ruby

apt-cyg Install

Cygwinのパッケージ管理としてapt-cygというものがある。 brewapt-getみたいな感じっぽい。

apt-cyg

https://github.com/transcode-open/apt-cyg

Usage apt-cyg

http://takuya-1st.hatenablog.jp/entry/20110205/1296887435

$ git clone https://github.com/kou1okada/apt-cyg.git
$ cp apt-cyg/apt-cyg /bin/
$ chmod +x /bin/apt-cyg

oh-my-zsh Install

Macではoh-my-zshをいれていてこれがないともう生きていけない体になってるのでCygwinにもいれる。 その前にzshをインストールする。

$ apt-cyg install zsh

zshを使ってみる。

$ zsh
% echo $SHELL
/bin/zsh

zshがはいったらoh-my-zshをインストールする。

oh-my-zsh

https://github.com/robbyrussell/oh-my-zsh

$ curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | ZSH=~/.dotfiles/zsh sh

Nodejs Install

gruntやらbowerやらでフロントエンド開発を幸せにするためにNodejsいれる。 公式からインストーラを落としてインストールする。

Nodejs

http://nodejs.org/

インストールの確認

$ which node
/cygdrive/c/Program Files/nodejs/node

インストールできるか試してみる

$ npm install -g grunt-cli

たぶんエラーが出るので、下記を参考にして対応をする

Node.jsをWindowsインストーラで入れたら、Cygwinのシェルでnpmがエラーになる

sass/compass Install

gemをアップデートする。

$ gem update

sass/compassをgemでインストールする。

$ gem install sass
$ gem install compass

インストールされたか確認。

$ gem list

*** LOCAL GEMS ***
compass (0.12.3)
sass (3.3.3, 3.2.14)

compassの動作確認。

$ compass create

プロジェクトが生成されたらscssをコンパイルしてみる。

$ compass compile
unchanged sass/ie.scss
unchanged sass/print.scss
unchanged sass/screen.scss

コンパイル通ればおk。

TypeScript Install

公式からインストールする。 http://www.typescriptlang.org/

インストール後、パスを確認。

$ which tsc

試しに書いてみる

hello.ts

class Hello {
  say(): string {
    return "hello";
  }
}

コンパイルしてみる。

$ tsc hello.ts

hello.jsが生成されてればおk。

grunt Install

gruntをインストールする

$ npm install -g grunt-cli

インストールされたか確認

$ which grunt

パスが表示されればおk。

Wordpressからmiddleman/GitHubに移行した

  • 2014.02.28

おひさしぶりこです、ぴぴぴです。

かれこれ7年くらいWordpressを使ってblogを運用してきたのですが、最近Octpressとかmiddlemanとか流行っていてWordpressじゃなくてもいいかなーって思ってきたのと、Markdownでブログ書きたいなと思ったので、ついにblogをWordpressからmiddlemanに移行しました!

参考にしたのは下記らへん。

http://middlemanapp.com/jp/basics/blogging/

middleman超いいです!

TypeScriptでqflipper.jsというものを書いた

  • 2013.10.06

TypeScriptのおかげでネイティブなJavaScriptを書けなくなってきた今日このごろ。TypeScript最高!うまし!

最近はスマートフォン向けのフリッカブルなJSライブラリがたくさんあふれてきましたね。 僕も過去に2つほどライブラリは書いたので(仕事ではもっと書いてるけど)ちらっと紹介。

レスポンシブに対応したjQueryライブラリとして開発したjQuery.jcflick.js。今はよき思い出。

jQuery.jcflick.js

https://github.com/funnythingz/jcflick

フリッカブルなJSなんてどうせiOSとAndroidでしか使わないじゃん!それってwebkitだけ対応しておけばおk! っていうオラオラなスタンスで開発したのがzflick.js。ほぼすべてをオプション化しほぼ全自動で初期化して動く。

zflick.js

https://github.com/funnythingz/zflickjs

しかしjQuery.jcflick.jsもzflick.jsもDOMを自動生成してしまうので独自の動きをつけたりカスタムがやりづらい部分がありました。

フリッカブルJS界隈ではflipsnap.jsが圧倒的な人気を誇っているようなのでどんなものかとみてみたところ開発者にとっては扱いやすい仕様になっていました。よくできてるってばよ!ってことで自分も最強のフリッカブルなJSを書いてやるぜ!ってな感じで書いてみました。

最近はお仕事でTypeScriptを書いているのでせっかくなのでTypeScriptで書いてみました。

qflipper.js

https://github.com/funnythingz/qflipper

とりあえずtouchイベントで対応。iOS, Androidで割りとさくさく動きます。よかったらぜひおためしくださいませ(^q^

GruntでTypeScriptとSass/Compassの面倒なコンパイルを自動化する

  • 2013.08.22

Grunt便利です! 最近のモダンなWeb開発環境はGruntでタスク管理するのがはやってるみたいですね。職場でもGruntの恩恵をがっつり受けています。

ここ1年半くらいはCSSもSass/Compassを導入していて、CSSをそのまま書くってこともすっかりなくなりました。JavaScriptも最近はTypeScriptで書いているのでそのままJavaScriptを書くということも減っていってます。

そんな感じですっかりTypeScriptとSass/Compassにどっぷりになってきたので面倒な手間をGruntで自動化するプロジェクトテンプレ的なものをつくってみました。

typeSC - This is TypeScript & Sass/Compass Project Template.

https://github.com/funnythingz/typeSC

Sass/Compassをインストール

Rubyが入っている前提ですすめていきます。

% gem install sass
% gem install compass

% gem list

*** LOCAL GEMS ***
compass (0.12.2)
sass (3.2.9)

% which sass
/usr/bin/sass

% which compass
/usr/bin/compass

こんな感じでインストール完了。

NodeJSをインストール

まずはNodeJSをインストールする。公式からインストーラーを落としてインストールする。 http://nodejs.org/

インストールできるとこんな感じになる。

% which node
/usr/local/bin/node

% node -v
v0.10.17

TypeScriptをインストール

nodeがインストールできたらTypeScriptをインストールする。

% sudo npm install -g typescript

% which tsc
/usr/local/bin/tsc

% tsc -v
Version 0.9.0.1

grunt-cliをインストール

次にgrunt-cliをインストールします。

% sudo npm install -g grunt-cli

typeSCを使う準備

githubのリポジトリからgit cloneします。 cloneしたらgrunt関連のファイルをインストールします。

% git clone https://github.com/funnythingz/typeSC.git
% cd typeSC
% npm install

エラーが出なければインストール完了です。

typeSCを使ってみる

typeSCのデフォルト設定では、各ソースファイルは下記のように管理します。

.ts ... src/**/*.ts
.scss ... src/sass/**/*.scss

コンパイル後は公開ディレクトリに下記のように書きだされます。 複数のtsファイルはコンパイル後、typesc.jsというひとつのJSファイルになります。さらに圧縮されたtypesc.min.jsも同時に書きだされます。

.js ... public/typesc.js, public/typesc.min.js
.css ... public/css/typesc.css

それではソースを書いてみます。 とりあえずSassはこんな感じで適当に。

sass/typesc.scss

@charset "utf-8";
@import "compass/css3";

@mixin medium {
  font-size: 14px;
}
@mixin small {
  font-size: 12px;
}

.cassette {
  display: block;
}

.item {
  @extend .cassette;
  @include medium;
}
.list {
  @extend .cassette;
  @include small;
}

TypeScriptを書いてみます。 typeSCのデフォルト設定ではsrcディレクトリにある複数のtsファイルはJSコンパイルの際に結合されるので、human.ts, name.ts, age.ts のように複数のtsファイルを書いてみました。

src/human.ts

/// <reference path="name.ts" />
/// <reference path="age.ts" />

 module TYPESC {

 export class Human {
   private name: Name<string>;
   private age: Age;

   constructor(first: string, last: string, age: number) {
     this.name = new Name(first, last);
     this.age = new Age(age);
   }

   public sayName(): Name<string> {
     return this.name;
   }

   public sayAge(): Age {
     return this.age;
   }
 }

 export class M extends Human {}
 export class F extends Human {}

}

src/name.ts

module TYPESC {

  export class Name<T> {
    public first: T;
    public last: T;

    constructor(first: T, last: T) {
      this.first = first;
      this.last = last;
    }
  }

}

src/age.ts

module TYPESC {

  export class Age {
    public count: number;

    constructor(count: number) {
      this.count = count;
    }
  }

}

書き終わったらいよいよコンパイルです。

gruntでコンパイルする

コマンドは下記の通りです。

コンパイル

% grunt

監視しながらリアルタイムでコンパイル

% grunt watch

webサーバーを起動します。http://localhost:8000 にアクセスするとpublicフォルダがみれます

% grunt server

それではコンパイルしてみましょう。

% grunt

Running &quot;typescript:base&quot; (typescript) task
3 files created. js: 3 files, map: 0 files, declaration: 0 files

Running &quot;concat:dist&quot; (concat) task
File &quot;public/typesc.js&quot; created.

Running &quot;uglify:build&quot; (uglify) task
File &quot;public/typesc.min.js&quot; created.

Running &quot;clean:0&quot; (clean) task
Cleaning src/age.js...OK
Cleaning src/human.js...OK
Cleaning src/name.js...OK

Running &quot;compass:dist&quot; (compass) task
directory public/css/
   create public/css/typesc.css (0.117s)
Compilation took 0.117s

Done, without errors.

こんな感じでコンパイルできたら成功です! コンパイルされたファイルはこんな感じであると思います。

public
├── css
│   └── typesc.css
├── index.html
├── typesc.js
└── typesc.min.js

こんな感じでSass/CompassもTypeScriptも面倒なコンパイルから開放されるのでさくさくと開発に集中できます。Gruntいいね!

TypeScript入門

  • 2013.07.04

仕事でTypeScriptをやることになったのでとりあえず入門しておく。まずインストールするところから。

node.jsがインストールされている前提ですすんでいく。

% sudo npm install -g typescript
Password:
npm http GET https://registry.npmjs.org/typescript
npm http 200 https://registry.npmjs.org/typescript
npm http GET https://registry.npmjs.org/typescript/-/typescript-0.9.0-1.tgz
npm http 200 https://registry.npmjs.org/typescript/-/typescript-0.9.0-1.tgz
/usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc
npm WARN package.json github-url-from-git@1.1.1 No repository field.
npm WARN package.json assert-plus@0.1.2 No repository field.
npm WARN package.json ctype@0.5.2 No repository field.
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/couch-login requires request@'~2.9.202' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/request,
npm WARN unmet dependency which is version 2.21.0
typescript@0.9.0-1 /usr/local/lib/node_modules/typescript

% which tsc
/usr/local/bin/tsc

% tsc -c
Version 0.9.0.1

インストール完了。とりあえず “Hello World.” 書いてみる。

% vim toggle.ts
class Ore {

  message : string = "Hello World.";

  constructor() {
  }

  say(message : string) : void {
    this.message = message;
    console.log(this.message);
  }
}

var ore : Ore = new Ore();
ore.say('Hello World.');

tsファイルをコンパイルしてみる。

% tsc toggle.ts

コンパイル結果。

var Ore = (function () {
  function Ore() {
    this.message = "Hello World.";
  }
  Ore.prototype.say = function (message) {
    this.message = message;
    console.log(this.message);
  };
  return Ore;
})();

var ore = new Ore();
ore.say('Hello World.');

でけた!