快適なUXの裏には泥臭さがあった？ 新サービス開発に「React×Next.js×AMP」採用のワケ
2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP（Accelerated Mobile Pages）である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。 React×Next.js×AMP――この組み合わせを採用した背景 「ホットペッパービューテ
Gunosyの松本勇気氏が明かす「Under30エンジニアの生存戦略」とは
3月11日、「Under30 エンジニアによる Under30 エンジニアのための技術カンファレンス」として、サイバーエージェント主催の「Battle Conference U30」が開催された。基調講演には株式会社Gunosyの執行役員である松本勇気氏が登壇し、「自分の目的に合致した努力と成果、評価をどう考えるかが重要になる」という松本氏の考えと、それを踏まえて実際に築いてきたキャリアが語られた。 株式会社Gunosy 開発本部 新規事情開発室 執行役員 松本勇気氏 エンジニアリング経験ゼロからのスタート 「今日はGo言語やDockerといった技術の話ではなく、今に至るまでに考えてきたことを紹介するので、Under30エンジニアが生き残っていくための参考になれば、と思う」 松本氏は冒頭にこう述べ、基調講演が始まった。CtoCコマースの横断検索サービスをはじめとする、新規事業開発全般のマネ
ハイパフォーマンスなWebを実現するasm.js／WebAssemblyとは――Mozillaのルーク・ワグナー氏に聞く
Mozilla主催のフロントエンド開発者のためのカンファレンス「ViewSource Conference」が、北米・オレゴン州ポートランドにて11月2～4日に開催された。セッションのみならず、次世代Webに関するディスカッションも実施された。WebAssemblyの開発を担当し、ディスカッションのホストを務めたMozillaのルーク・ワグナー氏に、WebAssemblyやasm.jsの開発の目的について聞いた。 聞き手：近藤佑子（編集部）、矢倉眞隆氏 協力：清水智公氏（Mozilla Japan）、浅井智也氏（同） ルーク・ワグナー（Luke Wagner）氏 WebAssemblyに関するディスカッション情報「Discussion: WebAssembly」 ルーク・ワグナー氏のブログ パフォーマンス向上の他、JavaScriptでできない機能を実現するWebAssembly ――ルー
モバイル向けシングルページアプリに最適！ 軽量JSフレームワーク【Mithril】 - 基礎編
<!DOCTYPE html> <html dir="ltr" prefix="fb: http://www.facebook.com/2008/fbml"> <head> <meta charset="UTF-8"> <script src="mithril.js"></script> </head> <body> <div id="contents"></div> <script> /* * Modelを定義 * ページ内の文言データを管理 */ var PageModel = function() { this.data = m.prop({}); this.fetch = function(){ var that = this; m.request({method: "GET", url: "page.json"}).then(function(resp){ that.data(r
SwiftでアプリのUIと画面の操作を実装する
はじめに 前回までにiOSアプリ開発における画面の位置関係とコンテンツの配置について説明しました。連載第5回では、アプリの画面にUI部品を配置する方法／それらの操作時の処理について説明します。 対象読者をObjective-Cが分かる方としている関係上、Objective-C自体の言語仕様やXcodeの使い方については解説を割愛する場合があることをご了承ください。同様にSwift自体の説明も必ずしも十分でない場合があります。そのような場合は末尾の参考文献等を参照してください。 対象読者 本記事は、次の方を対象にしています。 Objective-Cの基本的なプログラムが出来る方 Xcodeを使える方 UI部品の利用 iOSアプリでは、ボタンや入力欄といった何らかの操作を行うためのUIは、各部品単位でクラスが用意されています。クラス内には、該当するUIの動作時やデータのセット後の動きを制御する
【デブサミ2014】13-B-7 レポート 「何故クックパッドのサービス開発は日々進化しているのか」
冒頭、庄司氏は「クックパッドの印象としては、レシピのサービスが一番強いと思いますが、これ以外のサービス、新規事業にも力を入れています」とした上で「cookpad.comに関する話をします」と切り出してセッションを始めました。 まず、Ruby 2.0/Rails 3.2による環境構成を説明し、「このボリューム、正直狂っているんじゃないかな。数か月間でこれだけ増えてるんです。……あの、ここ笑うところですよ？」と独特の語り口でセッションを進めていきます。 サービスの成長と安定性を両立させる3チーム制 しかし、上図のような成長ペースにもかかわらず、デプロイは1日10回ペースを維持している。一体どうやって、これほどの安定リリースを実現しているのでしょうか？ 庄司氏はこの点について、エンジニアで構成されている『サービス開発部』『インフラ部』『技術部』の存在を挙げました。 サービス開発部隊がサービス開発
JavaScriptのテストコードをNode.js＋Jasmineで実行してみよう
対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 Jasmineとは Jasmineとは、JavaScriptのテスティングフレームワークです。Mochaなどのテスティングフレームワークとは違い、値を評価するためのアサーションモジュールも内包されています。また、CoffeeScriptでの記述も可能です。 Jasmineは振る舞い駆動（BDD）の形式でテストを記述します。BDDは、作成する機能に期待する「振る舞い」を文章で記述していきます。言い換えると、顧客が望んでいるであろう「要求仕様」に近い形でテストを表現しながら、テストと実装を記述していく手法です。 リスト01は、Jasmineで記述した基本的なテストコードです。このコードを文章として日本語に直訳すると「【処理結果】が【期待する値】と同じでないと予測（expect）する」です。
「Selenium2」テスト徹底活用！ Jenkinsによる自動実行とSelenium Grid2による複数環境でのテスト
本シリーズは、WebブラウザをUIとして利用した業務システムやアプリケーション（以下、Webシステム、Webアプリケーション）のテストをテーマとして、Webブラウザを使ったテストを自動化するOSSのツール「Selenium2」を紹介します。業務システム開発の現場で適用してきたノウハウを元に、これまでSelenium2について知らなかった人から以前使った経験がある人まで、より実践的な「使える」内容を盛り込んでいきたいと思います。 1. はじめに 今回は、Selenium2を利用して作成した自動テストをフル活用すべく、JenkinsというCI（継続的インテグレーション）ツールを利用して、Selenium2のテストを自動実行する方法について説明します。また、IE、Firefox、Chrome、Safariなど多様化するブラウジング環境でのテスト方法やテストの並列化についても説明します。 2. J
「Eclipse＋PDT」でPHP開発 ～環境構築と使用方法
はじめに PHPは、企業から個人まで、幅広い用途に利用され、Webシステムを構築するうえで無くてはならない存在となっています。昨今の経済状況から、Java一辺倒の大企業や大手SIerもPHPによる開発にシフトしてきています。 PHPは、手軽に始められるハードルの低さが魅力の言語です。HTMLと混在して、シンプルに使用するもよし、大規模なWebサービスに向けて本格的なシステム構築も可能です。 開発者の裾野が広いのと同様にコーディングツールの利用状況にも大きな差があるようです。シンプルなテキストエディタを使用する強者から有償ツールを使用する合理主義まで千差万別です。 今回紹介するEclipse＋PDTは、その中間に位置する開発ツールと言えます。テキストエディタよりは、はるかに高機能です。有償ツールよりは、低機能ですが低コストです。このような素晴らしいツールが簡単に手に入れられるのですが、まだ使
プロトタイプ（prototype）によるJavaScriptのオブジェクト指向
はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaやC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をして
PHPで行う動画変換（前編）
はじめに オープンソースの動画変換ソフトフェアの一つにffmpegがあります。ffmpegはさまざまな形式の動画、音声データの変換に対応していて、コマンドラインから操作でき、PHPやJavaなどで作成したアプリケーション内から呼び出すこともできます。 ffmpegの機能の一部をPHPで使えるようにしたエクステンションにphp-ffmpegがあります。php-ffmpegを利用するとPHP内でffmpegの機能を容易に呼び出せます。またphp-ffmpegとは別にPHPのみでffmpegの機能を使えるライブラリ FFMPEG-PHP Classが公開されています。 本記事ではphp-ffmpeg、FFMPEG-PHP Classを使用して動画のプロパティ取得、flv（注1）への動画変換、Youtubeから動画をダウンロードして3gp（注2）への動画変換を実装する方法を2回にわたって説明します
PDOでサクサクDB開発
はじめに PHP界隈では現在、PHP 4からPHP 5への移行が進んできており、ここ最近ではPHP 5の機能を活用したフレームワークも多く出てくるようになりました。 PHP 5は、PHP 4に比べオブジェクト指向のサポートや速度面での向上などが取り上げられる中、最も注目すべき点であるデータベースへのアクセスを抽象化したレイヤーとしてPDOが登場しました。 今回はそのPDOに注目し、サンプルを交えてPDOの使い方を紹介します。 対象読者 PHP 5を使ったことがある方 以前PEAR::DBなどを用いてデータベースを使ったアプリケーションを作成したことのある方 必要な環境 PDOはPHP 5.1から標準で導入されるようになりました。Windows/UNIXを問わず利用することができます。よってPHP 5.1の環境と、PDOの動作に必要なデータベースの構築を行ってください。 PDOとは PDO（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Groovy+GrailsでRailsなWeb開発一覧
C#たんと学ぶ わりと硬派なソフトウェア開発講座 番外編「Windows Phone 7」
変数の扱い方を習得しよう！ プログラミング未経験から始めるPHP入門（3）