社員のプロフィールと会社の歴史を共有するためのマイクロサービス Profistory

※この記事は「富士通クラウドテクノロジーズ Advent Calendar 2017」の 21 日目の記事です。
昨日の記事は blue271828 さん の「Mackerel でゆるい Docker 監視」でした。
明日の記事は kzmake さん が「NIFCLOUD 新機能:追加 NIC」について書くようです。

ぼくが所属する富士通クラウドテクノロジーズは社員数が約 250 人おり、比較的社員数が多い会社です。
社内でよく「誰があの技術に詳しいのか分からない」「あのサービスの担当者って誰なんだろう」みたいな声が上がっていたので、
社員のプロフィールと会社の歴史を共有できる Profistory という Web サービスを作ってみました。

特長

  • 共同編集でプロフィール・社史を作成
    • 単に自分のプロフィールを公開するだけでなく、他の人が登録した仕事を自分のプロフィールに追加したりできる
    • みんなが登録した仕事をもとに、年表 (いわゆる社史) を表示
  • OneLogin SAML での SSO 認証に対応
    • 社内システムにありがちな、面倒くさいアカウントたな卸し作業が不要
    • 他の社内システムとのシームレスな利用が可能
  • フル機能が API からも利用可能
    • 画面から行う操作はすべて API からでも利用可能
    • データ解析とか他システムとの連携とかもしやすい

画面イメージ

(※以降のスクショはテスト用のデータを埋め込んだものです。)

トップページ

「仕事の一覧」「社員の一覧」「タグの一覧」がサマリー表示されています。


仕事一覧 (社史)

みんなが登録した仕事の一覧を時系列で閲覧することができます。
「あの機能、誰が担当したんだろうな?」というような局面で役に立つんじゃないかと思います。


仕事詳細

仕事の詳細を開くと、その仕事に参加したメンバー、仕事にひもづけられたタグ、
それから仕事に関連する URL の情報がいい感じに表示されます。
「仕事に参加」をクリックすると、自分のプロフィールページにもその仕事が表示されるようになります。


社員詳細

自分やほかの社員のプロフィールページはこんな感じです。
自分自身につけたタグと、いままで自分が関わってきた仕事が表示されます。


タグ一覧

仕事や社員につけられたすべてのタグの一覧を、タグクラウド形式で表示するようにしています。


タグ詳細 (タグにひもづいた仕事・社員の一覧)

各タグにひもづけられた仕事の一覧と、社員の一覧を表示できます。
たとえば、python タグの情報を見れば、社内の python 製プロダクトと、python に詳しい社員の一覧を取得することができます。


SAML 認証

FJCT では社内の認証基盤として OneLogin という SaaS を導入しています。

今回、OneLogin の SAML 認証に対応したので、Slack / GitLab といった他のサービスにログインしていれば、Profistory にもログインできるという、
シームレスな SSO 連携を行うことができました。

さらに工夫した点としては、ログインするたびに SAML から受け取った情報でユーザー情報 (苗字・名前) を更新するようにしているため、
もし社員一覧のマスターに更新があったとしても、ログインさえすれば自動的に情報が更新されるようになっています。

API 対応

社内システムって API がないものが多く、スクレイピングで自動化しなければならなかったりするのがつらいので、
「せめて自分が作る社内システムは API を公開しよう」という思いで、フル機能な API が使えるようにしてみました。
詳しくはどこか別のところに書きますが、下記のような REST API (JSON 形式) が利用できます。

  • 仕事に関する操作
    • 仕事一覧: GET /api/works.json
    • 仕事詳細: GET /api/works/:title.json
    • 仕事追加・更新: PUT /api/works/:title.json
    • 仕事へ参加: PUT /api/works/:title/join.json
    • 仕事から抜ける: PUT /api/works/:title/leave.json
  • 社員に関する操作
    • 社員一覧: GET /api/users.json
    • 社員詳細: GET /api/users/:user_name.json
    • 社員更新 (自分のタグを更新): PUT /api/users/:user_name.json
  • タグに関する操作
    • タグ一覧: GET /api/tags.json
    • タグ詳細: GET /api/tags/:name.json

技術的な話

ソースはここにあります。

docker-compose up -d でローカル環境上で起動させることができるので、よかったら触ってみてください。

利用技術的には、いったん伝統的な Web アプリケーション (sinatra + haml + mongoid + jquery) として作りました。
社内システムだし、とりあえず動いて、API があればいいっしょという気持ち。

あと、これを作っている間に、ruby-saml gem と config (railsconfig) gem の考慮漏れを見つけて、p-r をマージしてもらったのが楽しかったです。

おわりに

社員のプロフィールと会社の歴史を共有するためのマイクロサービスについて、プロトタイプを作ることができました。
あとはちゃちゃっと API のテスト書いて、社内に試験導入してしまいたいな。
以上、少し早いですが、よいお年を〜。

自分がたのしく英語を話す練習をするための仕組みを作ってみた (hugo-recital の紹介)

NIFTY Advent Calendar 2016 の 6 日目の記事です。
昨日は@winterwind26 さん俺たちのSwift 3はまだ始まったばかりだ! - ObjCからSwift 3へ移行するときのTipsでした。

What's that?

Hugo という静的サイトジェネレーターを使って、自分がたのしく英語を話す練習をするための仕組みを作ってみました。
スティーブ・ジョブズのスピーチ動画で試せるのでよかったら使ってみてください。(iPhone でも閲覧できます。)




経緯とか

  • 英語、読み書きはある程度できるけど喋るのがとにかくむずかしいので、口に出して英語を話す練習をしたい
  • 練習したい気持ちはあるんだけど、仕事が忙しくなってきたりすると時間がとれなくてオンライン英会話とかは続かなかった
    • 自分の好きなこと (技術系プレゼン動画・好きな音楽等) で練習すれば気軽に続けられるのではないか?
  • 下の動画で紹介されていた勉強の仕方をやってみたい
    • 英語の映画を漠然と流し見るのではなく、1 シーンずつ繰り返し観て自分の口で再生できるまで練習するというメソッド
    • 地道な方法だけど自然に英語が話せるようになりそうでよさそう
    • やってみようとしたけど、繰り返し練習するために同じ場面へ巻き戻すのが異様にめんどくさい
    • 頭出しを自動化したい


使い方

Hugo のテーマとして作ってあるので、普通に Hugo のサイトを作るような感覚で使えます。

## 新しい hugo サイトの作成
hugo new site use-hugo-recital

## 作成されたサイトのディレクトリに移動
cd use-hugo-recital/

## hugo-recital テーマのインストール
git clone https://github.com/tily/hugo-recital.git themes/hugo-recital

## このサイトで hugo-recital テーマを使う設定を書く
vi config.toml ## theme = "hugo-recital" という行を追加

## test.md という記事の作成
hugo new test.md

## 作成された test.md を編集していく
vi content/test.md

y(=youtube), t(=timing), w(=word) という 3 つのショートコード (○○記法みたいなやつ) を使って教材を作っていくことになります。
ミニマムな例としてはこんな感じに書くと、

+++
draft = false
title = "test"
date = "2016-12-05T13:08:11+09:00"

+++

* {{<t "00:22.0">}} Thank you.
* {{<t "00:27.5">}} I am honored to be with you today for your commencement

{{<y VyzqHFdzBKg>}}

こんな感じになります。


モバイル対応について

基本的には bootstrap さえ使っていれば、head タグの中に、

<meta name="viewport" content="width=device-width">

と書けばだいたい Mobile Safari でもそれっぽく表示されます。

ちょっとがんばったポイントとしては、今まで Mobile Safari では YouTube の動画を埋め込んでも再生が開始されるとプレイヤーが全画面表示になってしまって、JavaScript から再生/停止等のプレイヤー API を操作することができなかったのですが、iOS 10 から video タグに playsinline という属性が追加されて、前述操作が可能になったので使ってみました。playsinline 便利。

ある程度使ってみた感触

この仕組みを使って何度も聞いては自分の口で再現しようとするうちに、2179 単語分ぐらいを発音はともかくオリジナルと同じリズムで言えるようになりました。

何度も練習していくと、たとえば、

  • monkey の o の発音は ʌ で、日本語の「あ」に近いとされているけど、実は日本語の「あ」よりは少し口をすぼめている感じがするな
  • f/v はこうやってちゃんと歯を唇にあてて発音するとそれっぽくなるんだな

みたいな感じで、自然に自分なりの英語の発音の仕方が身についていくようになっていておもしろいです。

まとめ

技術的にそこまで新しいことはやってないし、UI 的にもいろいろイマイチなんだけど、作りっぱなしではなく、ちゃんと自分の役に立つものを作れた感じがしてよかったです。

改善点としては、タイミングを入力するのが異様にめんどくさいので、もう少し自動化したりしたいです。あと、ユーザーのメイン操作が「長押し」となっていて、ずっと押していないと再生され続けないのは負担が大きいので、クリックだけで繰り返し再生できるような UI を考えてみたい。

以上、明日は@goya813 さんが何か書くみたいです。お楽しみに〜!

prgrphs.tokyo の使い方

この記事では、to に影響を受け作成したブログツール prgrphs.tokyo の使い方について説明します。


ユーザー登録・ログイン

左上に admin という隠しリンクがあるので、これをクリックすると画面下部にナビゲーションメニューが出ます。
メニューのログインっぽいアイコンをクリックすると Twitter 認証のページに飛びます。
なお、もう一度隠しリンクをクリックすると、ナビゲーションメニューを消せます。

見る/書く

REST っぽい URL 設計なので、基本はアドレスバーに URL を手打ちすることで操作してください。

ユーザーページ http://prgrphs.tokyo/${ユーザー名}
段落新規作成ページ http://prgrphs.tokyo/${ユーザー名}/new
段落個別ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}
段落編集ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}/edit
  • ユーザーページで段落のパーマリンク (>) に 1.5 秒マウスオーバーすると、編集ページへのリンクに変化します
  • 段落新規作成および編集ページで publish のチェックを外すと、プライベートな記事を書くことができます
スマートフォン

ユーザーページで各段落を左にスワイプすると、その段落のパーマリンクへ遷移します。
各段落のページで左にスワイプすると、段落の編集ページへ遷移します。

キャプチャ機能

段落の作成・編集を行うと、自動的に段落のキャプチャが撮影されます (少しタイムラグがあります)。
キャプチャされた画像は http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}.png で取得できます。

※この機能はリソースおよびオブジェクトストレージの領域を圧迫するため、将来的に一部ユーザーのみへの提供、または有料化する可能性があります。

フィード/IFTTT 連携

  • 全文入りフィード
  • 全文入りフィード (段落数 20)
  • description にキャプチャ画像のみ含まれるフィード (主に IFTTT 連携用)
  • description にキャプチャ画像のみ含まれるフィード (glitch)

IFTTT で段落のキャプチャ画像を URL つきで twitter へポストする例:

エクセルダウンロード機能

http://prgrphs.tokyo/${ユーザー名}.xlsx でエクセル形式のファイルとしてユーザーの全段落をダウンロードできます。
自分のページの場合には created_at カラムにも情報が入ります。

使う上で知っておいたほうがよい仕組み

  • Web アプリケーションは heroku にデプロイされています
  • キャプチャ機能でキャプチャを撮影する部分 (resque ワーカー) のみ、x window system + xvfb が必要、かつフォントの設定も調整しているため、tily が root 権限を持つクラウド上のサーバーにデプロイされています

その他

  • 現状セキュリティレベルがそこまで高くない (https で通信できない、heroku + mongohq で運用しており mongohq のポートはグローバルに公開されている) ので、プライベートモードでもあまり重要な情報を書かないようにしてください
  • ユーザーページおよび段落個別ページの各種 title タグ (フィードおよび HTML) には URL が入ります
  • twitter card に対応しています
  • 段落のソートは新しく更新された順です
  • ページネートしません (http://prgrphs.tokyo/tily/74334ef0-14da-0132-9be7-02fbb8bfa98a)
  • 下記環境で動作確認しています
  • はてなブックマークコメントは表示されません (meta タグ参照)
  • ユーザーページおよび段落ページは Creative Commons — Attribution-ShareAlike 4.0 International — CC BY-SA 4.0 で公開されます (meta タグ参照)
  • 予告なしに機能の追加・変更・削除、およびサービスの停止・再開を行います
  • 道徳的・法律的に問題がある記事は削除します
  • how to use prgrphs を購入してください (内容はゴミテキストファイルです)

20150214 追記

常に 1 つ前の段落しか読めないマルコフ連鎖のようなリレー小説投稿サイト、R E L A Y R

R E L A Y R



ソース: tily/relayr

漠然と前から作りたいと思っていて 14 日間の片想い を作ったときにどんな風にしたいか分かってきたので作ってみた。

  • リレー小説だけど常に 1 つ前の段落を読みながら続きを書くしかない
  • ただし登場人物の一覧だけはいつでも登録したり参照したりすることができる
  • 小説を書きはじめるときに指定した段落数に達するまで全文は読めない

「親以外の参加者は全体像がわからない、進行状況もわからないという曖昧模糊とした状態におかれるので、」 (メールでリレー小説 index) そのほうがおもしろいんじゃないかな。子供しかおらず全体像がわからない。どうでもいいけどサイト名は Yes ではなく Relayer3 から。

(中略)

最近 bootstrap 3 が使いやすくて好きになってきたのもあって、wiki とか tropy とか darekagakaku みたいなシンプルで仕組みがおもしろい Web アプリケーションを作るのにはまっていたんだけど、そろそろ飽きてきたので何か別のものを作りたい。

SlideShare の複数スライドから新しいスライドを作れるやつを作った (弘前市の写真つき)

SLIDE MIX



ソース: tily/slide-mix

人のパワポをコピペして自分のパワポを作るみたいな、仕事で普通にやっていることをウェブでもできるといいなと思って作ってみました。

こんな感じの SlideShare のスライド内個別ページの URL を入力していくと、

http://www.slideshare.net/xiangshiqin/slide-share-3257592/5
http://www.slideshare.net/benschwarz/sinatra-rack-and-middleware-1509268/82
http://www.slideshare.net/justlaputa/lt-reveal-js/24
http://www.slideshare.net/AkshayMathur7/coffee-script-32261774/13
http://www.slideshare.net/paramisoft/haml-32848604/11
http://www.slideshare.net/andrefaria/introduction-to-underscorejs/90
http://www.slideshare.net/jeresig/jquery-internals-cool-stuff-presentation/37
http://www.slideshare.net/mongodb/using-mongodb-asatickdatabaseaug2013/34
http://www.slideshare.net/bbayou/redis-8021392/41
http://www.slideshare.net/ayumin/heroku-inside/45
http://www.slideshare.net/ronreiter/bootstrap-26583904/32

こんな感じで入力したページが順番に表示される新しいスライドを作成することができます。

このウェブサービスを作るのに利用した技術に感謝するスライドを作ってみたので例として貼っておきます。

SlideShare にあまり負荷をかけないようにサーバーサイドでキャッシュしたりクライアントサイドで全部ではなく少しずつ取得するようにしたり一応していますが、問題があれば @tily までご連絡ください。

URL をいい感じに埋め込むノウハウが溜まってきている気がする。

URL を入力していくだけでポートフォリオを作成できる n n a d e というウェブサービスを作った

n n a d e

https://play.google.com/store/apps/details?id=cc.omora.android.brokencamera
https://farm6.staticflickr.com/5139/5424801771_31c06cda96.jpg
https://farm6.staticflickr.com/5281/5370261826_b39d075609.jpg

https://farm6.staticflickr.com/5288/5378307020_f5281d5b2d.jpg
https://farm6.staticflickr.com/5211/5458451676_1e3a81741b.jpg
http://d.hatena.ne.jp/tily/20110129/broken_camera
https://github.com/tily/java-android-broken-camera



ソース: tily/nnade

ポートフォリオというほど大げさなものではないのですが、最近作ったものや書いた文章のまとめ (2010/05 〜 2011/12) - PARAGRAPHS のように自分が作ったものをまとめたブログ記事を書くのが面倒くさいので、簡単に作れるウェブサービスを作ってみました。

冒頭の例ではリンクと画像しか埋め込んでいないけど、YouTube とか SoundCloud のURL を貼ると適切なプレイヤーに変換してくれたりします。 (「何を見ても何か思い出す」と同じ embed.ly を使っています。)

主に自分用に作ったものだけど、WEB で色々公開している人には便利な気がするのでよかったらご利用ください (embed.ly の無料版の制限で、1 時間に 5000 ユニーク URL 以上アクセスされるとうまく動かなくなるっぽいので、控えめに使って下さい)。あと作ったものリストに限らず、年代別に何かをまとめる他の用途にも使えそうだなと思った。

追記 (2014/07/21)

favicon が取得できた場合にはリンクの先頭に favicon を表示するようにしてみました。

追記 (2014/07/24)

settings ページで「自分だけ編集できる」「nnade を利用しているユーザーなら編集できる」「誰でも編集できる」を選択できるようにしてみました。

http://i.gyazo.com/0cac768b182986f1f76d4f75c4c5f606.png

作りながら「Wiki みたいに誰でも編集できるようにしたほうがいいんじゃないか」とか思っていたのですが妥当な落としどころになったんじゃないかと思います。これによって tako3about.me の中間ぐらいの自由さになったような気がします。

追記(2014/08/17)

ユーザー設定でポートフォリオを傾ける角度が指定できるようになりました。

http://i.gyazo.com/bec59ecdc098584bb43b796a2a80002a.png