思い出は銀の弾

ひよっこエンジニアが調べたことや経験したことをまとめます!

スクラムとカンバンの朝会の違いについて考えてみた

チームにカンバン(※開発手法としてのカンバン wikipedia)を導入し始めてみて1ヶ月半ほど経ちました。

また、研修として実施していた、1ヶ月間限定のスクラムマスター役もどうにか終えました。

ともにアジャイル開発手法の枠組みに位置づけられている二つの手法

ですが、その性質はやっぱり異なると実感しました。

どのような関係性にあるのか、次の図がわかりやすいかなと思います。 画像 出典:Scrum, Lean, Agile, Kanban: how does it all relate?

朝会について今回話題を絞ります。

※以降持論です。

ともに15分間で実施をしていた朝会ですが、自分がスクラムマスターときと、カンバンでの朝会進行役(カンバンマスターとか、カンバントレーナーとかいう役割がカンバンで定義されていないので。。。)で問いかけ方が異なっています。

なお、コミュニケーション・情報共有を図るという目的は変わってはいません。

スクラムマスターのときの問いかけ

  • 個人に注目をさせる

カンバンでの朝会進行役のときの問いかけ

  • タスクに注目をさせる

この違いは何によってもたらせてれいるかというと、先にちょっと触れたそれぞれの方法の源流の違いです。

スクラムにおいては、(スクラムマスターは)チームの成長に責任を持ちます。そのため、チームとして機能するために、開発メンバーの一人ひとりが高いパフォーマンスで仕事があたっているか、それを阻害しているものは何かを考えます。

一方、カンバンにおいては、滞り無くタスクが次のワークフローに移れているかが焦点となります。そのため、それを阻害しているものは何かを知ろうと努めます。


両方のやり方を並列でやってみたからこそ強く意識したので、専任でやっている方にとっては当然の話であったかと存じます。

以上、駆け出し&両方のやり方をちょっと触れた人間の考えでしたた。

今までfeedlyで保存した記事を並べてみる

ひとつ前の記事、feedlyで保存した記事を取得するで実際に得た、今まで保存した記事です。

かなり量があってびっくりしましたw

リンク

データ可視化ツールの最新安定版「Grafana 3.0 Stable」がリリース
オンプレミスとの比較も忘れずに、クラウドアーカイブの4大“懸念事項”
The Epic Story of Dropbox’s Exodus From the Amazon Cloud Empire | WIRED
ハードディスクが故障する元凶は熱ではなかった
楽天株式会社の新オフィス 楽天クリムゾンハウスに行ってきた!
さくらの20年史と新サービス電撃発表! 「第28回さくらの夕べ(さくらの聖夜)」レポート
2015年、このWebサイトのデザイン・アイデアは見逃せない!「Website of the Year」 -日本からも2つのサイトが受賞!
新しい仕様でより進化したPhp 7を体験してみよう
[Js]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
[速報]マイクロソフト、無償のコードエディタ「Visual Studio Code」をオープンソースで公開。Microsoft Connect(); 2015
GMOインターネット「ConoHa」、性能大幅改善の鍵はSDSとSSD
デルがデータセンター事業を立ち上げ--狙いはハイパースケールの少し下
こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
モバイル「Google Maps」、オフラインでのナビゲーションと検索を追加--まずは「Android」版から
すべてがUiになるVrの世界
JavaScript統合開発環境「Babel 6.0.0」がリリース、6to5の最初のコミットからちょうど1年後
「Firefox 42.0」がリリース、トラッキング保護機能付きのプライベートブラウジングを搭載
アマゾンのドル箱となったAwsがこれほど破壊的である理由
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
今からできるWebコンテンツの次のコト
関数型リアクティブプログラミング言語Elmに学ぶ フロントエンド開発の新しい形 【後編】
40Gbpsを確認--レッドハットやブロケード、クラウド型NFVを共同検証 - ZDNet Japan
Reactによってネイティブ/Web論争は終わったのかもしれない
DellがEMCを巨額買収、一番喜ぶのは誰?
101回死んだエンジニア: やっぱり四万人のボランティアは必要だよ!
ニュースアプリの「究極のUI」って何ですか? Yahoo!ニュースと日経電子版が大激論
クオリティがすごいと海外で話題に!もしマクドナルドがApple風に広告を展開したら
「五輪にはボランティアで働けるエンジニアが必要」発言の真意を聞く - ZDNet Japan
EMC買収で巨大化するデル--その狙いと今後の課題 - ZDNet Japan
デルによるEMC買収、規模のメリットはパブリッククラウドの課題に勝るのか - ZDNet Japan
DeNAの意思決定「ヤフー、楽天、LINEがやらない取り組みを……」 - ログミー
[速報]わずか3ステップでモバイルアプリケーションを生成する「AWS Mobile Hub」発表。AWS re:Invent 2015 - Publickey
デザインやイラストで色の組み合わせを決める時の参考になるカテゴリ別100種類のカラーパレットのまとめ | コリス
インフラエンジニアの責任範囲と評価
HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
JavaScriptプラットフォーム「Node.js v4.0.0」がリリース、io.jsと統合し、今後は定期的なリリースに移行
地図が簡単に楽しく作成できる!世界地図をはじめ、日本を含めた各国の地図にも対応 -Pixel Map Generator
【5分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜
【Parse】Push通知をAndroidアプリに簡単に組み込む方法
エンジニアをやり続けるなら、「承認欲求」を満たすより「誰かの期待」を生み出す方が面白い【連載:えふしん】
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
いまさら聞けない「コードの英語」超入門
モダンで美しいUIのフォーラム実装OSS「Flarum」:phpspot開発日誌
デキる開発者は「酷いコード」とどう付き合っているのか?
Cookpad × CyberAgent × DeNA の15卒エンジニア交流会を開催しました
[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid
Bootstrapでたて型のタブを実装できる「Bootstrap Vertical Tabs」
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ | コリス
Android 6.0 ( Marshmallow ) 対応済んでる? 公式ドキュメント "Behavior Changes" 翻訳
GitHub、リポジトリ内で利用されているプログラミング言語トップ10を発表。背後から伸びてきたのはあの言語
Yahoo!カーナビ お盆期間中の全国目的地検索ランキング発表!(2015年版)
配色の参考にいい!シンプルな配色ルールで作り出された魅力的で美しいカラーパレットがいっぱい -Color Hunt
Webサイトのデザインの完成度をアップする、小さなディテールだけど効果が確実にある改善方法 | コリス
グーグルの次期Android、正式名称は「Marshmallow」に
本当に実用的なたったひとつのソートアルゴリズム
Uxに関する疑問に答えて気づいたこと
クリエイティビティとコピーについて
[イベントレポート] Android オールスターズ #dotsandroid | Developers.IO
Facebook、JavaScriptライブラリ「React」開発ツールの最新ベータ版を公開
「絶対無理!」からはじまったCerevoの『DOMINATOR MAXI(仮)』開発~モノの完成度を高める良い意味での“割り切り”とは?
鮮烈な演出を支えるのは、枯れた技術と入念なテスト――ライゾマティクス リサーチのプログラマーに聞く
今月のAmazon Kindle月替わりセールに、Web制作者に魅力的なラインナップが揃ってる
事例から学ぶ、優れたキャッチコピー10選。第四回「発見のあるコピー」
データ中心になると忘れがちな直感の重要性
サイト内ツアーを実装できるシンプルなjQueryプラグイン「TourBus」
Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる! -Font Library
新たなテクノロジで「既成概念を破壊する」--ソフトバンク宮内社長が方針語る
[マンガ図書館Z]Gyaoと赤松健さんが無料電子コミックサービス提供開始 - 産経アプリスタ
プログラマの健康を考えるイベント「ヘルシープログラマ!」を開催!
エンタープライズIT版のデブサミ「夏サミ2015」開催、講演関連資料のまとめ:CodeZine(コードジン)
仕事の効率アップ? 職場の机を片づけてみませんか
git 履歴を変えるコマンドたち
生産性の高い人が必ず使っている「11の裏技」。スマホは決してSns用ではない! | Tabi Labo
IoTがもっと盛り上がったら、何が必要になる?カヤック×ユカイ工学×メタップスに聞く「黎明期に市場を作るエンジニアの条件」
視点の違う「2トップ体制」が肝~React.js移行を進めるベーシックに見る、高速で開発環境を改善する方法 - エンジニアtype
新しい高速渋滞マップ 「Yahoo!道路交通情報」をリリース
Android Design Support Library について
Pocketに保存した記事を減らすのに使おう『PocketRocket』 | ライフハッカー[日本版]
Amazon謹製RDBMS「Amazon Aurora」がリリースされました!!! | Developers.IO
視点の違う「2トップ体制」が肝~React.js移行を進めるベーシックに見る、高速で開発環境を改善する方法
「ヤフーとその仲間たちのすごい研修」その内容は?
「ヤフーとその仲間たちのすごい研修」その内容は? - Yahoo! JAPANコーポレートブログ
Cssを書く、設計する時に参考にしておきたいCssのガイドライン・スタイルガイドのまとめ
背景色にブラーをかけて今っぽくするjQueryプラグイン「Background Blur」
爆速でAndroidにPush通知を実装する(Parse + Android Studio使用)
1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】 | InfinityScope
Electron - フローチャートやシーケンス図をマークダウンで記述が可能なエディタSunny Place Editorを公開しました。 - Qiita
サイバーエージェントが新卒社長を定期的に生み出す意図 | The Startup
サイバーエージェントが新卒社長を定期的に生み出す意図 | The Startup
MITライセンスのソースコードをGithubにあげるまで
すごく分かりやすい!デザインやコンテンツ設計の 面からアクセシビリティへの取り組みを解説したWeb制作者必読書
スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」 | バニデザノート
C言語パズル集:Cにまつわる興味深い問題あれこれ | プログラミング | Postd
【2015年】夏休みにお出かけしたい夏のイベント9選「えのすい」「朝食フェス」など | 株式会社Lig

GitHub、オープンな地図サービス「OpenStreetMap」への投稿機能を提供『絵で見てわかるWindowsインフラの仕組み』はありそうでなかった、Windowsを概観する地図:CodeZine(コードジン)
【料金表第2弾】Webサイト制作いくらかかるか?フリーランス・SOHOの制作代金 100社まとめ - デザインの頼み方を研究してみる
Webデザイナー必見、実務で役立つ逆引きレイアウト集 | コムテブログ
凸版印刷とハコスコ、VR事業における業務提携に合意 - CNET Japan
Microsoft、統合開発環境「Visual Studio 2015」を正式公開 - 窓の杜
Google マップが 10 歳になりました。
gitのuser.nameとuser.emailを会社/個人で自動的に切り替える方法
僕がSwiftで使ってる構文達 - Qiita
国内初のRaspi,Tessel, Edison3種マイコンボードのIoTハンズオンから考える今時マイコンボードとBaaSの親和性
2015/07 Mini Tech Talk(グリー社内勉強会) | GREE Engineers' Blog
2015/07 Mini Tech Talk(グリー社内勉強会)
「jQuery 3.0」と「jQuery Compat 3.0」の最初のアルファ版がリリース
守銭奴エンジニアが考えていること: 【57】今後、日本人エンジニアは存在感を出せるのか?
個人的に便利なGitコマンド
Macのターミナル(bash)でGitを使いやすくしてみた。(補完、branch表示) - Qiita
OpenStack Mリリースの名称が「OpenStack Mitaka」(三鷹)に決定、紆余曲折の末。10月に東京開催のOpenStack Summitにちなみ - Publickey
「jQuery 3.0」と「jQuery Compat 3.0」の最初のアルファ版がリリース:CodeZine(コードジン)
15卒エンジニア新卒研修
Git でややこしい操作する前にブランチに新しい名前をつければ混乱しない(と思う)
カギは「ドラゴンボールの法則」~若手育成の環境づくりで必要なことを、えふしん氏×村上福之氏に聞く【特集:エンジニア育成の本質】
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ | コリス
グーグル、オープンなビーコン規格「Eddystone」を発表--アップルの「iBeacon」に対抗
Life is Tech! Tech Talk を開催しました!
Ipa、「平成27年度秋期情報処理技術者試験」の受験申込受付を開始
AWS、Gitレポジトリをホスティングするバージョン管理サービス「AWS CodeCommit」の提供を開始
divやimageをiPhoneやタブレット、ノートPCの枠内にはめ込み合成できる「devicemock.js」
Web制作の参考になる!サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ | コリス
【初心者向け】Awsを学ぶためのリンク集(2015年7月版)
Ctoは「コード書き」から離れるべきか?マネーフォワード浅野千尋氏の葛藤と、見いだした光明
簡単にWeb/スマートフォンアプリのバックエンドが構築できる「Deployd」レビュー
デザイン批評を始めたい人のためのヒント集
ちょっと趣向を変えた社内勉強会を実施してみました!
エンジニアとしてのコミュ力をあげるために心掛けていること | Developers.IO
「エンジニアは今すぐディープラーニングを学べ」松尾豊氏が見据える、日本がシリコンバレーを追い越す日【連載:匠たちの視点】
[速報]来春登場「OpenStack Mリリース」の名称が「OpenStack Meiji」(明治)に決定。10月に東京開催のOpenStack Summitに合わせ
「こんな人についていきたい」社員が辞めないリーダーシップ(リーダー像) - ひかる人財プロジェクト
[3選]最近気になるjavascriptフレームワーク | Developers.IO
遺伝的アルゴリズムでAa自動生成 - ゆとりデータサイエンティストの諸々所感
【新人ディレクター向け vol.6】企画書に使える!信頼できるデータの引用元15選
エンジニアのキャリアの方向性
今年の「うるう秒」がもたらした、いくつかの問題 « WIRED.jp
フロント開発者のための.gitignore
経営とデザインに関する勉強会「UX Sketch」が初開催ーー3名のデザイナーがUXと事業の関係について語る - THE BRIDGE(ザ・ブリッジ)
GitHub、デスクトップ版GitHubの先行テスト版を公開
まつもとゆきひろ氏が「生涯プログラマー」でやっていきたい若手に贈る3つの言葉【特集:エンジニア育成の本質】
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
デザインを増幅させる 今使えるWeb技術
Uiの新鮮なアイデアをチェック!デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ

feedlyで保存した記事を取得する

feedly APIを使ってみるにて、APIの使い方を書きました。

もともとfeedlyで保存した記事(Saved for Later)をAPI経由で取得したいなという思いからやってみたのですが、結果的にこの機能はサポートされていないことが判明しました。

なので別の方法で保存した記事を取得するべく、Web側の要素から情報を引っ張るようにしました。(APIは使わないので、前の記事に書いてあることは不要です!)

できたもの

  • feedlyのWebサイト下部に、保存した記事一覧を表示
  • リンクになっているため、コピペで転用が楽に
  • 用途を広くするため、JSON形式も表示 f:id:masayuki610930:20160604121742p:plain

使い方

feedlySaved for Laterにアクセス

一番下にスクロールダウンし、"End of feed"を表示する f:id:masayuki610930:20160604122438p:plain

ブラウザの開発ツールを開き、コンソールを表示する。

GitHubにあげている"getSavedFeedlyArticles.js"をコピーして、コンソールに貼り付けEnterで実行。 f:id:masayuki610930:20160604122620p:plain

最初の画像のように、保存した記事一覧とJSON文字列が現れます!

最後に

APIが使えなかったのでスマートではないですが、もともとの目的であるfeedlyで保存した記事を取得することができました!

Webコンソールはこのように使い勝手がいいので、今後もいろいろ試してみたいと思います!

ちなみに、実際に私が保存した記事を全部乗っけてみました!今までfeedlyで保存した記事を並べてみる

『MTL勉強会「UX Sketch」vol.7』に行ってきた

Media Technology Labにて開催されたUX系の勉強会に行ってきました。

イベントURL

今回のテーマとして「UXと事業計画」が掲げられており、

についてのお話が聞けました。

以下内容と感想です。


AWA

AWAイメージ

目指すべきところとそのPoint

  1. ワクワクするリコメンドの精度
  2. おしゃれなデザインと初心者でも感覚的に使いやすいUI/UX
  3. ストレスフリーのクイックな反応と音質
1. リコメンドの精度
  • 自分向けじゃないと主されたら終了
  • 特定の感性のみで楽曲を表示しない
  • 音楽は人それぞれ独特の世界観を作りやすい
2. おしゃれさと使いやすさ
  • 現実世界にある動き(ギャップレス)
    • 伸びる表現はしない
    • 前後関係を表現
    • 位置関係の統一
    • 動きとスワイプの速度を連動
    • 要素を遷移に合わせてアニメーションさせる
  • プラットフォームの標準に準ずる
  • サービス内の要素に統一詠を落たせる
    • 同じ要素の形は同じ
    • 色も統一
    • ヘッダーもページの役割にあわせて色・フォントを使い分ける
3. ストレスフリー

ユーザーの行動を阻害しない

  • 通信を意識させないシステム
    • 最小限しか通信をしない
    • 高速なストレージの使用
  • ローディング
    • 触れるようにする
  • チュートリアル
    • 量を減らす
    • 強制しない

与える体験

  • 音楽を聞く、に直結したアクションが最上級
  • 人それぞれの世界観があり、フラットに

まとめ

  • 押し引きをシンプルに、メリハリつける
  • サービス側のエゴの排除
  • 表面のダサさはコンテンツの印象にも影響する
質疑応答
  • 主観の排除は?

    • アメリカ、イギリスのAppStoreのおすすめアプリを片っ端から使ってみる。
  • ビジネスプランとして、ターゲットはどこ?デザインの焦点はそこにあてた?

    • メインターゲットは全員(世界中の人)であり、メインターゲットはいない。
    • だからこそ、今日話し合ったような内容を通して、誰が使ってもわかりやすいようにするというのが結論。

感想

実際に使ったことのないアプリだったのですが、なんとなく「かっこいい!いけている!」プロダクトだという認識はありました。その感覚がどのようにして創り出されていたのか、ちょっとわかったような気がします。

自分がダサいと思うものはダサい、というわかりやすい軸を指標にしつつ、コンセプトとしては非常に現実的に実世界から漏れないように注意が払ってあるものでした。

事業計画的な観点で考えると、音楽と言うもののイメージが人それぞれで異なることに対し、どうそれを許容するデザインをつくるか。というものがキーであったのでしょう。

ちなみに、内容についてはこちらを参照するとより知れるかもしれません。


BrainWars/BrainDots

BrainWarsイメージ

デザインとは

  • 装飾でない
  • コンセプトを磨くこと

編集業界にいた時、先輩に言われたこと

  1. 徹底的なリサーチ
  2. 企画は3行
  3. 企画は100本ノック
ITでは?
  1. 類似サービスの研究
  2. 人目でわかるデザイン
  3. デザイン案は100本ノック

方針

  • シンプルなフラットデザイン
  • 直感的に老若男女が楽しめる
  • 非言語化で翻訳コストカット

まとめ

  • コンセプトが強いほどいいUX/UIが導かれる
質疑応答

-ローカライズはどこまで? - 殆ど無い。絵で表現してしまう。ピクトグラムとかそういう考え方。

感想

世界に脳トレアプリを打ち出したいけど、翻訳とかにリソースを避けないので非言語化を徹底した。というこここそ、事業計画とUXの交差点であったのだろうと思いました。

具体的な方策は一切示されていなかったですが(終始両アプリの宣伝でした)、言語の壁を取り払うことで世界をマーケットに出来るんだという実例を目の当たりにできました。

世界にユーザーをもつ日本製のアプリを知らなかったので、嬉しく思いました。


くらしの基本

暮らしの基本イメージ

ユーザーの気持ちがわからない問題

スタッフかつヘビーユーザーという存在

  • 異質な存在
  • 仮設「ヘビーユーザになればユーザーファーストな開発ができる」

カッコイイデザインにしない理由

  • 100年価値のあるアーカイブにしたい
  • 最新のウェブデザインはすぐ廃れる
  • カコイイデザインは、親しみづらい印象を受けう人がいる
気をつけていること
  • 自分が素敵と思った瞬間を伝える
  • ユーザーに楽しさを疑似体験してもらう

まとめ

  • ユーザーファーストを追求することで、デザインも経営も確度の高い判断ができる
  • ユーザーの楽しみを増やすために、まず自分たちが楽しむこと

質疑応答

  • デザイナーをしながらエンジニアリングの知識をどうやって得たか
    • 実務を通してやってみた。コードレビューの文化がその土壌をつくってくれている。
  • クックパッド本体とのデザインやターゲットが違うと思う。どういう相乗効果が?
    • ユーザー向けの効果:クックパッドの物足りなさを埋める。
    • 社内向けの効果:社内でコンテンツをつくる文化により、会社の「できる」意識をもたせる。

感想

お話の中で、「〜〜〜問題」というタイトルを掲げており、そのやわらかさに一目惚れしました。いつか人前に立つ際は真似したいと思います。

どうやったらユーザーのことが理解できるか、という悩みに対し出した仮定「ヘビーユーザになってみる」に至るは非常に納得ができ、一方で当たり前のように思えました。

しかし、この方のすごいのはそれを「体現」したことだと思います。3ヶ月間毎日クックパッドに投稿をし、料理の楽しみを知り、ユーザーの気持ちを得て行ったそうで、その覚悟は本当に恐れ入るばかりです。。。

どうやったらより良くなるか、を今後考えるとき、その悩みを切り開いてくれそうなアイディアを得たような気がします。

Yahoo! Messengerのログイン状況を得るAPI的なものの使い方

チームの配属が10月にあり、それ以降業務中の連絡手段の一部でYahoo! Messengerを使っています。

といってもご存知のとおり(?)Yahoo! JapanとしてのYahoo! Messenger終了しており、アメリカのYahoo!のサービスを使っています。

f:id:masayuki610930:20151222004333p:plain

今回はこのYahoo! Messengerのログイン状況を簡単に知る方法を書いてゆきます。

今回の内容

  • Web API っぽく利用する
  • 既知IDのユーザーが現在メッセンジャーにログイン中かわかる
  • 非推奨の方法かもしれない(後述)

方法

アクセスポイントはこちら。

http://opi.yahoo.com/online

パラメータとして次の3つがあります。

u m t
対象のID gもしくはa 数字

パラメータu

ログイン状況を知りたい、ユーザーIDを指定します。

パラメータm

ここでAPIの返却値を、画像でもらうか、テキストでもらうかを指定します。

gの時はhtmlが返却され、その中にはimgタグが入ってたりします。

aのときは、テキストで結果が返ってきます。

パラメータt

このパラメータは種類を指定します。

m=gの際はtが受け付ける範囲は0〜24で、

m=aの際は0〜1です。

実際にやってみる

ブラウザからやってみる

http://opi.yahoo.com/online?u=testid&m=g&t=0

で試しにブラウザからアクセスすると、(たぶんこんなIDはないから)

f:id:masayuki610930:20151221234928g:plain

という画像が返ってきます。(具体的なHTMLの中身は各自でご確認を。)

実際ユーザーがログインしているときは、

f:id:masayuki610930:20151221235524g:plain

と画像が変わります。

実際のログイン判定

上記のような画像が返ってくる指定の際、実はユーザーがオンラインかオフラインの判断がやりづらいです。というのも、返ってくる文字列は同じなんです。

ということで、おとなしくm=aを指定し、文字列で返却してもらいましょう。

http://opi.yahoo.com/online?u=testid&m=a&t=1

ブラウザからアクセスすると、

00

が返ってきます。(実際はpreタグの中にある。)

これがログイン時は

01

となります。

ということで、これをサクッとphpで書くと、次のようになります。

Yahoo! Messengerのログイン状況をチェックする

簡単ですね!

注意点

最後に注意点です。

冒頭にもお伝えしましたが、この方法は非推奨なものかもしれません。理由としては次のとおりです。

  • 公式ドキュメントを探してみたのですが、記載が見つからない
  • いつ使えなくなるか不明である(ドキュメントがないので)
  • 使用済みアカウントの探索に使えてしまう

とくに、3つ目のおかげでこのやり方のグレー感がものすごくあります(個人的な感想ですが。)

なので使う際は、このあたりの理解をもって、試してみるようにしましょう!


参考にしたサイト:http://shareourideas.com/2010/03/25/yahoo-messenger-status-api/

「プロダクトオーナー祭り2015」に行ってきた

プロダクトオーナ祭り2015に行ってきました!

ここでいうプロダクトオーナとは、アジャイル開発手法でいうところのプロダクトオーナがそのままドンピシャのものです。

ですがアジャイルそのものに囚われるのではなく、良いプロダクトを創るるために、ディレクターやマネージャー(あともちろんプロダクトオーナも!)はどんなスキル・マインドが必要か、についての話しがたくさんありました。

会場に来られていた方も、プロダクトを何かしらコントロールする立場にいる方が多くいられるようで、おそらくこの辺りのズブの素人は私だけだったように思っています。

初めて聞く言葉たち

プロダクト作成のための方法論の話では、今まで私が聞いたことのない言葉ばっかりで戸惑いました(というか、場違い感を強く覚えましたw)。

  • ポジジョニングマップ
  • バループロポジションキャンバス
  • リーンダイアグラム
  • 事前期待設計
  • ゴールデンマンダラチャート
  • ビジネスモデルキャンバス

新卒研修でスクラムを1ヶ月やってみた程度の私にはなんのことやらサッパリ...

ただこのようなモノたちがあると分かったので、今後これらの勉強をしていくステージに行かねばと思いました。

要求開発方法論

講演の中で印象深かった「要求開発」という言葉。意図としては、要求はその辺に散らばっているものではなく、作り上げていく必要がある!というものでした。

ユーザーの要求は全て「正しい」ものであるが、ビジネスや経営に繋がる「真の正しい要求」は一部でしか無い。

ユーザビリティーテストをやった時のことを思い出したのですが、その際、テスト結果から考えられる改善案の良し悪しを決めるのにかなり戸惑いました。

このようなときに、いかに "ビジネスや経営につながっているか" を軸にするのは正義なように思います。

100円プロトタイプ

今回のイベントにはワークショップも多くありました。その中で「100円プロトタイプ」というUX/UIまわりのワークショップに参加しました。

世の中にプロトタイピングツールは沢山あれど、紙ベースのプロトタイプ作成は、非常に楽に・早く・触らせながら意見を求めることができると人気です。今回は、付箋を使って画面遷移を表そうというものでした。

実際に渡しが作ったものがこれです。iOS版のヤフー天気アプリの模写(?)です。

f:id:masayuki610930:20151129223331j:plain

色の違う付箋を使ってユーザーのアクション状態を見える化し、またレイヤーを明確に表すことができます。

下記のようなメリットがあると感じました。

  • 見た目で状態がわかりやすい
  • UX/UIの検討の際に色々いじりながら理解を深めていくことができる
  • 汎用性の高いパーツを洗い出せ、実装者もそれを意識してコードに落とし込める

実際に作っている時もたのしく、意外と手早く出来たのでおすすめです!


おわりに

私にとっては少し背伸びした感満載のイベントでした。

ですが、会場で聞いた色々な手法や考え方が当たり前になっている自分を目指します!加えて、今できることは何かを考え、「見える化」もしていきたいと思います!

素敵な場を提供してくださった皆さん、ありがとうございました!!


イベントの関連資料

きっと他にもあるはず...(見つけたら更新します)

「DMM.Study Night フロントエンド勉強会」に行ってきた

「DMM.Study Night フロントエンド勉強会」に行ってきました!

就職で地方から上京してきた私としては、東京での勉強会というのは憧れでした。

インターネットやWebが発展し時間や場所への制限が少なくなってきたとはいえ、こういう機会というのは地方では難しいのが現状だと思っています。このあたりの問題はどうにかなってほしいと思ってますし、どうにかしていかなければと思います。

それはさておき、今回はDMM.comさんが主催する勉強会「DMM.Study Night」。恵比寿ガーデンプレイスタワーにあるDMM.comのオフィスで行われました。

f:id:masayuki610930:20151129215927j:plain

既にこの勉強会を開催しているそうですが、フロントエンドに全面に押し出した勉強会は初めてとのことでした。

4人公演されましたので、それぞれ書き下したメモを載せていきます。


DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話

DMMにおいて、フロントエンドエンジニアという役割が明確になったのは1・2年前とのことであり、フロントエンドエンジニアは何をコントロールすべきかを整理してお話してくださいました。

以下内容。

全体

JSよりもCSSのルールぎめが重要。

下記を使っている。

css

  • Sassを採用
  • 設計はFLOCSSを採用
  • 覚えづらいルールは極力排除
  • 書式はLinterで制御
  • 英名規則はBEM
  • スタイルガイドの導入

Sass

ガッツリやると複雑なので、簡易的に以下に限定した

下記は不採用 - 関数 - mixin/extend - などなど...

FLOCSSという考え方

  • Foundation
  • Layout
  • Object
  • Component
  • Project
  • Utillity

Object以下は、作業者のみが触る範囲。リードエンジニアは全体を触る。

  • Component: パーツは全て個々
  • Utillity: 設計者が用意・作用者は使うだけ
  • Project: パーツとは無関係な独立ページ用

ComponentとUtillityで基本的に全て賄う→スピードの向上

スタイルガイド

  • Gulpを使って.sccsファイルから直接スタイルガイドを自動生成

設計者が管理するために必要なもの

  • CSS import
  • Webpac Entorypoint
  • などなど

フロントエンドエンジニアがいると

  • メンテしやすい
  • パフォーマンス高い
  • バグが出にくい

Developertools表示しておけばネトゲやってても仕事してる感でる

タイトルからネタ的な話をするかとおもいきや、すごくためになる話でした笑。ChromeのDevelopertoolsを使うことはあっても、単純なブレークポイントくらいしか使ってなかったので知れて良かったです。

以下内容。

条件付きブレークポイント

  • ブレークポイントして、右クリックして出てきたボックスにコードを書く
  • 実態は、Ture返したら止まるやつ
  • jQueryも呼べる
  • 非同期通信もちゃんと動く

通信のブレークポイント

  • XHR Brakepoints
  • call stack で一覧見れる
  • 任意の通信を引っ掛けられる
  • ポート番号も指定可能
  • typeがXHRのリソースは右クリックからリプレイできる

計測ツール

  • Networkパネル:コンテンツのダウンロード時間
  • Timelineパネル:ダウンロードやレンダリングの時系列
  • Profilesパネル:CPUの利用料など

通信周りから調べてみる

  • HARファイルを使ってみる
  • Webサイトを解析した結果情報
  • 中身はJson
  • 比較用のツール(HAR viewer)
  • PhantomJSを経由して、自動でとるスクリプトをかける

次にAuditsパネルを見る

  • ネットワーク/ページパフォーマンスの2方向から検査してくれる
  • JSまとめろ
  • gzipで送れ

Chromeオンリーブラウザゲームがマルチブラウザ対応するまで

マルチブラウザ対応が大変とは聞くけど、その内容を初めて聞くことができました。実際には、はじめからChrome向けに書かれたものを後からマルチブラウザ対応にするのは大変だってのが今回の根本なんですが。

以下内容。(気になった言葉だけ抽出)

  • Autoprefixer: CSSのマルチブラウザ対応に使える。ベンダー接頭語を自動付与する。
  • Can I Use: 各ブラウザのCSS対応状況を確認できる
  • pleeease: Gulpのプラグインで、utoplefixに圧縮、メディアクエリーをまとめてくれる

DMMの闇に触れた話

DMMには金沢にも拠点を持っており、そちらで活躍されているフロントエンドエンジニアの方のお話でした。勉強会後の懇親会でもお話したのですが、非常に楽しい面白い方でした。あちらの方で働き口を見つけたいときには、DMMさんにお話を聞きに行こうと思いました。

以下内容。(気になった言葉だけ抽出)

feedly APIを使ってみる

RSSリーダーとして使っているサービス、feedlyAPIを使おうとしたところ意外と引っかかったので、使い方を書き残しておきます。

今日(2015/11/19)時点のAPIV3で確認をしています。

アクセストークンを取得する

Web APIは様々にありますが、企業が公開しているAPIを利用する際は往々にしてアクセストークンというものが必要になります。

各ユーザーに紐付けられた文字列であり、公開元がアクセスの管理・解析をする目的として必要であるという理解を私はしています。

手順は簡単です。

  1. 認証

    https://feedly.com/v3/auth/devにアクセスし、いずれかの方法(すでに自身が使っている認証方法)を選択して認証を行います。

    f:id:masayuki610930:20151119001710p:plain

  2. メッセージの確認

    認証後の画面に記載されている連絡先をチェックします。

    f:id:masayuki610930:20151119002122p:plain

    今回はGoogleで認証を行ったため、自分のアドレス****@google.comのメールをチェックします。

  3. リンクへのアクセス

    メッセージがfeedlyから送られてきているので、記述されているURLに飛ぶと、

    f:id:masayuki610930:20151119002125p:plain

    アクセストークンが表示されています。

    表示欄は小さいですが、横にスクロールされて結構な文字数となります。(今回試したところ242文字ありました。)

使ってみる

curlで問い合わせ結果をGETで取得してみましょう。

問い合わせ形式はこんな感じです。

$ curl -s -H 'Authorization: OAuth [トークン]' [アクセスURL]

取得したトークンを今仮に "MyToken" という文字列、

アクセスURLをhttps://cloud.feedly.com/v3/categoriesとすると、

$ curl -s -H 'Authorization: OAuth MyToken' https://cloud.feedly.com/v3/categories

となります。

アクセスURLは欲しい情報により異なるので、公式ドキュメントを見てみてくささい。

結果はJSONで帰ってくるみたいなので、あとはこれをパースしてうまく活用すればOKです。

curlのオプションである -s と-H はそれぞれ、

-s : 進捗状況やエラーを表示しない

-H : HEADER HTTPヘッダにHEADERを追加もしくは変更する

という意味らしいです。参考

これでとりあえずアクセスが出来るようになりました!

AndroidのMediaRecorderで録画・録音する際はクラス関数の順番に注意を!

Androidで動画の保存(録画)や音声の保存(録音を)する際、MediaRecorderを使用します。

さくっと使えて便利なクラスなのですが、クラス関数の利用順番がしっかりと決められているので、使用例を載せておきます。

一瞬ハマったので。

AndroidのMediaRecorderを使った録画・録音の設定

順番については公式ドキュメントを読めば一発なんですが、録音のあり/なしをif文分岐で2度書くのがめんどくさく感じて、つい何も考えなしにまとめてしまったりするんですよね。

反省。

MaterializeのCharacter Counterの重複解消方法

前回紹介したデザインフレームワークMaterializeの便利機能に、文字数カウントがあります。

サンプルはこんな感じです。

しかし、ドキュメントにしたがってそのまま書くと、下図のようにカウンターが重複してしまいます! f:id:masayuki610930:20150805002709p:plain

修正するのは簡単です!

デザインフレームワークMaterializeのcharacter counterの重複解消

.removeで生成されたelementを消してあげましょう!

たったこれだけで、スッキリ解決です!!