こんにちは！おおはしりきたけです。今回も突撃！隣の開発環境というタイトルでイケてる開発会社さんの開発環境についてインタビューさせてもらいました。第2弾として、実名グルメサービスで今凄く勢いのあるRettyさんに訪問させてもらいました。インタビューに答えていただいたのはCTOの樽石さん、iOSエンジニアの櫻井さん、Androidエンジニアの新井さん、インフラエンジニアの梅田さんです。 突撃！隣の開発環境とは 前回も書きましたが、技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良いチーム、良いプロダクトを作っていくという志の会社さんの為の情報共有のための企画になります。開発環境や開

Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge

1.     ビジネスモデルとは 1.1.    最初はアイデアから始まる ほとんどのサービスやプロダクトはふわっとしたアイデアから始まります。もし◯◯◯◯を使って△△△△を作って提供したら喜んでもらえるのではないか？　こういったアイデアをシーズと言います。ビジネスに限らずたいていの物事において着想時点は楽しいものです。しかし、それを現実世界に適用させていこうとした途端に痛みが発生します。 ふわっとしたアイデアの段階では、だいたい、なんとなく良いアイデアが浮かんだ気がするもので、「いいもの作れば買ってもらえるだろう」は楽観的に考えていることが往々にあります。では、この「買ってもらえるだろう」は「誰に？」「いくらで？」「なんで？」「買ってもらえる」のでしょうか。そもそも、作ろうとするいいものは「どうやって知られる」のでしょうか。そして、いいものは「誰に」どういった「価値」を提供するのでしょう

SIL Open Font License (OFL) 参考URL : SIL Open Font License (SILオープンフォントライセンス) CC BY 参考URL : 表示 3.0 非移植 (CC BY 3.0)ク CC BY-SA 参考URL : Creative Commons — 表示 - 継承 3.0 非移植 MIT 参考URL : MIT License - ウィキペディア BSD 参考URL : BSDライセンス - ウィキペディア Webフォントアイコンを選んでみる。 http://fontello.com/ それでは、実際に上記サイトへアクセスして使用してみたいと思います。 サイトへ行くと沢山のWebフォントアイコンが用意されています。 Webフォントアイコンの選択 今回は、Webフォントアイコンで有名なFont Awesomeを使ってみたいと思います。 Fo

AngularJSをはじめよう ここにあるように、最近はWebアプリを作成する際にJavaScriptのフレームワークを使用するのが当たり前といっていいくらい、 さまざまなフレームワークが存在します。 弊社ブログでもember.jsの記事等、JavaScriptのいろいろなライブラリ・フレームワークを紹介していますが、 私が近頃AngularJSを使用する機会があり、とても使いやすかったので、改めてここで紹介しようと思います。 AngularJSとは もう一度「AngularJSとはなにか」という部分を簡単におさらいを。 AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVWフレームワークです。 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 近年複雑化するWebアプ

みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W

こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具

なぜ議事録が必要なのか 「プログラマ、半年経ったら自分も他人」という格言？があります。コードを書いたのが自分だとしても、半年も経ったら何でそのような処理を書いたのかは自分ですらもわからなくなることを指していて、コメントの重要性を認識するための言葉です。 プロジェクトについてもまったく同様で、むしろ情報の風化速度はプログラミングよりも早いものです。プロジェクト中における「言った、言わない」問題しかり、そもそも一つのプロジェクトに関わるステークホルダーの数を考えたら誤解が生じる要素はそこかしこにあります。その誤解から生じるトラブルを可能な限り防ぐ必要があります。 また情報伝達を可能な限り効率的に行う必要もあります。前エントリーに貼ったスライドにも記述しましたが、コミュニケーション自体は何も生産しません。コミュニケーションはプロジェクトを成功させるための手段であり、なるべくなら時間を節約してその

Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試

ご挨拶 はじめまして、今回初めてブログ書くとくがみあけりです。 3本書くと弊社会長からカレーをごちそうしてもらえるということでブログを書くことにしました。 AWS Elastic Beanstalk?? みなさん、AWS ElasticBeanstalkは使ってますか？ データベースサーバであれば、EC2にMySQLをインストールして運用するよりもRDSを選択する人は沢山見かけますが、 EC2にApacheをインストールして運用しないで、ElasticBeanstalkを選択している人はそこまで多くないんじゃないかと思います。 おそらくですが、PHP,Rubyの対応が最近だったことと、使い方がよくわからないのが原因ではないでしょうか。 そこで今回はWordPressの環境を構築してみて、簡単に使えてメンテナンスが楽になることを確かめたいと思います。 次回はカスタムAMIを使ってEC-CUB

第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の

Sublime text 2で使ってみる 最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。 それでは早速CSScombのプラグイン（パッケージ）をインストールしてみましょう。 Sublime text 2の詳しい説明は下記をご参照ください。 【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 CSScombプラグインのインストール Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます ショートカットは「Ctrl+Shift+p」です。 次に、「Pakege Control: Install Pakage」を実行し、インスールしたいプラグインを探します。 CSScombと入力すると該当

はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp

DevelopersIOは、AWS、iOS/Androidアプリ、ビッグデータ、Alexa等の最新技術情報からリモートワークや働き方に関する記事まで多彩なトピックを紹介するクラスメソッドのオウンドメディアです。