yuw27b’s blog

技術メモと雑記

カレンダーUIを実装するReact component

Airbnb謹製のReact用カレンダーUIコンポーネントの紹介です>

Reactで作っているWebアプリケーションにカレンダーUIが必要だったので、どんなのがあるかな、と検索したところ、いろいろありました。
例えばこんな:

いろいろ見てみましたが、必要な機能や見た目などをふまえて検討した結果、react-datesというコンポーネントを使うことにしました。
GitHubリポジトリはこちらです:
GitHub - airbnb/react-dates: An easily internationalizable, mobile-friendly datepicker library for the web
作者はAirbnbです。
見た目は非常にすっきりしています。Airbnbではこんな感じで使われていました。
f:id:yuw27b:20180828220209p:plain

レスポンシブになっていて、画面幅が狭いとこのように縦になります。
f:id:yuw27b:20180828220337p:plain

GitHubのスターは8000を超えており(2018年10月現在)、またAirbnbは、

  • JavaScriptのスタイルガイドでもよく知られている
  • 宿泊施設の予約サービスにとってカレンダーUIは非常に重要と思われる
  • 国際的な(多言語での)サービスを提供している

・・・こういった点から考えても、品質の高いコンポーネントなのでは、と期待できます。

どんなことができる?

ここでいろいろとオプション指定を変えながら試すことができます:
http://airbnb.io/react-dates/
Storybookで作られているので、これをローカルで動かすこともできます。

主なところでは以下のような機能があります。

  • 単一の日付選択または範囲選択
  • 表示月数の指定
  • 週始まりの曜日の指定
  • 無効(disabled)にする
  • 選択可能な日付の設定

また、日付が選択された時や月を移動した時など、ひととおりのイベントにはハンドラを登録できるようになっています。
さらに、ラベルや月名表示の言語設定、スクリーンリーダー向けの設定項目もあり、このあたりはさすがにAirbnb用に作られただけある、という感じでしょうか。

使ってみる

インストールはGitHubリポジトリのページに書いてあるとおりですが、単純にnpm install〜を実行するのではなく、npm install〜コマンドを生成するためのコマンドを実行するよう書かれています。
このコマンドを実行すると、Peer dependenciesに指定されている、Moment.jsやReact本体のバージョンをチェックしつつnpm install〜コマンドを生成するようになっているようです。

インストールしたあとは、カレンダーUIを使いたいコンポーネント内でreact-datesとmomentをimportして使用します。

import React from 'react';
import PropTypes from 'prop-types';

import moment from 'moment';
moment.locale('ja');
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: ''
    };
  }

  render() {
    return (
      <div>
        <SingleDatePicker
          date={this.state.date}
          onDateChange={date => this.setState({date: date})}
          focused={this.state.focused}
          onFocusChange={({ focused }) => this.setState({ focused })}
          numberOfMonths={1}
          displayFormat='YYYY-MM-DD'
          transitionDuration={0}
        />
      </div>
    );
  }
}

export default SampleComponent;


コンポーネントの種類と、どんなオプションを指定するとどうなるかは、上記のStorybookのデモ(http://airbnb.io/react-dates/)で確認するのが分かりやすいです。

NDS第57回勉強会に行ってきたよ

第57回勉強会(2018/09/29) - 長岡 IT開発者 勉強会(NDS)

に参加してきました!
前回(7月)は行かれなかったので、半年ぶりでしたが、今回もとっても充実した時間になりました。
主催のcivicさん、みなさまありがとうございました!
(あっ、半年前は行ったのにブログ書いてない・・・)

以下、その場でもメモったものとか感想とか:

SIerの社内教育(仮)

実際にどのような社内教育制度になっているかというお話でした。
全体をとおして「こういう制度です」ではなくて、「今はこんな感じです」という雰囲気で話されていて、硬直化させずに改善を続けようとしているんだな、と感じました。

新入社員研修の作り方~完全版~

そして、その新入社員研修の具体的なお話でした。
教育する対象である新入社員の傾向から達成目標まで、きちんと分析した上で教えるべき内容を導き出していて、教育といってもこんなに科学的なんだな、と知りました。
プレゼン術まで教えてもらえるとか、こんな会社に新卒入社したいですね!(どうやって・・・?)

ITマスターについて

ITマスターって全然知らなくて、情報処理系の資格のひとつなのかな、くらいのイメージだったのですが、このマスターは教える人でした。
私の場合はちょっとITマスター取得までは距離が遠そうなんですが、今回こういうものがあるって知れて良かったです。今後の人生何があるか分かりませんから・・・。

Google Colabで試す、Kerasを使った画像認識

最近Kerasでにわか機械学習をやって(座礁して)いるので、とっても楽しみにしていたセッションでした。
Google Colabだと無料でGPU(とTPU?)が使えるということで、手元のデータでどのぐらいの処理速度になるかちょっとやってみようかなと思います。
あと、「シーフードカレーイタリアン」と「バスセンターのカレー」を識別させる方法は、私もちょっと考えてみたいです。ひとまず画像の枚数を増やしてみるのがいいのかな。

はじめてのOSSライブラリ開発記

私の発表です。最近ずるずるとJSライブラリを作っていたので、その話をしました。
スライドはこれです:NDS57_PRESTO.pdf - Google ドライブ
話の本題としては「作るのに使ったツールとかマインドセット的なもの」と「作ったら勉強になるよ」みたいなことだったんですが、
背景というか、私が働いている分野のことも少し知ってもらえて良かったです。
はっきりした根拠はないんですが、ITエンジニアさんって科学研究に興味を示してくれる人が多い印象です。うれしい!

オンライン英会話ビジネス史

オンライン英会話はずっと興味があって、今回歴史的経緯といろんなサービスを知れて良かったです。
「QQ English」というサービスは私は知らなかったんですが、今後オンライン英会話を検討することがあったらまずここを試してみたいな、と思いました。
あと、Chrome機能拡張を作っててすごい!こうやって、仕事以外でも技術力で問題解決できるのはエンジニアさんのかっこいいところですよね!見習いたいです。

中学生エンジニアやってます

ここで語彙力が消失して「中学生なのに発表の内容も発表自体もレベル高くてすごくてすごい」みたいな感想になっちゃうんですけど、本当にすごい。
スマホ上にPepprくんみたいな対話型AI(ただしもっと賢くてかわいい)を実装しよう、という試みなんですが(こういう方面はあまり詳しくないので何か誤解してたらごめんなさい)、インフラ〜センサー周り〜プログラミング、となかなかいろんな知識・技術が必要そうで、興味深いですね。

レガシーWebシステムをどうにかしたい

デモがトラブルで見られなくて残念だったのですが、レガシーな環境で動かす場合の知見ってもっと共有されてもいいのでは?と思いました。
社内システムとか、閉じられた環境であれば古いOSやブラウザが現役というケースは十分考えられますし、古いから悪い、ということでもないですよね。

C#で、新入社員研修 ~ ライブ版 ~

研修の題材の一つとして、「リバーシ」を作るというのを実演してくださいました!
リバーシについて「ループと配列が必要になる」とおっしゃってましたが、すごく適切な題材なんだろうなと感じました。
・・・私作れるかな。JavaScriptで作ってみようかな・・・。

学校教育の変革とそれを支えるICT、を支えるカオスモンキー業

現職で携わっているお仕事の背景と、どんなことをされているかを紹介してくださいました。具体的なところは当然オフレコということですが、とてもいいお話でした、笑った後に涙が出るような。

おわびのLT

前回不参加だったので(?)おわびの理由をはっきり存じ上げていないのですが、現在携わっているお仕事のお話で、以前からちょっと興味のあった事業だったので興味深かったです。

Androidアプリ開発の入門本を書きながら気にしたこと

単著出版おめでとうございます!
単行本くらいの長さになるとこんな苦労・配慮があるんだな、なるほどー、となりました。スムーズに読み進められる本って、実はすごく考えて作られた結果なんですね。

オンライン学習被害者の会

プログラミングのオンライン学習って、そういえばやったことないんですが、こんなにいろんなコースがあるんですね。
しかし「受講コースの積読」状態が発生する恐れがあるとのことで、技術書を積読しがちな私も「被害者」になるかもしれませんね・・・。

研修報告について

Webサーバセキュリティの講習を受けてきました、というお話で、私の業務上もこの講習は有効では??となったので、ちょっと職場で交渉しよっかな、と思ってます。
Apache向けの内容が含まれていたので、「うちApache使ってないよね」って言われたらどうしようか検討中です・・・w



ということで、なんかすごい量のインプットがありました(懇親会含む)。
次回は12月8日の予定とのことで、仕事の予定が未確定ではありますがぜひまた行きたいです!!!

2017年の振り返り

今年は書くぞー。

お仕事

今年も、
一人Webアプリ開発担当(@大学の研究室)
と、
HTML+CSS(たまにUI絡みのJSも)コーディング(@フリーランス
を並行してました。

設計

プログラムの設計とかファイル構成なんかに、だいぶ気を遣うようになった。
一人だと何やっても勝手ではあるけど、やっぱりちゃんと整理しておいたほうが機能追加も仕様変更も対応しやすい(当たり前だ・・・)。
ただ、設計に凝りすぎてなかなか手が動かなかったり、ファイルを分割しすぎて逆に全体が把握できなくなったりもしたので、その辺のさじ加減はもうちょっとうまくできるようになりたい。
たぶん、もうちょっとゆるく書き始めて、複雑になってきたら分割すれば良いんじゃないか、と思う。

React

WebアプリケーションのフロントはほぼReactで書くようになった。
簡単なものだったらReact+Fluxで、複雑になってきたらRedux、XHRが入るならredux-thunk、で4〜5つ作ったor作りかけている。
たぶん、Component志向でVirtualDOMならReactでなくてもいいんだとは思うけど、慣れてしまったので、しばらくはこれでいいかなーという心境。
あとは以前にBackbone.jsをカオスにして作ったけっこう大規模なアプリケーションを書き直したい・・・。

Vue.jsとAngular2

も、ちょっと触りました。
先にReact触った人間なので、Vue.jsのほうがとっつきやすかった。
ただ、昼間に大学でReactを書き、夜に自宅(フリーランス)でVueを書く、という事態に陥った時期があり、両者の記法が混同してものすごく効率が悪かった・・・。

CSS

BEMにECSSをちょっと足した、みたいな独自の設計方針で落ち着いてました。
で、Webアプリでどうせbuildする場合はSASSで書く感じ。
CSSの仕様はひととおり把握できてきたようで、「なんでこういう表示になる(ならない)の?」と思うことはなくなった。なんか一定の段階には達した気がする。

サーバサイド

RESTfulAPIをフロントと同じだけ作ってるけど、RubyだったりPHPだったりNode.jsだったり。
内容にもよるけど、どれも一長一短な気がして定まっていないので、来年はなんとかしたい。

その他

nginxの設定とか、Neo4jとかSPARQLとか。あとPythonが少し。

旅行記

いろんなとこに行きました(@出張)
大阪
f:id:yuw27b:20171231220327j:plain

京都・・・写真がない

盛岡・・・写真がこれしかない
f:id:yuw27b:20171231220311j:plain

ダブリン
f:id:yuw27b:20171231220221j:plain
からの、ロンドン
f:id:yuw27b:20171231220237j:plain

東京が何度か・・・わざわざ写真撮ってない

熊本
f:id:yuw27b:20171231220244j:plain


来年もどこか行けますかね。
仕事とはいえ好きにさせてもらって、家族には感謝してます。


2018年
  • フリーランス縮小予定(そうするとCSS書く機会が減るので、CSSスキルが損なわれないかどうかがちょっと不安)
  • JSに型を導入したい
  • SSRやることになりそう
  • テストも書きたい
  • データベースの設計とクエリの書き方に改善の余地がありそう(なので勉強しないといけない)

あと、あまり忙しかった自覚はないけど、後半はなんとなく慌ただしくてあまりインプットができなかった気がするので、積ん読本の消化と勉強会の参加をしたいです。




来年も引き続き、何か作って周りの人の役に立てば嬉しいです。
自分も作る過程を楽しめればさらにHAPPYですね。

NDS第52回勉強会に行ってきたよ

51回に引き続き第52回勉強会(2017/06/17) - 長岡 IT開発者 勉強会(NDS)に行ってきました。
前回も書きましたが、NDSは名称に「IT開発者」とあるとおり、幅広い分野の開発者さんが参加しているところが好きです。

私は今回はCSSのお話をさせてもらいました。
今日から使えるCSSパターン // Speaker Deck

自分自身がCSSのコーディング業務で取り入れてよかったもの、みたいな切り口で、短め(10分)の発表にしました。
もうちょっときちんとした設計論みたいなものに昇華できたかな、という気もしますが、そういったものはすでに世の中に出てますし、勉強会のテーマも「初心者むけ」だったので、と言い訳しておきます。
その次元に持ち上げる論理的回路が私の頭にはないみたいです・・・。

ひとつだけ補足で、ECSSという手法に触れていますが、
日本語記事ではこちらのシリーズがとても分かりやすいです。
連載 | Enduring CSS | HTML5Experts.jp



以下、みなさんの発表を聞きながらのメモ・感想など:

「はじめてのC#プログラミング」ailightさん

C#」にとどまらず、アセンブリあたりからの流れをお話ししてくださっておもしろかったです。
実際にコードを見せてもらうと、やったことない言語でも少し触ってみたら学びがありそうだな、と思いました。
「うまく書きたいと願わないと書いてもうまくならない」「プログラムを書かなければバグは出ない」はまさに真理だと思います!

「なんてかんたんなJavaEE」civicさん

JavaEEには馴染みがなく、どんなものか知らなかったのですが、
JSONを返すREST APIを作るデモを見せていただいて、概要をつかむことができました。
以前にJavaでWebアプリケーションを開発している人とお話したことがあって、
(類似のサービスを私が作っていたため、どんな仕組みか説明してくれた)
あれはきっとこういうフレームワークを使っていたのだ、と悟りました。

文字コードとプログラミング(仮)」gonchan93さん

文字コードは深く考えると大変そうで、いつもなんとなくUTF-8でやっていましたが、
どうやらそれで大丈夫だということと、
今はメールもUTF-8でOK、という学び!
データベースが絡む場合など、みなさん苦労してるんだな、ということが分かったのも良かったです。

「Ncatを使おう」hayajoさん

Ncatって何だろう、と思っていたら、コマンドでした。
HTTPクライアントにもサーバにもなってくれる、とても便利そうなものでした。
HTTP->HTTPSの変換ができるとか、さっそく開発に活かせそうな感じがしました。
とりあえずHTTP/2通信できるかやってみたいです。

「怖くないし役に立つ設計原則の話」neko_gata_sさん

実際にプログラムを組むにあたって、どのように設計原則を活かすのか、というお話でした(と理解しました)。
自分自身を「設計」を考えるのがわりと好きなタイプだと思っているので、とても興味深かったです。
DRYでないコードが出てきたときには、共通化のほかに分割し直す、というアプローチを考慮すべきということ、と、
将来的に変わるかもしれない仕様と、変わりにくい仕様、という視点があるということ、の2つが大きな学びでした。
※私の発表の背景にあった設計についての概念に似た部分があって、自分の発表の前にこのお話があったことで、意図せずフォローしてもらった感じがします。大変助かりました!

「はじめてのソフトウェアテスト」kasacchifulさん

テストについて、種類や原則、手法まで取り上げられていて、「テスト」というのは自分が漠然と思っていたよりも広い世界なんだな、という印象を受けました。
<自分的メモ>
ドキュメントの段階で欠陥がある場合
費用や時間との兼ね合い
3色ボールペン
テストの設計・実施をそれぞれどのタイミングで行うか

「はじめての修羅場」hiro_ishibashiさん

タイトルのインパクトが強大ですが、内容はとても冷静に分析されているものでした。
こんなPMさんが修羅場に降りてきたら間違いなく救世主に見えます。

フリーランスの始め方(初心者向け)」 nemuzukaさん

中途半端フリーランスの私にはとても有意義な発表でした。
個人事業税って知りませんでした・・・請求くるほど稼げてないからですが。

「新人研修の作り方」のその後 LT5min masaru_b_cl

習得速度のばらつきなどを検証して、改善していっているとのこと。
小さなステップに分割する、チュートリアルのコードを拡張してもらう、など。
私の場合、大学でわりとほったらかし気味(?)に教わっただけなので、企業での研修のお話は新鮮でした。

「インターネットの契約から開通まで」kam1nchuさん

なんでひかり電話・・・?と思って聞いていたら、IPv6アドレスを自分のルータから配るためだった!
知らなかったです。
自宅のネット環境を改良してみたくなりましたよ。まずはルータから・・・



懇親会含め、とても有意義な土曜日でした。ありがとうございました!
次回9月は、個人的に立て込んでいる時期なので難しそうな予感がしてますが(泣)、また必ずお邪魔したいと思います!

Neo4j + Rubyでグラフデータベース探索(Neo4j v3.1.2 + Ruby)

久しぶりにグラフデータベースをいじったのでメモ。

Neo4j・・・NoSQLに分類されるグラフデータベース。
公式ページ:Neo4j, the world's leading graph database - Neo4j Graph Database
少し前になりますが、パナマ文書の解析にも使用されたと紹介されていました。
こちらの日本語記事がとても興味深いです:「パナマ文書」解析の技術的側面 – Keiichiro Ono – Medium

グラフデータベースなので、人物の相関図(Twitterのフォロー・フォロワー関係のような)や、路線図を格納・検索するのには適していますが、テーブル構造のデータには当然リレーショナルデータベースを使うべきなので、「これはNeo4jを使おう!」という場面は私のお仕事の範囲ではまだそれほど多くありません。また、データ自体がグラフ構造でも検索目的によってはRDBが適している、という場合もあります。
ということで、久しぶりになってしまったので、最低限のデータロードと探索方法のメモです。

Neo4jの起動

Neo4jはメジャーバージョンが3になっていました。
個人で非商用に使うぶんには無料ですので、https://neo4j.com/download/ からダウンロードしてインストールします。
バージョン2系のときはコマンドラインから起動していたのですが、3からは簡単なGUIアプリケーションが付属しています。
これを起動してサーバをスタートします。
サーバが起動していれば、ブラウザから http://localhost:7474 にアクセスするとコンソールが表示されます。
パスワードを聞かれますが、初期設定は「neo4j」です。ログインするとまず「パスワード」を変更するようにうながされますので、変更します。
(そのまま「neo4j」にするとエラーになるので、何か別のものにする必要があります。)

Rubyから操作する

RubyからNeo4jを操作するためのドライバは、Neo4jの公式ページで紹介されているものでは、

  • neography
  • neo4j-core
  • neo4j (これはRubyのドライバとしての名前で、データベース本体の「Neo4j」とは別物)

の3つがあります。
neographyは何年も前からあり、私も以前使用していたのですが、GitHubを見ると最近はリリース・開発ともにあまり活発ではないようです。(ある程度完成している、という面もあるのかもしれませんが。)
neo4jも以前からありますが、こちらはRubyOnRailsやActiveRecordと合わせての利用向けという印象で、「スクリプトを書いて探索したいだけ」の用途にはオーバースペックに思えて使用したことがありませんでした。
そういう人が他にもいたのかどうか分かりませんが、neo4jからローレベルAPIだけを取り出したneo4j-coreというものができていましたので、今回はこちらを使ってみます(もしかしたらだいぶ以前から存在していたのかもしれませんが・・・)。

GitHubhttps://github.com/neo4jrb/neo4j-core
Gem:https://rubygems.org/gems/neo4j-core/

ドライバ本体は、

gem install neo4j-core

でインストールできます。

ここから先のサンプルコードは全部まとめてGitHubに置きました。
GitHub - yuw27b/neo4j_ruby_sample: Load and search data on Neo4j with Ruby driver

サンプルデータ:都道府県の隣接関係

サンプル用にこんな感じのデータを用意してみました(*)。くっついている都道府県のリストです。接続方法が橋かどうか、という情報を持っています。

#pref1#pref2#bridge
北海道青森県1
岩手県青森県
秋田県青森県
宮城県岩手県
つづく・・・

グラフのロード

Neo4j本体にはCSVロード用のコマンドラインツールも付属していますが、わざわざインポート用CSVの成形をするくらいなら、Rubyでデータをパースしながらneo4j-core経由でロードしていくほうがやりやすく感じます。
(手元のCSVファイルがneo4jのツールでそのまま使えるフォーマットであれば別ですが、私の経験上そういうケースはあまりないので。)

ロード用スクリプト
https://github.com/yuw27b/neo4j_ruby_sample/blob/master/load.rb

ロードしたらコンソール(http://localhost:7474)で確認してみます。
f:id:yuw27b:20170402223532p:plain
※コンソールの左側メニューにあるボタンは、25ノードor25エッジまで表示します。あまり大きなネットワークをプレビューしようとすると、ブラウザが重くなってくるので、自分でCypher queryを実行する場合も100くらいでLIMITをかけておいたほうが無難です。

グラフの探索

Cypher Queryの一例です。


新潟県のお隣のお隣

MATCH (a{name: '新潟県'})-[*2]->(b) RETURN DISTINCT b

橋でつながっているところ

MATCH (a)-[:Adjoin{connection: 'bridge'}]->(b) RETURN a, b


新潟県から神奈川県までの経路10個まで。ただし、経由する都道府県は9まで。

MATCH p = (a{name: '新潟県'})-[*..10]->(b{name: '神奈川県'}) RETURN p LIMIT 10

※グラフなので、経路探索の場合は容易に組み合わせ爆発が起こります。経路の長さやマッチさせる数に制限をかけないといつまで経ってもレスポンスが帰ってきません。


新潟県から神奈川県までを最短経路で
この場合は、距離を無視しているので、経由する都道府県が最も少ない、という検索になります。また、同様に組み合わせ爆発が起きる可能性があるので、経由数の上限もつけてあります。

MATCH p=shortestPath((a:Pref {name: '新潟県'})-[*0..10]-(b:Pref {name: '神奈川県'})) RETURN p

2つ以上ある場合に全部取るなら、

MATCH p=allShortestPaths((a:Pref {name: '新潟県'})-[*0..10]-(b:Pref {name: '神奈川県'})) RETURN p
ドライバ経由の探索

ドライバ(neo4j-core)経由の場合は、
そのままCypher Queryを投げるやり方

Neo4j::Session.query("MATCH (a{name: '新潟県'})-[*2]->(b) RETURN DISTINCT b.name")

と、

Cypher DSL APIを利用して、もう少し読みやすい(?)感じで書くやり方

Neo4j::Session.query.match('(a)-[*2]->(b)').where(a: {name: '新潟県'}).pluck('DISTINCT b.name')

があります。
個人的には別にDSLじゃなくてもいいかなあ、と思っていますが・・・。

簡単なコード例はこちらにあります:
GitHub - yuw27b/neo4j_ruby_sample: Load and search data on Neo4j with Ruby driver




以下、公式サイトなどのリンクです。
こういうのはできるのかな?どうやるのかな?というときはこのあたりを調べるとだいたいあるような気がします。
公式ページ https://neo4j.com/
Cypher Queryのドキュメント https://neo4j.com/developer/cypher/
Cypher Queryチートシート https://neo4j.com/docs/cypher-refcard/current/

また、Rubyのドライバ(neo4j-core)に関してはGitHubリポジトリにドキュメントがあります。
Home · neo4jrb/neo4j-core Wiki · GitHub


※データはこちらを参考にさせてもらいました:http://uub.jp/prf/rinsetsu.html