yuw27b’s blog

技術メモと雑記

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

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

第51回勉強会(2017/03/25) - 長岡 IT開発者 勉強会(NDS) に行ってきました。
50回は行けなかったので、半年ぶりのNDS、半年ぶりの長岡でした。

NDSは名称に「IT開発者」とあるとおり、幅広い分野の開発者さんが参加しているところが好きです。
私はWeb周りをやっているので、普段SIerさんとお話しする機会はなかなかないですが、NDSでそういった方の発表を聞くと勉強になります。

また、今回は「データに関わるなにか」がテーマということで、グラフ構造データについて発表させてもらいました。
スライドはこれです:
yuw27b.github.io

  • グラフ構造データについて
  • グラフデータベースのNeo4j
  • W3Cが標準化したリソース記述方式のRDFとそれを探索するSPARQL
  • おまけでグラフの可視化ライブラリとか

という、それぞれ独立したものを詰め合わせたのですが、「独立したもの」ってちゃんと伝わったかどうかがちょっと不安です(もうちょっと強調してしゃべるべきだったかな、と。)

そもそもは、Neo4jやSPARQLを使ったことある人はあんまりいないんじゃないかな、と思って題材に選びました。
質問していただけたり、知らなかったよ、と言ってもらったりしたので、その点は良かったです。
今すぐ業務に使う、ということはあまりないかもしれませんが、こんなものもあるんだな、と思っていただけてたらうれしいな。


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

Vue.jsから始めるDOMにデータを持たせないアプリケーション開発への第1歩 nemuzukaさん

サーバからJSON返してもらうような業務用Webアプリケーションを作っているとのこと。
jQueryやテンプレートエンジンでは辛くなってきたが、業務アプリでReactとかAngularを覚えるのもちょっと、ということでVue.jsを採用したそう。
HTMLのクラスがJS用かCSS用かわからなくなるなど、DOMにデータを持たせるのは限界だった、とおっしゃってましたが、非常に共感できました。
ちょうどVue.jsやってみたいな、というところだったので、タイムリーな発表でした!

RDBMSトランザクション分離レベルやレプリケーションとか。あと苦労話。 bell-miyaさん

なんとなくサーバサイドもやっている(けどフロントメイン)な私が一番分かってない部分な気がしていて、楽しみにしていた発表でした。で、やっぱり私分かってないな、と。
分離レベルやSQL標準など、まだ理解しきれませんでしたが、勉強していきたいです。

入門系の本を一冊も読まずにデータサイエンスの世界に足を突っ込んでみる sakapunさん

チートシートがわかりやすかったです!やはりこの分野はPythonなんですね。
職場に機械学習をやっている人たちがいて、彼らはChainerを使っているようでしたが、今はいっぱいあるんだな、と。
あと「そろそろ本を読む」とのことでした。

PostgreSQL データ型 civicさん

「数値・文字列・日付ぐらいしか使ってない」って私のとこですね・・・。
PostgreSQLはデータ型が多いと思ったが、現在はそれほど差がなかった、というのが興味深かったです。
Python SQL Alchemyが便利とか。
排他制約とか、そもそも適切な型を指定するとか、もっとちゃんとやるべきだな、と思いました。

C#によるデータ処理のなにか masaru_b_clさん

.NET、C#は私自身はあまり馴染みがないのですが、LINQというものについて。
ExcelCSVXMLRDBMSなどに向けて共通のコードで.NETからクエリが発行できるということ・・・であってるかな。
書籍も書かれている方で、非常に聞きやすかったです。発表うまくなりたい。



また長岡にお邪魔したいと思います。
ありがとうございました!

JavaScriptでクリップボードにコピー(Chrome/Firefox/Safari10〜/IE9〜)

クリップボードにコピー」はJavaScriptのみでは不可能だと、昔に思い込んだままだったのですが、HTMLの各種APIJavaScriptを組み合わせることで、ほとんどのブラウザで実現できるようになってきたようです。

HTMLとJavaScriptのコード
<p class="copyTarget">コピーしてもらいたいテキスト</p>
<button class="copyBtn">クリップボードにコピーする</button>
function copyText () {
  var $target = document.querySelector('.copyTarget');
  if (!$target) {
    return false;
  }
  var range = document.createRange();
  range.selectNode($target);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  return false;
}
document.querySelector('.copyBtn').addEventListener('click', copyText, false);
使用するAPIとブラウザ対応

以下のAPIを使っています。

API 仕様 対応ブラウザ
Range API DOM Level2 + Living standard IE9〜、Edge、ChromeFirefoxSafari
Selection API > getSelection() W3C 草案 IE、Edge、ChromeFirefoxSafari
Android browser4.3〜
*ただし、window.getSelection()のサポートに限って確認。
Selection APIの全てをサポートしていないブラウザもあります。
Editing API > execCommand('copy') W3C 勧告改定案 IE9〜、Edge、ChromeFirefox、Safari10〜
これも仕様の全てをサポートしているブラウザは少ないですが、「copy」の実行についてのみ確認。



Safariがバージョン10以降なのがちょっとネックではありますが(2017年2月現在)、限られたユーザー層向けのWebサイトでは実際に使用したケースでは特に不具合の報告はありません。
ブラウザによっては、一旦「クリップボードにアクセスしようとしています」というような警告ダイアログが表示されるので、導入の際にはそのあたりも検討が必要になりそうです。

CSSの擬似要素を使ったあれこれ

この記事は、今年お世話になったCSS Advent Calendar 2016の20日目です。

擬似要素自体は特に今年どうこうなった仕様ではありませんが、大変お世話になりました。

擬似要素をよく使う場面

自分的頻出パターンとしてはこんな感じです:

counterと組み合わせたリスト

See the Pen List with counter by Yu Watanabe (@yuw27b) on CodePen.


パンくずリスト

See the Pen Breadcrumb by Yu Watanabe (@yuw27b) on CodePen.


三角形

See the Pen Css triangle by Yu Watanabe (@yuw27b) on CodePen.


上下中央揃え

See the Pen Align middle by Yu Watanabe (@yuw27b) on CodePen.



「:」なの?「::」なの?

擬似要素は、CSS 2.1の仕様ではコロン1つの「:before」「:after」でしたが、CSS3ではコロン2つになりました。
CSS3はモダンブラウザとIE9以上が対応しているので、IE8のサポートが切れた今年(2016年)からは「::before」「::after」を使用すれば良いと思います。
とはいえ、IE8でも・・・という案件がなぜかまだあったり、各ブラウザも後方互換のため「:before」でもきちんと解釈してくれるし、という状況で、結局コロン1つで書くことも多かった1年でした。

Safariのバグに出会った

擬似要素とcurrentColorを組み合わせたときに発生します。Safari9で修正されたようです。
親要素のcurrentColorがうまく継承されない、というものです。
css - currentColor seems to get "stuck" in Safari - Stack Overflow
Bug 133420 – `currentColor` computes to the same colour on all elements, even if 'color' is inherited differently

ターゲットブラウザにSafari8が含まれそうなら、擬似要素内でのcurrentColorの使用は避けたほうが良いと思います。


来年の抱負は、Flexible Boxにお世話になりたい!です。
未だにIE9〜対応の案件もあるので難しそうですが、スマートフォン専用サイトならそろそろ使えそうですね。