ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ID連携担当のくら（@kura_lab）です。 みなさんはYahoo! JAPANのWeb APIや認証、エンドユーザーの属性取得APIを実装したことがありますか。これらを利用するためにはYahoo! ID連携を用いてアクセストークンの取得やログインの実装が必要になります。単にアクセストークンの取得、ログインの実装といってもWebアプリ、ネイティブアプリにおいていろいろなパターンがあります。 SDKを用いる場合ほとんど意識せずに実装もできますが、提供するサービスのUXやシステムの環境に合わせてより最適な実装をするためには、それぞれの特徴を理解し適切なパターンを選択する必要があります。 Yahoo! ID連携はOAuth

11月に入った後に「10月までで退職ってことにしてもらっていいかな」と言われたのが12年前のちょうど今頃でした。 今考えると、いや考えなくても結構ひどいっすね。 そんな流れでフリーランスになって丸っと12年たったわたしですが、今回13年目を迎えるにあたって一つ大きな転機もついでに迎えることとなりました。 続きを読む フリーランス13年目が会社員をはじめる理由

AppStoreとGooglePlayの両プラットフォームに選ばれたBrainWarsが実践するプラットフォームに合わせたUI/UX最適化のノウハウを紹介します。Read less

ここ2年くらい、特に今年(2014年)は「UX」と「組織」が併記されることが多くなってきた。おそらく「UXに取り組む人が変わった」、「UXに取り組んできた人達のステージが変わった」、「UXに取り組む際の対象が変わった」のAND/ORだと思っている。 UX に真面目に取り組める組織づくりについてのスライドを公開しました (2012年12月) 長谷川敦士氏「単なる利用者のニーズではなく、何に価値を感じるのか本質的に捉えて、そこに向かうことがUXの肝」  (2013年3月) 「Lean UXとは組織文化をデザインすること」監訳者が明かす、UXデザインの本質 (2014年3月) 「UXと組織デザイン」について考える。HCD-Netサロン レポート  (2014年9月) UXデザインのための、ポストデザイン思考 (2014年12月) UXデザインとは、組織論である (2014年12月) 組織の中で実

Bootstrapの登場以降、管理画面テンプレートと言った類のものが数多く登場しています。Bootstrapをサービスにそのまま組み込むのには躊躇してしまっても、運営者側の管理画面であれば十分すぎる品質と言えます。 今回紹介するFlakesもその一つですが、管理画面のUIに特化したテンプレートであるというのが特徴的です。 Flakesの使い方 Flakesは管理画面特化型とあって、管理画面上で必要そうな機能が揃っています。 Flakesはダッシュボード的な機能からデータメンテナンスまで幅広い管理画面テンプレートとなっています。カラーリングも最近のフラット系にあるほどカラフルではなく落ち着いた雰囲気なのが良いですね。 FlakesはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Flakes • An Admin UI & Template

PHP AdventCalendar 16日目を担当する@syossan27です！ 今回はコードのアレコレを探知してくれるPHPMDの記事をお送りします。 PHPMDって？ PHPMDは正式名称をPHP Mess Detectorと言い、直訳するとPHP混乱探知機というそのまんまな名前です。 本当に読んで字のごとくなんですが、PHPの混乱している部分を探知してくれます！ PHPMDには次の４つを静的解析する機能があります。 潜在バグ 次善コード 複雑過ぎる問題 未使用のパラメータ、メソッド、プロパティ 特に嬉しいのは潜在バグを発見してくれる機能ですね！ どこまでの精度があるのかは謎ですが・・・ インストール それではインストールしていきます！ やり方はちょー簡単。 composerでチョチョイのチョイです！

大好きな自転車で、大好きなすた丼を食べに行くのが喜びのサーバーサイドエンジニア、きんです。前職ではWindowsでJavaを書いていましたが、今後MacでPHPを書いていくことになりました。 ビットエーのエンジニアはWindowsで開発している人が多いので、備忘録としてMacでの方法をまとめてみました。 概要PHP、MySQL、Apache の環境設定を管理された形でやるのは少し考えないと面倒です。Macには PHP と Apache がデフォルトでインストールされているので、かえってややこしくなっています。ざっとこんな方法があるのではないでしょうか。 XAMPP、MAMPなどの専用アプリケーションを利用するMySQLだけをインストールし、OSに入っているApache、PHPを利用するHomebrewで他のプログラムと一緒にPHP、MySQLも管理するphpenv、phpbrew を利用す

PHPはいかにして拡張されるか PHPは従来、C言語で書かれたExtensionによって拡張されて来ました。 しかしPHPの開発者にとってCのハードルは高く、またCの開発者も明示的なメモリ管理に難儀してきました。 それを解決するのがZephirというPHP Extension開発専用の言語です。 PHPを拡張する言語、Zephirとは http://zephir-lang.com/ Zephir(Zend Engine PHP Intermediate)は現在、Phalcon開発チームが並行して開発を進めている静的／動的言語です。 静的に変数型を宣言するのが標準的な記法ですが、型推論の機能を利用することも可能です。 2014年12月末現在での最新バージョンは0.5.7で、安定版に達していないものの、既に実用レベルのExtensionをPHPとほぼ変わらぬ記法で開発できるようになっています。

こんにちは！エンジニアの内藤 (@kakipo) です。 ディレクター 1 名、デザイナー 1 名、エンジニア 1 名の小さなチームでYknot（ワイノット）というサービスの開発、運用を行っています。 この記事では Yknot（ワイノット）で利用している技術やサービスについてお話いたします。 前半は技術的な内容を中心に、後半は運用が楽しくなる便利なサービスをご紹介いたします。 基本に忠実に、そして良い外部サービスは積極的に利用することを心がけています。 小規模チーム開発におけるシステム構成の参考になれば幸いです。 はじめに: Yknot（ワイノット）とは 企業向けサービスのクチコミサイトです。 食べログの BtoB サービス版です。 「今年はやたらと Slack っていうチャットの記事を目にしたけど、実際どうなんだろ。」 「サーバ監視のサービスって色々あるみたいだけど、なにがいいんだろう。

依存ライブラリを利用する場合RubyGemsやらCocoaPodsといったツールで万事解決するケースがほとんどだと思いますが、たまーにGitに上がっているライブラリを直接自分のリポジトリに追加しないといけない場合もあったりします。 こういった時に使うGitのサブコマンドそれぞれの特徴と使いどころをまとめてみました。 一番スタンダードな外部リポジトリ追加方法です。たぶん大抵の依存管理ではこれを使えば十分でしょう。git-submoduleを利用すると、外部リポジトリのコード自体は自プロジェクトの管理下に取り込まれず、リポジトリの特定コミットへの参照情報のみが登録されます。外部リポジトリのcommit hashへのポインタが追加されるようなイメージです。 $ git submodule add git@github.com:Alamofire/Alamofire.git $ git diff

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

Dribbbleで見かけたのを中心に、全体的なデザインや各要素の配置レイアウトなど参考にさせてもらおうと思いメモしていた管理画面・ダッシュボードのデザインが溜まってきたので、自分の整理も兼ねてまとめました。 管理画面やダッシュボードで重要なのは見易さや操作性の高さだと思いますが、デザインにもこだわりたいという場合にいろいろ参考になります。 紹介している中にはデザインをPSDなどの形式でデザイン素材としてダウンロードすることができるものもいくつかあり、ただデザインを見るだけでなく実際にどのようなレイヤースタイルで作成されているかを見たり、それらをベースに自分好みの見栄えに変更することも可能です。 紹介しているデザインでダウンロードできるものを使用する際は、ライセンス等は各自で再度確認してください。

今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

はじめに 今朝話題になっていたWeb Componentsの基本的な使い方・まとめ に触発されてみる。 すごい…！私にはこんな緻密な資料は書けないorz だけど何か書きたい。書くぞ。 そろそろWeb Componentsしたい Web開発に革命をもたらすと噂のWeb Componentsだが、そろそろプロダクションへの導入を検討したい。 2014年12月現在、Chrome 36+で全機能が使えるので、デモ画面や開発（テスト）ツールでは既にPolyfillなしで色々出来る。積極的に遊んでみたい。 とはいえ、現状と言えばWeb Componentsに関する情報は紹介記事がほとんどで、あまりプラクティカルな領域に踏み込めていない感がある。まあそんなものは実際に使い始めればわんさか出るので、別にその時になってからでも良いのだが、せっかくなので戦略の一つや二つ練っておきたい。 もうひとつ、Googl

PHP5.4以降では、 array()を [](short array syntax)短縮構文で書くことができるようになりました。コードの中に存在している array()を []に置換する方法をメモしておきます。 PHP5.4に移行していく中で起こりうる array()と []が混在してて気持ち悪い！という状況等を解消するのに一役買ってくれることでしょう。 ちなみに []記号は、角括弧やブラケット (bracket)等と呼ばれます。 環境以下の環境で確認をしました。 当然ながら、PHP5.4以降がインストールされている必要があります。 ソフトウェアバージョン

この記事は、ドリコム Advent Calendar 2014 - Adventar の22日目の記事です。 21日目は、ウッチーことtakao.uchikawaさんによる、「スマートフォンでの脱出ゲームの作り方」です。 自己紹介 シモーネと呼ばれています。 PHPとかJavaとかPerlとかで、ポータルサイトとか作ってました。 ドリコム来てからはRuby書いてましたが、今はPMやってます。 最近は、たまにサーバー入って、ちょっとコマンド叩く位。 ドリコム釣り部 裏部長やってます。 エリアトラウト、ヘラブナ、シーバス、投げ、ジギング、キャスティングなど、いろいろやってみて釣りを楽しんでます。 書くこと アプリリリース時の負荷対策を、忘れっぽい自分の為に、覚えている範囲でまとめてみます。 余談ですが、同じリリース時の負荷対策として、釣った魚を写真撮ってからリリースする場合の、魚への負荷対策方

今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe

Kibana 4のプラグインをつくってみよう を書いたときに、Kibanaのソースコードを読んでいて発見したことについて紹介してみたいと思います。 Kibanaの構成 https://github.com/elasticsearch/kibana 規模 ソースコードはだいたい24,000行くらい。 各モジュールの数は次の通り。ディレクティブが多いのが目立ちます。 directive: 56 controller: 9 filter: 10 factory: 9 service: 20 provider: 0 value: 0 constant: 10 ディレクトリ構成 ディレクトリ構成はこんな感じです。 いま一番気に入っているAngularJSのプロジェクト構成 で紹介されている、folders-by-typeに近いでしょうか。 でもcomponentsの下は、機能毎にディレクトリが切られ