2014年12月5日に行われたCreative Insightsでの発表資料です。 ※本スライド内に含まれているWebサイトやアプリのスクリーンショットは全て著作本の企業に帰属します。Read less
gulpでTypeScriptをコンパイルするプラグインはいくつか種類があるようですが、今のところ自分はgulp-tscとgulp-typescriptの2つを試しながら使っています。 両方使ってみると分かるのですが、利用方法にかなり違いがあるのでお好みに合わせて選ぶと良いのではと思っています。 今回はそんな2つのプラグインの利用方法の違いについて説明します。 と、その前に。 書いている途中で気づいたのですが、今現在のgulp-tscは最新のTypeScriptを利用すると上手く動作しない場合があるようです。 GitHubのIssuesでも報告されていてPull RequestsにPRがたまっているので、これらを参考にしながら自分で修正すれば直るかもしれませんがまだ試せていません。 自分の環境だと/// <reference path="...">の指定がコンパイラに正しく解釈されずにコン
PHPUnitの設定 続いて、PHPUnitからAspectMockを使うための設定をします。まず、backupGlobalsを必ずfalseにします。 phpunit.xml <phpunit bootstrap="bootstrap.php" backupGlobals="false"> そして、tearDown()メソッドで登録したテストダブルを削除するようにします。 TestCase <?php use AspectMock\Test as test; abstract class TestCase extends \PHPUnit_Framework_TestCase { protected function tearDown() { test::clean(); // 登録したテストダブルを削除 } } AspectMockの使い方 それでは、AspectMockの使い方を見て
BrowserStack とは BrowserStack とは、クロスブラウザ(OS含む)による動作確認を手軽に行える環境を提供しているサービスです。 例えば、BrowserStack 側のサーバで起動している各種ブラウザ環境を、こちらのブラウザから利用したりすることができます。 その中に Automate という、コードからその環境を利用できる仕組みがあり、今回はそれを Node.js から使ってみたいと思います。 当記事のゴール Travis CI 上で、 express アプリケーションを起動し、 mocha で書いたテストコードを使い、 BrowserStack Automate 環境で、 テストが出来ること。 BrowserStack アカウントを作成する まずはアカウントの作成が必要になるので、トップページ から道なりに登録してください。 メールアドレスとパスワードだけで登録で
VirtualDOM Advent Calendar 2014 9日目の記事。 segmentio/deku は最近出たばかりのVirtualDOMの実装ライブラリです。 小さくて読みやすく拡張性がある実装を目指していて、既にあるvirtual-domとは別に作り始めたのも微妙にComponent周りの考え方が違うからのようです。 読んだもの: deku 0.0.2 読んだ日付: 2014年12月9日 絶賛実装中な感じなので、これを見たからといってもどうという感じではないと思います。 基本的なVirtual DOMの構造はあるので、そういう意味では読みやすいです。 基本的な使い方 var component = require('segmentio/deku'); // Buttonのcomponentを作る // <button>とonClickした時のイベントがある var Butto
タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI
スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー
諸事情あって、バタバタしているyandoです。 18時過ぎに自分の番である事に気がついてしまいましたが、この記事はCakePHP アドベントカレンダーの9日目です。 CakePHP3で一新されたORMは「結果が配列からオブジェクトになった」というだけではない違いがあります。 それが Eager loading と Lazy loading です。この概念を理解していないとORMの機能を間違って使ってしまうかもしれません。 何が起きるの? N+1問題 ORMからクエリを実行した時にJOINを使ったクエリを実行するか、シンプルなクエリを実行するかのルールが分かりますか? 従来のCakePHPではJOINの条件などに応じて自動的に決定されており、関連データを取得するためのクエリが大量に実行される場合がありました。たとえば画面に表示している20件のデータを取得するクエリを実行し、その後に20件のデ
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd(72種類のレイアウトとチャート) .ai(72種類のレイアウトとチャート) .sketch(72種類のレイアウトとチャート) .png(72種類の各レイアウト) 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
こんにちは。CYBIRDエンジニア Advent Calendar 9日目のgucchonです。 新卒2年目、webエンジニアです。 8日目はkeitarouさんのGitHubをもっと便利にするためのChrome拡張とかでした。 全くGitHub使えてなかったんだな…と身にしみる内容でした。お恥ずかしながら… 本日の内容 「サーバ費、もっと下がらない?」 なかなか聞きたくない言葉ですね。サービスを継続させていく上では当然コスト面をしっかり考えて運用をしていかなくてはいけないのですが、まぁ正直めんd...少しばかり手間です。ただ、AWSならある程度簡単にコスト管理ができて、対応策も用意されているので助かりますね。それでも誰もやりたがらないけど(ボソッ ということで、コストを下げろと言われてしまったとき、CYBIRDのコストカッター、gucchonがまずやっていることをご紹介したいと思います
ここ数ヶ月にわたって、WebPayはAPIのエラーにまつわる変更を少しずつ行ってきました。 それに付随してドキュメントも拡張しましたが、変更の背景について十分に説明できていない部分がありました。 この記事では、最近のエラーに関連した変更の背景を紹介し、今後どのようにエラーをハンドルすべきか説明します。 記事の内容は執筆時点のものであり、今後同じようにエラーやAPIの変更を行うことがあります。 変更があっても記事の内容はその時点の内容を保持し、ウェブサイトのドキュメントのみ更新します。 必ずウェブサイトのドキュメントを合わせて参照し、手元で動作確認を行ってください。 エラーはなぜ起きるのか WebPayのAPIは、リクエストされた操作ができなかったときにエラーを返すように設計しています。 可能なかぎりエラーにならないような設計、実装を心がけていますが、エラーは絶対に避けられません。 例えば、
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年12月19日 サウナで整ったけど危険性も感じた サウナで整う状態を初体験したけど、体験してみてこれは身体にとって危ないやつだと思った。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く