調査メモ

Mastodon (マストドン) とは何か

2017-04-24T11:09:00.001+09:00

Mastodon (マストドン) とは？

A GNU Social-compatible microblogging server

Mastodon とは GNU social と互換性のある短文投稿型SNS。
ネットワークは複数の インスタンス から構成されており、インスタンス間は OStatus を用いて通信を行う。

投稿は トゥート と呼ばれ、500文字の制限がある
ライセンス: AGPL-3.0

GNU social - Wikipedia

PHPで書かれたミニブログサーバーのフリー・オープンソースソフトウェア

OStatus

OStatus - Wikipedia

OStatusは分散型ミニブログのためのオープン標準である。Atom、Activity Streams、PubSubHubbub、Salmon、Webfingerといったオープンプロトコルによって構成されており、異なるサイト間においてユーザー同士の投稿をほぼリアルタイムで届けることを可能にする。

システム構成

Webアプリ
- サーバーサイド: Ruby on Rails
- クライアントサイド: React & Redux
ストリーミングサーバー: express & WebSocket (Node.js)
Database
- PostgreSQL
- Redis

Windows Update のダウンロードが 0% のまま進まない場合の対処方法

2017-02-08T18:49:00.001+09:00

以下の操作によって不具合等が発生したとしても、一切の責任を負いかねます。ご了承ください。

現象

いつまでたってもWindows Updateのダウンロードが 0% のまま進まない (今回は KB2267602 で発生しましたが、どの更新かはあまり関係ないように思われます)
タスクマネージャーでディスクの使用率が 100% になっている

再起動等してもWindows Updateがキャンセルできず、サービスも停止できないという状況でした。

Windows Defender が悪さしてるのかも？と思ってWindows Updateと一緒にキャプチャしていますが、結果的に冤罪でした。

対処方法

今回紹介する手順を実施する前に、以下のページに記載されている対処方法を順に試した方が良いです。
Windows 10 - Windows Update に失敗する場合の対処法 - マイクロソフトコミュニティ

私が紹介する対処方法は最終手段だと思います。

Windows Updateでダウンロードするファイルは %SystemRoot%\SoftwareDistribution というフォルダに保存されているのですが、こいつが破損しているんじゃないかなー、と考えました。
それであれば、 SoftwareDistribution フォルダをサックリ削除してしまえば問題解決しそうです。

ただ、SoftwareDistribution フォルダは当然 Windows Update がアクセスしており、削除もリネームも出来ません。なので、Windows Updateが起動しないようにセーフモードで作業します。

1. セーフモードで起動する

Windows Update がキャンセルできず、サービス管理からも停止できない (停止処理中のままになる) という状況なので、まずは セーフモード で起動します。

Windows XP なんかだと起動時に F8 キーを連打することでセーフモードで起動するのですが、Windows 10 ではこの方法も変更されています。

こちらのサイトが詳しいですが、セーフモードで起動する方法はいくつかあります。
「Windows 10」をセーフモードで起動する方法について

私は Windowsの設定 から起動しました。

スタートメニューの左アイコンの歯車をクリックすると、Windowsの設定 が起動します。
更新とセキュリティ をクリック
左メニューから 回復 を選択
PCの起動をカスタマイズする の 今すぐ再起動する というボタンをクリック

PCが再起動します。
起動すると、真っ青な画面に幾つかのパネルが表示されます。

トラブルシューティング をクリック
詳細オプション をクリック
スタートアップ設定 をクリック
再起動 をクリック

再びPCが再起動します。
スタートアップ設定 という画面が表示されるので、F4 キーを押してセーフモードを有効にします。

ログイン画面が表示されるので、パスワードを入力してログインします。
やっとこさ、どこか懐かしい四隅に セーフモード と書かれたデスクトップが表示されます。

Microsoftはセーフモードでログインさせたくないんだろうなー、というほど面倒くさい手順です。

2. SoftwareDistributionフォルダをリネームする

さて、苦労してセーフモードで起動することができましたので、諸悪の根源であろう SoftwareDistribution フォルダを表示します。

エクスプローラから C:¥Windows にアクセスします。
SoftwareDistribution というフォルダを探します。無ければ Windows Update 云々以前の問題なので、おとなしくWindowsを再インストールしてください。
サックリ削除しても良い気がしますが、何か問題があっても怖いので、フォルダをリネームしておきます。私は SoftwareDistribution.bak としました。
もうセーフモードに用はないので、普通に再起動します。

3. 再び Windows Update を行う

再起動して普通にログインし直したら、タスクマネージャーを立ち上げてしばらく様子を見ましょう。
起動直後の数分はディスク使用率 100% になるのは当たり前です。30分くらい放置して、ディスク使用率が落ち着くのを確認しましょう。

SoftwareDistribution フォルダは Windows Update を実施すると自動的に作成されるみたいです。
私の場合、先月のWindows Update もまともに動いていなかったようなので、改めて Windows Update を実施することにしました。

さて、現象は解決しているのでしょうか？
この数時間の作業が灰燼に帰すのかどうか…

ででーん！
無事、Windows Updateが完了しました！

いやー、原因の調査などなどで丸一日かかってしまいました…
この記事が誰かのお役に立てれば幸いです。

参考

Tech TIPS：Windows Update／Microsoft Updateのトラブルを解消する（SoftwareDistributionフォルダを修復する方法） - ＠IT

第1回サーバレスアーキテクチャのお勉強 - DynamoDB

2017-01-11T17:29:00.001+09:00

サガスカーレットグレイスに手を出してしまいました…
序盤は大剣＆斧のゴリ押し戦法で全滅しまくりでしたが、最近は小剣技の便利さに気付き、それなりに安定してきました。
そろそろ1周目が終わるかな？

それはさておき、昨年から引き続きサーバレスアーキテクチャなWebアプリケーションの作成手法について勉強していきたいと思います。

DynamoDBについて

勉強会の開催情報は Amazon DynamoDB に格納していきます。

DynamoDBはNoSQLデータベースなので、Oracleなどのリレーショナルデータベースとはテーブル設計の考え方が異なります。

公式の開発者ガイド (http://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Introduction.html) に目を通しましたが、とても一度で理解できる内容ではないので、詳細はおいおい把握していこうと思います。

ちなみに、以降にスクリーンショットを掲載していますが、2017年1月時点のものであり、将来的に変更になる可能性大です。

テーブルの作成とデータの登録

(1) AWSのコンソールにサインインし、DynamoDB のリンクをクリックします。
テーブルの作成 というボタンがあるので、クリックします。

(2) 以下のような画面が表示されます。

今回、勉強会のイベント情報を管理したいので、 Events というテーブル名とします。
キーは EventId で良いでしょう。
で、実際の画面には開催日順にイベントが並んでいるのが普通だと思いますので、ソートキーに Date を指定しておきます。

型は 文字列, バイナリ, 数値 の3種類しかないようなので、どちらも文字列にしておきます。

(3) テーブルを作成すると一覧画面が表示されます。

最初のうちは 状態 が作成中のままですが、そのうち 有効 となります。
リストから作成したテーブルを選択すると、右側に詳細情報が表示されます。

(4) 詳細情報の 項目 タブでデータの登録ができます。

DynamoDB では、テーブル作成時に指定した パーティションキー と ソートキー 以外の項目は任意に追加できます。

とりあえず、テストデータとして「ほげほげ」というデータを登録してみました。

DynamoDB のパフォーマンスを活かすためにはパーティションキーやソートキーを工夫したり、RDBとはちょっと異なるテーブル設計にする必要があるみたいです。

今回のWebアプリではタグを付けてイベントを分類するくらいは実装したいと思っていますが、タグ情報を格納するテーブルなどは後に作成しようと思います。
全文検索は Elasticsearch Service を使うのかな？

ここまで書いといてアレですが、今回のような要件であれば Amazon RDS を使用すべきだった気もしますが…まぁ、勉強なのでいいか。

と、いうことで、次回はいよいよ Lambda を触ってみたいと思います。

第0回サーバレスアーキテクチャのお勉強 - システム概要

2016-12-26T19:01:00.001+09:00

勉強会情報配信アプリの作成を通して、サーバーレスアーキテクチャ のお勉強をしていきます。

サーバーレスアーキテクチャとは？

物理サーバーや仮想サーバー(EC2など)、コンテナ(dockerなど) を使用しないシステム設計のこと …だと理解しています。

具体的には、以下の2パターンの構成が見られます。

Google Firebase や Parse.com(もうすぐサービス終了) といった、BaaS (Backend as a Service) を組み込んだ構成
AWS Lambda や Azure Functions といった FaaS (Function as a Service) を組み込んだ構成

今回の一連の記事において サーバーレスアーキテクチャ といえば 2. の方を指すこととします。

アプリの概要

毎月、フリーランスの仲間内でIT勉強会を開催しています。
その開催案内や勉強会で使用する資料の置き場所などの情報共有を行うWebアプリケーションの開発を行います。

システム構成の検討

ざっくりですが、上記のようなシステム構成を考えました。
今回のアプリ開発はAWSの勉強も兼ねているので、ほとんどをAWSのマネージドサービスだけで構成します。

次回は DynamoDB のテーブル設計をしていきたいと思います！

温泉宿で開発合宿してきました

2016-07-22T13:58:00.000+09:00

フリーランスの仲間を誘って、7/1～3 に温泉宿で開発合宿をしてきました。

総勢14名、広間にPCを広げて作業です。

特に目標などは設けませんでしたし参加者の属性もバラバラなので、他のソフトウェア企業がやっているような開発合宿とは、すこし趣が違うのかもしれません。

どちらかというと温泉宿に来てもくもく会を開催した、って感じでしょうか。

言い出しっぺだったので、宿の選定や会計、タイムスケジュールの作成などやらせてもらいました。

どれくらいの予算が良いのかいまいち掴めず、1日あたり1万円前後かなー、という感じで計画しましたが、ちょっとケチりすぎた感じがします。

費用面を重視したために田園風景広がる自然豊かな場所にポツンとある宿になってしまいました。

施設の清潔感がイマイチ (他の参加者からも言われた) でしたが、一泊二食付き 8,000円とかなので、こんなもんかなー、という感じです。次回は予算含めて見直したいですね。

東京方面だと「開発合宿プラン」がある温泉宿なんかもチラホラあるみたいですが、関西で探すとなかなか難しいです。

無線LAN完備で会議室と広いお風呂が 24時間利用可能、なんていう宿泊施設があると良いんですが。

Slackとは？

2016-02-09T20:37:00.001+09:00

Slack

SaaSのチャットアプリ

利点

マルチプラットフォーム
- Webアプリなので Windows, Mac, Linux で使用可能
- electronで作成されたデスクトップアプリもある
- Android, iOSアプリも当然ある
- 複数端末同時ログイン可能
他のシステムとの連携機能が豊富
- GithubやGoogle Driveなど、様々なサービスと容易に連携可能
- 無料枠では10システムまで連携可能
- WebhookやAPIを使用することで、デフォルトでは提供されていないシステム(社内システムなど)とも連携可能

markdown が投稿でき、ソースコードはシンタックスハイライトされる点が
プログラマ同士の会話に非常に適している事が
競合の他サービスと比較して、IT系企業で積極的に導入されている理由と考えられる。

インターフェースが英語のため、プログラマ以外の職種には
ChatWork や HipChat といったサービスの方が受け入れられやすい模様。

無料の範囲

https://get.slack.help/hc/en-us/articles/201723133-Billing-FAQ#can-i-use-slack-for-free
Can I use Slack for free?
Yes, you can use Slack for free. You’ll only be able to browse and search your team’s 10,000 most recent messages, and you’ll be limited to 5GB of file storage and 10 apps or custom integrations.

直近 10,000件までの検索
5GBのストレージ
10個までのアプリ連携

価格

一人あたり一ヶ月 8ドル (アカウントがアクティブかどうかで日割り計算)

参考

Slackメモ

Slack が広がっている背景のひとつとして、ChatOps の流行の影響が考えられる。
ChatOps とは文字通り、コンソールの代わりにチャットにて運用オペレーションを行う事である。

ChatOps

チャットチャンネルに常駐するボットにコマンドを投げて、システム運用を行う。
Github が取り入れていることで有名。
PublicKey | GitHubが1月28日のサービス障害の詳細を公開。停電により内部のChatOpsシステムも落ちて初期対応が困難に。Redisクラスタの復旧に時間

ChatOps のメリットとして、以下の様な点が考えられる。

多数の人間が見ているチャットにコマンドを投げることにより、間違い等に早期に気づきやすい
チャットのアーカイブ機能や検索機能によって、過去の操作履歴を追いかける事が可能
わざわざ各サーバーにログインする必要がなくなる
- 昨今は仮想化・コンテナ化の結果、とんでもない台数のサーバーを管理する必要があるので、人間が「どのサーバーにログインする必要があるか」とか把握しきれない

electron触ってみた

2016-02-08T19:50:00.001+09:00

electron触ってみた

electron でローカルで動くGraphviz のビューア兼エディタを作った。

electron-viz

とりあえず動くけど、使い勝手とかが微妙なのでパッケージ化はしない。

作ってみて感じたこと

クライアントサイドとサーバーサイドのjsが混じってて面白い

ブラウザ側の処理か、Node.js側の処理か？みたいなことを考えなくても作れてしまう。

実際には remote オブジェクトっていう electron 特有のヤツがいて
ブラウザのプロセスで動くのか、Node.js側のプロセスで動くのかを管理している。

画面描画処理とそれ以外をきちんと区別することでアプリのパフォーマンスに影響するのかもしれないけど、あんまり意識しなくても動く。

パフォーマンスに悪影響かもだけど、knockout.js の処理の中で
Node.js のパッケージとか使えてしまう。

今回、node-glob の結果を observableArray に突っ込んでリストを表示する、とかやってるけど普通に動いてびっくりした。

バベらなくても es2015 で動いている

babel でわざわざ変換しなくても、結構 es2015 で動いている。
よく使う class とか Arrow function とかは問題なさげ。

画面描画部分は chrominium ベースなのかな？ (調べてない)

CSS3の flexbox なんかも問題なさげなので、ストレス無くて良い。

browserifyでknockout.jsをトランスパイル

2015-12-28T20:10:00.001+09:00

knockout.js を ES2015 で書くための手順についてまとめる。

環境

OS: Microsoft Windows [Version 6.1.7601]
Node: v4.2.3
npm: 2.14.7

モジュールバージョン

各モジュールのバージョンは以下のとおり。

"devDependencies": {
  "babel-preset-es2015": "^6.3.13",
  "babelify": "^7.2.0",
  "browserify": "^12.0.1",
  "knockout": "^3.4.0"
}

プロジェクトフォルダの作成

mkdir knockout-es6-project
cd knockout-es6-project
mkdir src
mkdir dist

src フォルダに変換前のソースコードを作成する
- src/index.js がメインファイルであると想定する
dist フォルダにトランスパイルされた jsファイルが保存される
- dist/bundle.js という名前で生成

package.json の作成

npm init
# 適当に入力

browserify のインストール

npm install --save-dev browserify

browserify はクライアントサイドのJavaScriptでモジュールシステムを実現するツール。

babelify のインストール

npm install --save-dev babelify babel-preset-es2015

babelify は browserify が javascript を処理する際に babel によって
ES2015で書かれたソースを (browserが理解できる) ES5 に変換するツール。

babel-preset-es2015 は ES2015 の変換機能。

babel 本体から変換機能を切り離すことで、利用者は使用する機能を取捨選択することが可能になっている。

browserify と組み合わせず、babel のコマンドラインツールで変換することも可能。
今回は、後述する npm run build コマンド一回でトランスパイルが完了するようにしたかったため、このような構成とした。

knockoutのインストール

npm install --save-dev knockout

browserify によってトランスパイルした際に dist/bundle.js に knockout.js 本体も含まれるようにする。

package.json の修正

{
  "name": "knockout-es6-project",
  "version": "1.0.0",
  "description": "knockout es6 sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify src/index.js -o dist/bundle.js"
  },
  "keywords": [
    "knockout.js",
    "babel",
    "es2015",
    "browserify"
  ],
  "author": "Kazunori Kimura <kazunori.kimura.js@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "knockout": "^3.4.0"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }
}

修正点は以下の2つ。

scripts に build の指定を追加。
- browserify を使用して index.js を bundle.js に変換する
browserify を追加し、presets を指定
- .babelrc というファイルを作成して presets の指定を行うことも可能だが、package.json に集約するほうがシンプルであると判断した

サンプルコード

src/index.js

import ko from "knockout";
import MyViewModel from "./MyViewModel";

ko.components.register("MyComponent",
{
  viewModel: MyViewModel,
  template: `<div>
  <input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'">
  length: <span data-bind="text: text().length"></span>
</div>`
});

ko.applyBindings();

src/MyViewModel.js

import ko from "knockout";

export default class MyViewModel {
  constructor(){
    this.text = ko.observable("");
  }
}

dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div data-bind="component: 'MyComponent'"></div>
  <script src="bundle.js"></script>
</body>
</html>

トランスパイルの実行

$ npm run build

> knockout-es6-project@1.0.0 build C:\Repository\knockout-es6-project
> browserify src/index.js -o dist/bundle.js

dist/bundle.js が生成されていることを確認する。

参考

Smarter knockout applications with ES6/7

browserifyでReact(JSX)をトランスパイル

2015-12-17T19:58:00.001+09:00

概要

React (JSX) と ES2015 をトランスパイルする環境を構築する
できるだけシンプルな構成を目指す

環境

OS: Microsoft Windows [Version 6.1.7601]
Node: v4.2.3
npm: 2.14.7

モジュールバージョン

各モジュールのバージョンは以下のとおり。

"devDependencies": {
  "babel-preset-es2015": "^6.3.13",
  "babel-preset-react": "^6.3.13",
  "babelify": "^7.2.0",
  "browserify": "^12.0.1",
  "react": "^0.14.3",
  "react-dom": "^0.14.3"
}

バージョンによって手順が変わる可能性が高いため最新の情報を参照する必要がある。

プロジェクトフォルダの作成

mkdir react-babel-sample
cd react-babel-sample
mkdir src
mkdir dist

src フォルダに変換前のソースコードを作成する
- src/index.js がメインファイルであると想定する
dist フォルダにトランスパイルされた jsファイルが保存される
- dist/bundle.js という名前で生成

package.json の作成

npm init
# 適当に入力

browserify のインストール

npm install --save-dev browserify

browserify はクライアントサイドのJavaScriptでモジュールシステムを実現するツール。

babelify のインストール

npm install --save-dev babelify babel-preset-es2015 babel-preset-react

babelify は browserify が javascript を処理する際に babel によって ES2015やReact(JSX)で書かれたソースを (browserが理解できる) ES5 に変換するツール。

babel-preset-es2015, babel-preset-react はそれぞれ ES2015, React(JSX) の変換機能。

babel 本体から変換機能を切り離すことで、利用者は使用する機能を取捨選択することが可能になっている。

Reactのインストール

npm install --save-dev react react-dom

browserify によってトランスパイルした際に dist/bundle.js に React.js 本体も含まれるようになる。

package.json の修正

{
  "name": "react-babel-sample",
  "version": "1.0.0",
  "description": "react project sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify src/index.js -o dist/bundle.js"
  },
  "keywords": [
    "react",
    "babel",
    "browserify"
  ],
  "author": "Kazunori Kimura <kazunori.kimura.js@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ]
    ]
  }
}

修正点は以下の2つ。

scripts に build の指定を追加。
- browserify を使用して index.js を bundle.js に変換する
browserify を追加し、presets を指定
- .babelrc というファイルを作成して presets の指定を行うことも可能だが、package.json に集約するほうがシンプル

サンプルコード

src/index.js

// index.js
import React from "react";
import ReactDOM from "react-dom";
import MainComponent from "./MainComponent";

ReactDOM.render(
  <MainComponent />,
  document.getElementById("content")
);

src/MainComponent.js

import React from "react";
import MySubComponent from "./SubComponent";

export default class MainComponent extends React.Component {
  render(){
    return(
      <div className="main-component">
        <h1>Main</h1>
        <MySubComponent />
      </div>
    );
  }
}

src/SubComponent.js

import React from "react";

export default class MySubComponent extends React.Component {
  render() {
    return(
      <div className="sub-component">
        sub component.
      </div>
    );
  }
}

dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="content"></div>

  <script src="bundle.js"></script>
</body>
</html>

トランスパイルの実行

$ npm run build

> react-babel-sample@1.0.0 build C:\Repository\react-babel-sample
> browserify src/index.js -o dist/bundle.js

dist/bundle.js が生成されていることを確認する。

更新履歴

2015-12-15: 新規作成
2015-12-16: サンプルコード追加

koa と socket.io を使用したチャットアプリ

2015-11-13T12:12:00.001+09:00

koa と socket.io を使用したチャットアプリを作成する。

koa に socket.io を組み込んだ、koa.io を使用する。

(koa.io は現在開発中だが、とりあえず動作に支障はなかった。
ただ、 socket.io をそのまま組み込んでもコード量はそれほど変わらないと思われる。)

koa.ioのインストール

koa.io は koa を含んでいるので、先に koa をアンインストールしてからインストールする。

$ npm uninstall --save koa
$ npm install --save koa.io

サーバー側の処理

app.js

// app.js
var app = require('koa.io')();
var route = require('koa-route');
var serve = require('koa-static');
var views = require('koa-views');
var moment = require('moment');

// ectをテンプレートエンジンとして指定
app.use(views(__dirname + '/views', {
  map: {
    html: 'ect'
  }
}));

// -- routing --
// GET /chat
app.use(route.get('/chat', function *chat(){
  yield this.render('chat.ect', {
    title: 'CHAT',
    version: '1.0.0'
  });
}));

// static files
app.use(serve(__dirname + '/public'));

// -- WebSocket --

app.io.use(function* (next){
  console.log('[connect]');
  yield* next;
  console.log('[disconnect]');
  if (this.username) {
    this.broadcast.emit('message', { message: 'logout: ' + this.username});
    this.username = '';
  }
});

app.io.route('login', function*(next, args){
  console.log('[login] ' + JSON.stringify(args));
  this.username = args.username;
  var msg = { message: 'login: ' + this.username };
  this.broadcast.emit('message', msg);
  this.emit('message', msg);
});

app.io.route('logout', function*(next){
  console.log('[logout] ' + this.username);
  if (this.username) {
    this.broadcast.emit('message', { message: 'logout: ' + this.username});
    this.username = '';
  }
});

app.io.route('message', function*(next, args){
  console.log('[message] ' + JSON.stringify(args));
  var msg = {
    date: moment().format('hh:mm:ss'),
    username: this.username,
    message: args.message
  };
  this.broadcast.emit('message', msg);
  this.emit('message', msg);
});

app.listen(3000);

app.io の箇所が koa.io が socket.io をラッピングしている部分。
非常に簡単に WebSocket のサーバーサイド処理が書ける。

クライアント側の処理

今回はViewを knockoutjs で作成する。

(ちなみに… knockoutjs の Model や ViewModel を ES2015 で書けないか試行錯誤してみたが、肝心の ko.observable の変数が上手く認識できず、断念。)

html (ECT)

views/layout.ect

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%- @title %></title>
  <link rel="stylesheet" href="/honoka/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/chat"><%- @title %></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/version">About</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container">
    <% content %>
  </div>

  <footer class="footer">
    <div class="container">
      <% include 'views/footer.ect' %>
    </div>
  </footer>

  <script src="/jquery/jquery.min.js"></script>
  <script src="/socketio/socket.io.js"></script>
  <script src="/knockout/knockout.js"></script>
  <script src="/js/client.js"></script>
</body>
</html>

socket.io.js, knockout.js を追加。

chat.ect

<% extend 'views/layout.ect' %>

<div class="row" data-bind="visible: !user.isLogin()">
  <form class="form-inline" id="login-form">
    <div class="form-group">
      <label for="username">お名前</label>
      <input type="text" class="form-control" id="username" placeholder="User Name"
        data-bind="value: user.username">
    </div>
    <button class="btn btn-primary" id="login"
      data-bind="click: user.login">ログイン</button>
  </form>
</div>
<div class="row" data-bind="visible: user.isLogin()">
  <form class="form-inline" id="login-form">
    <div class="form-group">
      <p class="form-control-static">ようこそ <span data-bind="text: user.username"></span> さん！</p>
    </div>
    <button class="btn btn-xs btn-default" id="logout"
      data-bind="click: user.logout">ログアウト</button>
  </form>
</div>
<div class="row" data-bind="visible: user.isLogin()">
  <form class="form-inline" id="chat-form">
    <div class="form-group">
      <label for="message">メッセージ</label>
      <input type="text" class="form-control" id="message" placeholder="Message"
        data-bind="value: message.message">
    </div>
    <button class="btn btn-primary" id="send"
      data-bind="click: send">送 信</button>
  </form>
</div>
<div class="row" data-bind="visible: user.isLogin()">
  <div class="panel panel-default">
    <div class="panel-heading">チャットルーム</div>
    <div class="panel-body" id="response">
      <div class="row" data-bind="foreach: messageList">
        <div class="col-xs-1" data-bind="text: date"></div>
        <div class="col-xs-1" data-bind="text: username"></div>
        <div class="col-xs-10" data-bind="text: message"></div>
      </div>
    </div>
  </div>
</div>

上から順に、

ログインフォーム (ログイン後に隠す)
ログアウトボタン (ログイン後に表示)
メッセージフォーム (ログイン後に表示)
チャット欄 (ログイン後に表示)

knockoutjs のデータバインドでデータをやり取りするように実装。

js

// client.js

// user model
var User = function User(chat){
  var self = this;

  self.username = ko.observable('');
  self.isLogin = ko.observable(false);

  self.login = function(){
    // 接続処理
    self.isLogin(true);
    chat.login(self.username());
  };

  self.logout = function(){
    // 切断処理
    chat.logout(self.username());
    self.isLogin(false);
    self.username('');
  };
};

// message model
var Message = function Message(prm, chat){
  var self = this;

  var opts = {
    date: '',
    username: '',
    message: ''
  };
  if (!prm) {
    prm = {};
  }
  $.extend(opts, prm);

  self.date = opts.date;
  self.username = opts.username;
  self.message = ko.observable(opts.message);

  self.send = function(){
    if (chat) {
      // メッセージ送信
      chat.send({ message: self.message() });
      self.message('');
    }
  };
};

// Chat class
var Chat = function Chat(messageList){
  var self = this;
  var socket = io.connect();

  socket.on('connect', function(){
    console.log('connect');
  });
  socket.on('disconnect', function(){
    console.log('disconnect');
  });

  self.login = function(username){
    socket.emit('login', { username: username });

    socket.on('message', function(data){
      console.log(data);
      messageList.push(new Message({
        date: data.date,
        username: data.username,
        message: data.message
      }));
    });
  };

  self.send = function(msg) {
    socket.emit('message', msg);
  };

  self.logout = function(username) {
    socket.emit('logout', { username: username });
    socket.off('message');
  };
};

// application view model
var AppViewModel = function AppViewModel(){
  var self = this;
  // 受信したメッセージ
  self.messageList = ko.observableArray([]);
  // socket.ioのラッパー
  var chat = new Chat(self.messageList);
  // models
  self.user = new User(chat);
  self.message = new Message({}, chat);

  // 送信
  self.send = function(){
    self.message.send();
  };
};


$(function(){
  ko.applyBindings(new AppViewModel());
});

socket.io の処理は Chat クラスに押し込んだが、結果としてコードがゴチャゴチャになった気がする…

koa + ECT による Webアプリケーション

2015-11-11T17:45:00.001+09:00

koa

koa は Expressのチームによって設計された、新しいWebフレームワーク。

ES2015 の generator/yield を使用することにより、Expressでよくある callback地獄を回避し、簡潔にコーディング出来るようになった。

ECT

ECT は ejs や jade のような templateエンジン。
非常に早い事が特徴。

必要なモジュールのインストール

npm で必要なモジュールをインストール。

$ mkdir web-app
$ cd web-app
$ npm init
  # Enter連打
$ npm install --save koa koa-route koa-static koa-views ect

koa-route : ルーティングを行う、koa のミドルウェア。
koa-static: 静的ファイルを公開するための koa のミドルウェア。
koa-views : テンプレートエンジンを使用してレスポンスを組み立てるための koa のミドルウェア

フォルダ構成

以下の様なフォルダ構成を作成。

{PROJECT_ROOT}
  |- public
  |    |- css
  |    |- js
  |    `- images
  `- views

app.jsの作成

プロジェクトのルート直下に app.js というファイルを作成し、
そこにコーディングしていく。

app.js

// app.js
var app = require('koa')();
var route = require('koa-route');
var serve = require('koa-static');
var views = require('koa-views');

// ectをテンプレートエンジンとして指定
app.use(views(__dirname + '/views', {
  map: {
    html: 'ect'
  }
}));

// GET /test
app.use(route.get('/test', function *version(){
  yield this.render('test.ect', {
    title: 'TEST APPLICATION',
    version: '1.0.0'
  });
}));

// static files
app.use(serve(__dirname + '/public'));

app.listen(3000);

http://localhost:3000/test にリクエストがあった場合に views/test.ect に title と version を埋め込んで、レスポンスとして返す。

Viewの作成

viewファイルを作成していく。

views/layout.ect

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%- @title %></title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
    </div>
  </nav>

  <div class="container">
    <% content %>
  </div>

  <footer class="footer">
    <div class="container">
      <% include 'views/footer.ect' %>
    </div>
  </footer>
</body>
</html>

ECT 単体で使用した場合、include ではファイルが同一階層にあれば <% include 'footer' %> で取り込めるが、 koa のテンプレートエンジンとして使用した場合、ファイルの指定を app.jsからの相対パス とし、ファイルの拡張子を指定しないとViewファイルが見つけられず、例外が発生する。

public に配置された css などは、koa-static によって / (ルート) に公開されている。
<link> や <script> のパス指定は /css/{file_name}, /js/{file_name} とルートからのパスを指定する。

views/footer.ect

<p class="text-muted">
  &copy; <%- (new Date()).getFullYear() %> -
  <a href="https://kazunori-kimura.github.io/" target="_blank">Kazunori.Kimura</a>
</p>

コピーライトの年表示に JavaScript を埋め込んでいる。

views/test.ect

<% extend 'views/layout.ect' %>

<div class="jumbotron">
  <h1><%- @title %></h1>
  <p>version info: <%- @version %></p>
</div>

app.js でViewに渡されたパラメータをHTMLに埋め込む。

layout.ect での include と同様に、 extend でレイアウトファイルを指定する場合も app.jsからの相対パス とする必要があることに注意。

実行

$ node app.js

nodejs のバージョンが 0.12.x 未満の場合は --harmony オプションが必要になる。

アプリを実行したら、ブラウザで http://localhost:3000/test にアクセスし画面が表示されることを確認する。

ナビゲーションバーの高さを変更する

2015-07-14T18:24:00.001+09:00

Storyboardで作成した画面のナビゲーションバーの高さを変更したくて色々調査したので、結果をまとめておきます。

まず、storyboardで画面遷移を定義します。
当然 Navigation Controllerを配置します。
NavigationBarのカスタムクラスを作成します。

-sizeThatFits: でNavigationBarのサイズを返します。
defaultのheightは 44.0 です。

また、高さを拡大すると、すべてのsubviewの上部分がその分だけ空いてしまうので、NavigationBarの中央に来るよう位置を変更します。

@implementation XXCustomNavigationBar

- (CGSize)sizeThatFits:(CGSize)size
{
  CGSize barSize = [super sizeThatFits:size];
  barSize.height += 20.0f; // 高さを変更
  return barSize;
}

- (void)layoutSubviews
{
  [super layoutSubviews];

  // vertically center
  float centerY = self.bounds.size.height / 2.0f;
  for (UIView *view in self.subviews) {
    // 位置変更
    CGPoint center = view.center;
    center.y = centerY;
    view.center = center;
  }
}
@end

作成したカスタムクラスをNavigation Controllerに紐付けます

Storyboard にて Navigation Controller Scene -> Navigation Controller -> Navigation Bar を選択します。

Custom Class で作成したカスタムクラス (この例では XXCustomNavigationBar) を指定します。

これで実行すると、Navigation Barが指定した高さで表示されるはずです。

UIScrollViewのスクロール関連のプロパティについて

2015-07-13T17:31:00.001+09:00

UIScrollView のスクロール関連のプロパティについて。

スクロール方向を固定する

斜め方向のスクロールを制限する場合、UIScrollView の directionalLockEnabled に YES をセットする。

ただ、まれに斜め方向にスクロールしてしまう (正確に斜め方向にドラッグされた場合？)。
ドラッグ開始前後の位置を取得し、移動後にスクロール位置を矯正するよう実装する。

以下の UIScrollViewDelegate を使用する。

- (void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
- (void)scrollViewDidScroll:(UIScrollView*)scrollView

参考: http://iphone-dev.g.hatena.ne.jp/tokorom/20101002/1285998723

追記

- (void)scrollViewWillBeginDragging:(UIScrollView*)scrollView だけでスクロール方向を取得する方法があったので、参考リンクを追加

UITableView/UIScrollViewでスクロール直後のスクロール方向を取得する

スクロール速度を変更する

正確にはスクロールが減速するスピードの比率。
UIScrollView の decelerationRate に UIScrollViewDecelerationRateFast を設定すると減速するスピードが早くなる (スクロール停止が早くなる→スクロール速度が遅くなったように見える)

scrollView.decelerationRate = UIScrollViewDecelerationRateFast;

参考: UIScrollView Class Reference

UIImageViewにimageを設定する際に例外が発生する？

2015-07-06T12:55:00.001+09:00

UIImageViewにimageを設定する際に例外!?

他人が作ったアプリのバグ修正依頼を受けた。

デバッグ実行してみると、
UIImageView の image に UIImage を設定しようとして、例外が発生していた。

[XxxxxView setImage:]: unrecognized selector sent to instance xxxxxxxxxx

unrecognized selector なので、メソッド名の指定に間違いがあるようだが…
ん、UIImageView でなく XxxxxView (該当画面のViewController) になってる？

ロジックを見てると、予め作成された UIImageView を [self viewWithTag: tagNo] で取得していたんだが、条件によって tagNo が 0 になるパターンがあった。

for (int i=0; i<kX; i++) {
  for (int j=0; j<kY; j++) {
    NSInteger tagNo = [self getTagNoWithX:i Y:j]; // <- ここがおかしい
    UIImageView *img = (UIImageView *)[self viewWithTag: tagNo];
    img.image = [UIImage imageNamed:@"icon-name"];
  }
}

[self viewWithTag: 0] の時に自分自身 (self) が返ってきてしまう模様。
適切なTagNoを返すように修正した。

参考: UIImageview set image crash

UIPopoverPresentationControllerが閉じる際にタップを連打するとアプリが落ちることへの対策

2015-07-02T18:24:00.001+09:00

不具合内容

iPadアプリで、あるUITextFieldが選択されると、UIPopoverPresentationControllerでTableViewを表示して選択肢の中からユーザーに項目を選ばせる、という画面を実装していたところ、以下の様な不具合が発生した。

タップを連打すると、popoverがcloseするタイミングでエラーも出ずにアプリが落ちる
iOS 8.3, 8.4 では発生しない

最新のOSバージョンでは発生しないのでiOSの不具合と思われるが、どうしても対応して欲しいとのリクエストをお客さんからいただいたので、検討してみた。

対応方法

あまり時間を掛けたくなかったので、かなり場当たり的な対応だが、以下の方法で不具合を回避できた。

(BOOL)popoverPresentationControllerDidDismissPopover: にて、beginIgnoringInteractionEvents でタッチイベントを無効化する
500ms後に endIgnoringInteractionEvents でタッチイベントを有効に戻す

コード例

#pragma mark - タップ連打防止
/**
 * iOS8.3未満の場合、タップを無効化する
 */
- (void)preventTapBarrage:(float)waitTime
{
  // iOS8.3未満の場合
  if ([[UIDevice currentDevice].systemVersion floatValue] < 8.3){
    // タッチイベントを無効にする
    [[UIApplication sharedApplication] beginIgnoringInteractionEvents];

    // 指定ms後、タッチイベントを有効に戻す
    [NSTimer scheduledTimerWithTimeInterval:waitTime
                                     target:self
                                   selector:@selector(enableTapEvents:)
                                   userInfo:nil
                                    repeats:NO];
  }
}

/**
 * タップを有効に戻す
 */
- (void)enableTapEvents:(NSTimer *)timer
{
  // タッチイベントが無効になっている場合
  if ([[UIApplication sharedApplication] isIgnoringInteractionEvents]){
    // タッチイベントを有効にする
    [[UIApplication sharedApplication] endIgnoringInteractionEvents];
  }
}

#pragma mark - UIPopoverPresentationControllerDelegate Methods
/**
 * iOS8.3未満において、popoverのclose時にタップ連打するとアプリが落ちるため
 * 一時的 (500ms) にタッチを無効化する
 */
- (BOOL)popoverPresentationControllerShouldDismissPopover:(UIPopoverPresentationController *)popoverPresentationController
{
  // 500msタッチ無効 (iOS version < 8.3 の場合のみ)
  [self preventTapBarrage:0.5f];
  return YES;
}

git add時の改行コード変換のwarningを消す

2014-05-02T16:39:00.002+09:00

WindowsでGitを使う際、git addコマンド実行時に改行コードのwarningが出る。

warning: LF will be replaced by CRLF in app.js.
The file will have its original line endings in your working directory.

以下の設定で、改行コードの変換を無効にする。

git config --global core.autoCRLF false

[PowerShell] 外部DLLを読み込み、メソッドを実行

2014-02-06T14:38:00.001+09:00

Visual Studioなんかで作成したDLLの動作確認とかしたい時、あるいは簡単なテストスクリプトを作成する時などに、PowerShellで作成したDLLを読み込むことができます。

gitignoreファイルを作成する「node-gi」を公開しました

2014-01-30T21:34:00.004+09:00

gitignoreファイルを生成するためのコマンドラインツールを作成したので、npmで公開しました。

中身は http://www.gitignore.io/ にリクエストを投げて、結果を返してるだけです。

詳細は以下を参照してください。

bootstrap-selectを試してみる

2013-06-26T00:33:00.002+09:00

概要

bootstrap-select

bootstrap のデフォルトでは selectタグのスタイルはイマイチ。

bootstrap-selectを使用すると、selectタグを Button dropdown menu に置き換えてくれる。

テストページ

bootstrap-select.css, bootstrap-select.js を読み込む

スタイルを変更したい selectタグに selectpickerクラスをセットする

$(document).ready にて $(".selectpicker").selectpicker();を実行する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ぶーとすとらっぷ せれくと</title>
    <link rel="stylesheet" href="vender/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="vender/bootstrap-select/bootstrap-select.min.css" />

    <style type="text/css">
        body {
            padding: 40px;
        }
    </style>
</head>
<body>

    <form class="form-inline">
        <select id="s1" class="selectpicker" name="s1">
            <option value="1">hoge</option>
            <option value="2">foo</option>
            <option value="3">bar</option>
        </select>

        <button id="hoge" class="btn btn-primary">Get Value</button>
    </form>

    <input id="t1" type="text" readonly />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="vender/bootstrap/js/bootstrap.min.js"></script>
    <script src="vender/bootstrap-select/bootstrap-select.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            //enable bootstrap-select
            $(".selectpicker").selectpicker();

            //click hoge button
            $("#hoge").click(function(){
                $("#t1").val($("#s1").val());
                return false;
            });

        });
    </script>

</body>
</html>

今、開発中のアプリで使おうかと思ったけど Internet Explorer 7だとちょっと表示が変だったので、今回はbootstrap標準のselectタグを使う。

[ASP.NET MVC2] 簡単なカスタム認証機能の実装

2013-06-11T14:03:00.001+09:00

[ASP.NET MVC2] 簡単なカスタム認証機能の実装

環境

Visual Studio 2010
.Net Framework 4
ASP.NET MVC2
PostgreSQL 8.4

概要

LoginとMenuの2画面
未認証状態でMenuにアクセスするとLoginに戻される
PostgreSQL上でアカウント管理を行う

プロジェクトの作成

プロジェクト名： CustomAuthorize

Githubレポジトリ CustomAuthorize

パッケージ追加

NuGetで必要なパッケージを追加

Npgsql
PetaPoco.Core
log4net
Bootstrap
(jQuery 1.9.1) Bootstrapと一緒に追加される

log4net.config

構成ファイルを追加
ファイル名: log4net.config

ファイル名に日付を付けてローテートさせる

Global.asax.cs

初期表示パスを /Login/Index に変更
Application_Start() にてlog4net設定ファイル読み込み

Controllerの作成

LoginController
とりあえず空っぽにしておく
MenuController
未認証ではアクセスできないように classに [Authorize] を設定

Viewの作成

マスターページを作成

MVC2 ビューマスターページを Views/Shared に追加

Site.Master

ログインユーザー名を Session["USER_NAME"] から取得し、ヘッダー部分に表示
ログアウトボタン押下で LoginController/Logoff に Ajax($.get) で問い合わせ
結果に関わらず Login画面に遷移

Login View を作成

LoginController.csを開く
Index Methodを右クリック → ビューの追加を選択
Login/IndexはSite.Masterを使用しない
Login/Index.aspx

LOGINボタン押下で LoginController/Authenticate に Ajax($.post) で問い合わせ
認証結果を受けて、メニュー画面に遷移

Menu View を作成

MenuController.csを開く
Index Methodを右クリック → ビューの追加を選択
Menu/Index.aspx

Modelの作成

Database(今回はPostgreSQL)の接続には PetaPoco を使用する

user.cs を作成

AccountManager.cs を作成

LoginController 実装

LoginController.cs

Authenticate: ログイン認証を行う
Logoff : ログオフ処理を行う

実行してみる。

初期表示で localhost/Login が表示される
認証せずに localhost/Menu にアクセスすると、 localhost/Login に戻される
localhost/Login で認証を行うと localhost/Menu に遷移する

C#製の簡易O/Rマッパー PetaPoco を試してみる

2013-06-07T17:52:00.003+09:00

PetaPoco

PetaPoco .NETの簡易O/Rマッパー。

とりあえずPostgreSQLで試してみる。 Getting Started With PetaPoco and Postgres

環境

Windows XP SP3
.Net Framework 4
PostgreSQL 8.4

プログラム作成手順

Databaseの準備

server: localhost
database: petapoco
owner: postgres

Visual Studioでコーディング

プロジェクト作成

コンソールアプリケーションのプロジェクトを作成

名前: PetaPocoTest

NuGet Package追加

NuGetすごい便利。
以下のパッケージを追加

PetaPoco.CORE
Npgsql
log4net

PetaPocoを追加すると、勝手にModelsフォルダが生成される。

POCOクラスの作成

いわゆるModel Class。
usersテーブルに合わせて以下のように作成

主キーが複数の場合は [PetaPoco.PrimaryKey("key1,key2")]

PetaPocoに管理させたくないプロパティには [PetaPoco.Ignore]

DataManagerクラスの作成

Databaseに接続し、PetaPocoを使用してデータを取得するクラス。

コンストラクタ

DbProviderFactoriesの指定は app.config にも書けるけど、記述が面倒なので引数で渡した。

GetUserBySystemIdメソッド

PetaPoco.Sql.BuilderにてSQLを組み立て。
きっと引数とかはちゃんとエスケープしてくれるのだろう。

テーブル作成時にキチンと指定していないけど、 system_idはユニークな想定なので、Fetchで返されたListの先頭を取得している。

Program.cs

Databaseからuserを取得し、名前をログに出力。

あたりまえだが、実際には GetUserBySystemId から返ってきた値が null かどうかチェックしないといけない。

参考

WindowsでGitを使う(proxyとかFirewallの設定)

2013-05-15T21:40:00.000+09:00

企業内のネットワーク配下でGitを使う際の設定について。
Windows XPでやってます。

Git for Windows をインストール

ウィザード内の選択肢で、コマンドプロンプトでgitを使うよう選択する。

以降の作業はコマンドプロンプトとGit bashどちらでも可能。

初期設定

git config --global user.name kazunori.kimura
git config --global user.email kazunori.kimura.js@gmail.com

proxy設定

Proxy配下の場合は以下の設定を行う。
環境変数 HTTP_PROXY を設定してたけど、見てくれなかった。

git config --global http.proxy http://{proxy_host}:{proxy_port}
git config --global https.proxy http[s]://{proxy_host}:{proxy_port}

gitプロトコルの対応

Firewallで git:// の通信が阻害されてしまう場合は。。。

$ git clone git://github.com/Kazunori-Kimura/MyPowerShellSnippet.git
Cloning into 'MyPowerShellSnippet'...
fatal: unable to connect to github.com:
github.com[0: 204.232.175.90]: errno=No such file or directory

以下の設定によって、自動的に git:// を https:// に置き換えて通信してくれる。

$ git config --global url."https://".insteadOf git://

参考: git:// protocol blocked by company, how can I get around that?

node で Oracle に接続する

2013-05-13T22:39:00.001+09:00

Oracle接続

Windowsにて、nodeでOracle 11gに接続し、値を取得したい。

結論

node-odbcで動いた。

事前準備

python
node-gyp
- gyp: Generate Your Projects
- Google Chromeのためのビルドシステム
- pythonで書かれている
- node-gyp: gypによるビルドファイルの生成からコンパイルまで行える
python2.7をインストール後、node-gypをglobalオプション付きでインストール
npm install -g node-gyp

node-odbcインストール

node-odbc

npm install node-odbc

node-gypのbuildで3箇所警告が出たが、一応インストールは成功した。

動作確認

とりあえず、単純なselect文を投げて結果を取得してみる

app.js

/*
 * oracle test
 */

var odbc = require("odbc");

var db = new odbc.Database();
var cs = "DSN=<DataSourceName>;UID=<UserName>;PWD=<Password>";
db.open(cs, function(err){
    var sql = "select foo, bar from HOGE order by foo";
    db.query(sql, function(err, rows, rs){
        //console.log(rows);
        var i=0;
        for (i=0; i<rows.length; i++) {
            console.log([
                i,
                rows[i]["foo"],
                rows[i]["bar"]
            ].join(", "));
        }

        db.close(function(){
            console.log("close.");
        });
    });
});

試行錯誤の経緯

試したmodule

node-oracle
- 上手くインストールできない。コンパイルで失敗する。
- node-gypで、-zオプションの使い方がおかしいといったエラー。
node-db-oracle
- node-wafを使用しており、コンパイルで失敗する。
node-odp
- インストールはできるが、うまく動かない。
- module内にバイナリファイル nodeodp.node があるが、これがx64用？

[備忘録] node.js環境構築

2013-05-06T23:59:00.001+09:00

node.js環境 (nvm, npm) をインストールする手順。今回はMacにて行ったが、Gitを使える環境であればWindows/Linuxで(ほぼ)共通。

Githubからnvmを取得する。

cd ~
git clone git://github.com/creationix/nvm.git .nvm
. .nvm/nvm.sh

nvmでダウンロード可能なnodeの最新バージョンを確認する。

nvm ls-remote

最新バージョンのnodeをインストール

nvm install v0.11.1

インストールされたか確認。nvmインストール時に最新のnpmもインストールされている。

node -v
npm -v

次回ログイン時以降に .nvm/nvm.sh が読み込まれるように、~/.bash_profile に登録

. ~/.nvm/nvm.sh

PowerShellでSQLServerのデータベースのバックアップ/リストアを行うスクリプト

2012-05-31T20:32:00.001+09:00

SqlCmdコマンドを使用してSQL Serverのデータベースをバックアップ/リストアするスクリプト。

GitHub: Backup-Database.ps1

#Backup-Database.ps1
#simple backup & restore script for SQLServer2008

Param(
  [switch] $backup,
  [switch] $restore,
  [string] $database="",
  [string] $server=$env:computerName,
  [string] $file="",
  [string] $directory="",
  [switch] $help,
  [switch] $debug
)

$usage=@'

名前
    Backup-Database

概要
    SQL Serverデータベースの完全バックアップを作成/復元します。

構文
    Backup-Database {-Backup | -Restore} -Database  [-Server ] [-File  | 
     -Directory ]

説明
    SqlCmdコマンドを使用し、SQL Serverデータベースの完全バックアップを作成/復元します。
    SQL ServerにはWindows認証にて接続します。スクリプト実行アカウントにバックアップ/リストアを実施する
    権限がない場合、エラーとなります。
    
    File オプションを指定した場合、Directory オプションは無視されます。
    保存先とファイル名の両方を指定する場合 ( たとえば、D:\backup に backup.db という名前で作成したい場合 ) は
    File オプションにパスを指定してください。
    
    Backup時に File オプションが未指定の場合は DatabaseName よりバックアップファイル名を作成します。
    (.\_yyyyMMddHHmmss.bak)
    Restor時に File オプションが未指定の場合は例外が発生します。

関連するリンク
    http://msdn.microsoft.com/ja-jp/library/ms186865.aspx
    http://msdn.microsoft.com/ja-jp/library/ms186858.aspx
    http://msdn.microsoft.com/ja-jp/library/ms179313.aspx

'@

$query_backup="BACKUP DATABASE {database_name} TO DISK = '{backup_file}'"
$query_restore="RESTORE DATABASE {database_name} FROM DISK = '{backup_file}' WITH REPLACE"

# Sqlcmdを実行
function Exec-SqlCommand($query){
  Sqlcmd -S $server -Q "$query"
}

# Backupを実施
function Backup-Database(){
  # database未指定→Error
  if( $database.length -eq 0 ){
    throw "対象となる Database を指定してください。"
  }
  # file未指定→database名 + 日付とする
  if( $file.length -eq 0 ){
    #カレントディレクトリを取得
    $current_path = Convert-Path .
    
    if( $directory.length -gt 0 ){
      #ディレクトリ指定時
      if( Test-Path $directory ){
        $current_path = Convert-Path $directory
      }else{
        throw "指定されたディレクトリが存在しません。 [ $directory ]"
      }
    }
    
    #yyyyMMddhhmmss
    $date_time = Get-Date -format 'yyyyMMddHHmmss'
    #結合
    $file = $current_path + '\' + $database + '_' + $date_time + '.bak';
  }

  $now = Get-Date -format 'yyyy/MM/dd HH:mm:ss'
  $msg=@"

Backupを実施します。[ $now ]
`tDatabase:`t$database
`tBackupFile:`t$file

"@
  Write-Host $msg
  
  $q = $query_backup -replace '{database_name}', $database
  $q = $q -replace '{backup_file}', $file
  
  Write-Debug "query= $q"
  
  Exec-SqlCommand $q
  
  $now = Get-Date -format 'yyyy/MM/dd HH:mm:ss'
  
  Write-Host "`nBackupが完了しました。 [ $now ]`n"
}

# Restoreを実施
function Restore-Database(){
  # database未指定→Error
  if( $database.length -eq 0 ){
    throw "対象となる Database を指定してください。"
  }
  # file未指定→Error
  if( $file.length -eq 0 ){
    throw "リストアするファイルを指定してください。"
  }
  # 存在しないfileを指定
  if( Test-Path $file ){
    $file = Convert-Path $file
  }else{
    throw "指定されたファイルが存在しません。 [ $file ]"
  }

  $now = Get-Date -format 'yyyy/MM/dd HH:mm:ss'
  $msg=@"

Restoreを実施します。[ $now ]
`tDatabase:`t$database
`tBackupFile:`t$file

"@
  Write-Host $msg
  
  $q = $query_restore -replace '{database_name}', $database
  $q = $q -replace '{backup_file}', $file
  
  Write-Debug "query= $q"
  
  Exec-SqlCommand $q
  
  $now = Get-Date -format 'yyyy/MM/dd HH:mm:ss'
  
  Write-Host "`nRestoreが完了しました。 [ $now ]`n"
}

# 引数をチェックし、処理を分岐
function Get-CommandLineOptions(){
  if($debug){
    #デバッグ表示を有効にする
    $DebugPreference="continue"
  }

  if( $help ){
    # Helpの表示
    Write-Host $usage
  }elseif( $backup -and $restore ){
    # Backup と Resutore の両方を指定 -> Error
    throw "Backup|Restoreのどちらかを指定してください。"
  }elseif( $backup ){
    Backup-Database
  }elseif( $restore ){
    Restore-Database
  }else{
    # Helpの表示
    Write-Host $usage
  }
}

Get-CommandLineOptions

スイッチオプションの指定

Param に [switch]型の引数を定義すると、スクリプト実行時に該当オプションを引数に渡すと、対応する変数に $true がセットされる。

Param(
  [switch] $backup,
  [switch] $restore,
  [string] $database="",
  [string] $server=$env:computerName,
  [string] $file="",
  [string] $directory="",
  [switch] $help,
  [switch] $debug
)

上のように書いた場合...

PS> .\Backup-Database.ps1 -Backup

↑このように引数を指定すると、$backup に $true がセットされる。引数を指定しなければ $false が入る。

functionでも同じように[switch]を使用可能。

function hoge([switch]$a){
  if( $a ){
    Write-Host "foo"
  }else{
    Write-Host "bar"
  }
}

hoge -a   # >foo
hoge      # >bar

調査メモ

Mastodon (マストドン) とは何か

Mastodon (マストドン) とは？

GNU social

OStatus

システム構成

Windows Update のダウンロードが 0% のまま進まない場合の対処方法

現象

対処方法

1. セーフモードで起動する

2. SoftwareDistributionフォルダをリネームする

3. 再び Windows Update を行う

参考

第1回 サーバレスアーキテクチャのお勉強 - DynamoDB

DynamoDBについて

テーブルの作成とデータの登録

第0回 サーバレスアーキテクチャのお勉強 - システム概要

サーバーレス アーキテクチャとは？

アプリの概要

システム構成の検討

温泉宿で開発合宿してきました

Slackとは？

利点

無料の範囲

価格

参考

ChatOps

electron触ってみた

electron触ってみた

作ってみて感じたこと

browserifyでknockout.jsをトランスパイル

環境

モジュール バージョン

プロジェクトフォルダの作成

package.json の作成

browserify のインストール

babelify のインストール

knockoutのインストール

package.json の修正

サンプルコード

トランスパイルの実行

参考

browserifyでReact(JSX)をトランスパイル

概要

環境

モジュール バージョン

プロジェクトフォルダの作成

package.json の作成

browserify のインストール

babelify のインストール

Reactのインストール

package.json の修正

サンプルコード

トランスパイルの実行

更新履歴

koa と socket.io を使用したチャットアプリ

koa.ioのインストール

サーバー側の処理

クライアント側の処理

html (ECT)

js

koa + ECT による Webアプリケーション

koa

ECT

必要なモジュールのインストール

フォルダ構成

app.jsの作成

Viewの作成

実行

ナビゲーションバーの高さを変更する

UIScrollViewのスクロール関連のプロパティについて

スクロール方向を固定する

追記

スクロール速度を変更する

UIImageViewにimageを設定する際に例外が発生する？

UIImageViewにimageを設定する際に例外!?

UIPopoverPresentationControllerが閉じる際にタップを連打するとアプリが落ちることへの対策

不具合内容

対応方法

コード例

第1回サーバレスアーキテクチャのお勉強 - DynamoDB

第0回サーバレスアーキテクチャのお勉強 - システム概要

サーバーレスアーキテクチャとは？

モジュールバージョン

モジュールバージョン