ローカルに自分だけが使える Firebase を起動して、チームメンバーに影響を与えず色々と実験したい場合はありませんか？すでにそういった環境を用意している人でも、エミュレーターを起動するたびにデータを入れ直すことを煩わしく思ってる人もいるのではないでしょうか？本記事では、Firebase をローカルで使うためのエミュレーターの起動方法から、エミュレーターへのシードデータのインポート方法や、終了後のデータの永続化方法を解説します。

iOS の UI は細かいインタラクションが作り込まれていて、使っていて快適です。例えば、iOS のポップオーバーメニューは、タップではなく長押しでもポップオーバーを開くことができ、そのまま指を離さずにメニュー項目に指を動かせば、その項目を選択することができます。以下のデモはその挙動を再現したものです。また、一部のアプリでは、メニュー項目を選択できる領域が拡大されていることがあり、項目に指が触れていなくても選択できるものもあります。例えば、以下のデモはポップオーバーで絵文字を選択できますが、指を絵文字の上まで動かさなくても、少し下に指を動かすだけで選択できます。これによって、指で選択したい項目が隠れるのを防げます。この記事では Vue.js を使って、上記のような長押しドラッグによるポップオーバーのメニュー選択インタラクションの実装方法を、実際のコードを交えながら解説します。

「難しいことはよくわからないからとりあえずいい感じにアニメーションしてほしい！」前回、前々回の記事を読んだ方の中にはそう思った人がいるかもしれません。今まで CSS に数式を書いてアニメーションさせる方法や、iOS で使われているスプリングアニメーションを CSS で実装する方法を紹介しましたが、しっかりと理解をして実装をするにはハードルが高かったように思います。今回は、それらの実装を簡単にできる JavaScript ライブラリ CSS Spring Animation を紹介します。前回、前々回の記事は以下のリンクから読めます。CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書くiOS のスプリングを CSS 数式アニメーションで再現する

「こういうアニメーションを作ってると未来予知したくなるんですよね」9月30日の複雑 GUI 会に参加した時に、「iOS のラバーバンドスクロールを Web で実装する方法」のラバーバンド実装を見せた時にこんな事を言いました。物理演算を取り入れたアニメーションはフレームごとに次の位置を計算するため、例えば1秒後にどこにいるのかを事前に知ることはできないので、数式を使って計算したくなるという話でした。この話をしたら、参加者の方に WWDC 2023 で発表された Animate with springs を教えていただきました。iOS では、従来物理演算で行われていたスプリングアニメーション（Spring Animation）を数式で表現していることが解説されていて、実際の数式も紹介されており、とても興味深いものでした。数式によるスプリングアニメーションの実装を Web に持ってこれたらおもしろいのではないかと思い、何度も動画を視聴し、数式の理解を試みました。ある程度 Web で動かせるようになるまで理解が進んだので、本記事ではその数式の解説と、簡単な実装の紹介をします。

cubic-bezier() をやめてこれからは数式で CSS アニメーションを書いていこうと思います。cubic-bezier() には簡単にアニメーションのイージングを書けるというメリットがありますが、凝ったことをしようとすると表現力が足りない問題に直面します。例えば、ユーザーが直前に行った操作に応じてアニメーションに初速をかけたい時、CSS アニメーションでやるのは難しいので、JavaScript で実装するというのが一般的です。しかし、最近の CSS では、アニメーションさせたいプロパティに数式を記述することで、初速を考慮したイージングを実現できます。以下のデモは初速を考慮した CSS アニメーションの実装です。（記事執筆時点で Firefox に未実装の機能を使用しているので、Firefox 以外のブラウザーで見てください）これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。iOS のスプリングを CSS 数式アニメーションで再現するこの記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。

iOS の Twitter（現X）クライアントに Tweetbot というアプリがありました。全 Twitter クライアントの中でインタラクションの出来が群を抜いており、筆者はこのアプリのインタラクションが気持ち良くて愛用していました。筆者が Tweetbot のインタラクションの中で最も好きなのが、ツイートの画像タップで拡大表示した後、その画像をドラッグすることで、カードのように画面外に飛ばし、拡大表示を閉じれるというものです。そのカード飛ばしインタラクションを再現したものが以下のデモです。このインタラクションの気持ち良さは、ただ画像が飛んでいくだけでなく、ドラッグに合わせて自然に画像が回転し、ドラッグ後もくるくると回転しながら飛んでいくところにあります。実装も興味深く、高校数学や物理で学んだことを組み合わせる必要があります。本記事では、この Tweetbot のカード飛ばしインタラクションの実装について解説します。高校までの数学や物理の話が出てきますが、なるべく図を使い、平易な解説を行います。また、本記事の最後に、このインタラクションの HTML、CSS、JavaScript コードの全体を掲載しています。

以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。

window.prompt は JavaScript を一行書くだけでユーザーのテキスト入力を取得できる優れた API です。以下のように window.prompt を呼ぶだけで入力フォーム付きのダイアログが開き、戻り値でユーザーが入力した文字列を取得できます。<script setup>import { ref } from 'vue'const list = ref([])function onAdd() { const input = window.prompt('追加する文字列を入力してください') if (input) { list.value.push(input) }}</script><template> <button type="button" @click="onAdd">追加</button> <ul> <li v-for="(item, i) in list" :key="i">{{ item }}</li> </ul></template>しかし、実際のアプリケーションでは独自ダイアログを実装することがほとんどです。window.prompt によって開かれるダイアログは、デザインや機能をカスタマイズできないためです。独自ダイアログが window.prompt と同様の使い勝手であれば良いのですが、大抵の実装には以降の節で解説する問題点があります。本記事では、Vue.js で独自ダイアログを実装する例を通して、その実装によくある問題点を解説し、どうすれば window.prompt のようなシンプルなインターフェースの実装ができるかを解説します。

<dialog> 要素が主要なブラウザすべてに実装され、現実的に使えるようになってきましたが、これをそのまま実際の Web アプリで使うには様々なものが足りません。足りないものを自分で実装していくと、分かりづらい挙動があったり、癖のある実装が必要なことがあります。例えば、<dialog> 要素のデフォルトは中央揃えで、コンテンツに合わせたサイズになりますが、これの位置、サイズ調整やアニメーションをする際に落とし穴があります。本記事では、以下のアクションシートのようなモーダルを実装する例を通して、<dialog> 要素を使う時の3つの落とし穴を紹介します。

アニメーションを実装した時、そのアニメーションを観察してどこか違和感を感じた経験はありませんか？例えば、以下のデモは項目の追加時には高さが 0 から伸び、削除時には縮むアニメーションをしますが、これに違和感を感じる人もいるかもしれません。このような場合、アニメーションの動きが速くて目立たない部分に、意図とは違う挙動、つまりバグが隠れている時があります。本記事では、こういったアニメーションのバグを見つけるデバッグの仕方や、デバッグを簡単にする実装パターンを紹介します。

「今日リリースの機能ですが、マージ前に軽くレビューしてもらえますか？」同僚にそう言われてプルリクエストを見ると1000行以上の差分がある。たしかにこの機能は大きく、開発の完了まで本番環境にリリースしてしまわないようにブランチを分けていたのだが、そうは言っても差分が大きすぎてレビューが大変そうだ。リリースまでの時間もないし、軽く動作チェックをして、問題がないことを祈ろう……チーム開発でレビュワーの経験がある人なら、このような状況に覚えがある人もいるでしょう。しかもこういうのは大抵タイムリミットが短く、最終的には時間がないので問題が起きないことを祈りながら Approve するのです。検証やテストが不十分なまま、問題が起きないことを祈りながら本番環境にデプロイすることを俗にお祈りデプロイと呼ぶこともありますが、これはできたら避けるべきです。筆者はこれに対処するため、フィーチャーフラグを用いた開発を数年間試したところ、開発体験が良くなった感触を得ています。この記事ではフィーチャーフラグの解説を交え、筆者が実際に試した開発方法を紹介します。

リッチなアプリを開発していると、Undo（元に戻す） 機能を自分で実装する必要が出てきます。canvas を使った図形の描画などはブラウザデフォルトの Undo 機能が使えず、自分で実装しなければならない代表例です。Undo の実装にはパターンがあり、それを理解することで様々なアプリへの Undo の実装がしやすくなります。この記事では、JavaScript による簡単なデザインツールのデモを通して、Undo の実装パターンと、具体的な実装例を解説します。

普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか？その挙動をどう実装するか考えたことはありますか？この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。本記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。

以前は Web で実装するのが難しくてモバイルアプリで実装するしかない UI がありました。その一つがバーチャルキーボードの上に要素を張り付けて配置する UI です。LINE のような画面下に入力フォームがあるチャットアプリはそのような UI の代表例です。2023年7月現在は主要なブラウザに Visual Viewport API が実装され、バーチャルキーボードの高さを計算し、それを利用した要素の配置が容易です。この記事では Visual Viewport API を使ってスクロールや拡大率によらずバーチャルキーボードの上に要素を張り付ける方法を解説し、この API の前提知識となる Visual Viewport と Layout Viewport について解説します。

「これを computed のかわりに使うとパフォーマンスが良くなる」先日 computedEager というユーティリティが使われているのを見て、使っている理由を聞いたらこういった答えをいただきました。たしかに computedEager でパフォーマンスを改善できる場合がありますが、使い方を間違えると逆に悪化させてしまう可能性もあります。この記事では computedEager の仕組みを深掘りしていき、どのような使い方が有効なのかを解説します。

アニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。

Vue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。そしてこの課題は Vetur の最新版で解決されました。

GitHub の Issue ラベルなど、任意の色の中に文字を入れたい場合があります。このとき文字色が一色のみだと、背景色と似たような色のときに読みづらくなってしまいます。以下のスクショでわかるように、GitHub は背景色によって文字色を黒か白のどちらにするかを計算しているようです。個々のサービスの実装についてはわかりませんが、WCAG (Web Content Accessibility Guidelines) で定義されているコントラスト比を使うことで、背景色に対して読みやすい文字色を選択することができます。

最近 GraphQL を使うことがあり、いろいろ調べたりしていることをメモしておきます。自分が必要なものしかまとめてないので情報には偏りがあります (具体的には Apollo、TypeScript や Ruby あたりに偏ってます)。GraphQL / Apollo まわりのテストの話は別の記事で詳しく書くかもしれないです。

Nuxt.js という Vue.js で SSR をするアプリケーションが簡単に書けるフレームワークがあります。Nuxt.js は SSR だけでなく、webpack の設定やディレクトリ構造なども最初から決められており、規約がすでに存在することによる開発の効率化の面においても注目されています。個人的に Nuxt.js で便利だと感じている機能にルーティングの自動解決とレイアウト機能があります。通常の Vue Router を使ったアプリではルーティングの設定は自分で書く必要がありますが、Nuxt.js では pages/ ディレクトリ以下の構造から自動的にルーティングの設定を生成してくれます。また、Rails のレイアウトのように、各ページごとにレイアウトファイルを指定することができます。これらの機能に慣れてしまうと、Nuxt.js を使っていないプロジェクトにおいて自分でルーティングの設定を書くのがとても面倒になってきたので、Nuxt.js じゃなくてもいい感じにする Vue CLI プラグインを書きました。vue-cli-plugin-auto-routingまた、vue-cli-plugin-auto-routing は独立したパッケージを組み合わせているので Vue CLI プラグインを使えない環境の場合は以下の2つを直接使うと良いです。vue-auto-routing: ルーティングの設定をディレクトリ構造から生成する webpack プラグイン vue-router-layout: レイアウト機能を提供するコンポーネント

去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。モーダルはどこに置いても DOM の実態は <body> 直下にマウントされる (いわゆる Portal)。モーダルが開くと通常のコンテンツ部分はスクロールが止まる。モーダル内のコンテンツがウィンドウサイズを超えてもスクロールできる。これで発生する、スクロールバーが消えることによるガタツキを防ぐ実装もしている。モーダルを閉じたときに元のコンテンツにフォーカスを戻す。デフォルトの CSS スタイルが提供されていて、何もしなくてもそれっぽく動く。背景とモーダルコンテンツのトランジションが独立していて、柔軟に設定できる。モーダルの表示はスタックで管理していて、モーダルの上にモーダルとかもやろうと思えばできる (UI 的にどうなんだというのは置いといて)。モーダルのつらさについては CodeGrid 5周年記念パーティーで話しているので、そのスライドも見てみてください。vue-thin-modal を作る際には Bootstrap Modal や Modaal をかなり参考にしました。特に Bootstrap Modal の作り込みはすごくて、その完成度の高さに驚いた覚えがあります。関連ライブラリとして vuex-modal というものもあります。こちらは vue-thin-modal を作る前に作ったものですが、今は内部で vue-thin-modal を使用しています。自分の欲しい機能はすべて実装したので、これからの展望は特にないですが、バグレポートや機能要望などは歓迎です！

2月20日 (火) に JavaScript メタプログラミング勉強会 Metapro.es という勉強会があり、そこで TypeScript (TS) Compiler API について LT しました。内容は TS Compiler API の基本的な使い方を話したものですが、短い時間で話しきれる内容でなかったのと、TS Compiler API の日本語資料は少ないので、ここに補足記事を書いておきます。また、example コードを Github に置いているので、適宜参照・実行しながら読むと理解しやすいかもしれません。

静的型が好きな人と話していると大体テンプレートの型をチェックしたいという話を聞くのですが、Vue には今のところそれをうまく行う方法はありません。すこし前に Vue のテンプレートの型チェックについて LT したのですが、これは vue-class-component などの Vue 標準の API から離れた書き方を強制するのでちょっと微妙な感じでした。これは、以前は Vue のコンポーネントの this の型を得るためには、クラス構文を使う必要があったためです。しかし、TypeScript v2.3 に導入された ThisType によって、オブジェクトリテラル内部のメソッドの this の型推論が行えるようになったのと、 Vue v2.5 から、TypeScript の型定義が大きく改善されたことで、Vue 標準の API を使っても this の型をうまく得ることができるようになりました。良い機会なので、上記の LT をした時に作ったものを更新して、標準の API でもテンプレートの型チェックをできるようにしてみました。typed-vue-template - テンプレートを TypeScript として script ブロックに挿入する実装部分typed-vue-loader - typed-vue-template を webpack loader のインターフェースとして提供してるものtyped-vue-loader をクローンして、npm i && npm run example:dev した後に、example ディレクトリのソースを編集すると動作がわかると思います。pic.twitter.com/8DDeyFFnK9— katashin (@ktsn) November 12, 2017ただし、この実装ではコンパイル時に型チェックができるだけであり、エラーが発生している場所はわからないですし、エディタ上で型情報を利用した補完機能を利用するということはできないです。そのあたりを頑張ろうとして作ったのが以下です。vue-template-diagnosticvue-template-diagnostic の発想は Angular と同じで、自分で型チェッカーを作ってしまおうというものです。しかし、やはり型チェッカーを再実装するのは結構つらいのと、Vu

せっかく型のある TypeScript を使うなら、なるべくプリミティブを使わずに Value オブジェクトを使いたいです。この記事では TypeScript + Vue で Value オブジェクトを扱うためにいろいろと考えたり、試したことを述べます。この記事に書かれていることは Vue 公式にはあまり推奨されない (と思われる) 方法なので、採用する場合には注意してください。

最近 TypeScript の恩恵を受けつつ Vue を使うためにいろいろと試行錯誤しています。この記事ではコンポーネントの定義と、コンポーネント内のロジックを再利用可能にするための Mixin の定義を TypeScript でどのように書けばよいかを述べます。

vq v1.1.1 をリリースしました。主な更新点は、イベントハンドリング機能の追加です。vq - Githubvq - npmvq は複雑なアニメーションを簡潔に書くことを目指しているライブラリで、関数型プログラミングの考え方から着想を得ています。今回の更新点以外の詳しい説明は以前書いた記事や README を参照してください。

某勉強会中にネタを思いついて、急いで作って LT してその日のうちに npm にアップしたら、翌日Vue 公式に紹介されていてだいぶビビったやつです。Vue と Vuex のヘルパなので、この二つを理解していることが前提になります。vuex-connect (Github) vuex-connect (npm)

Selective Undo とは、その名の通り Undo したい処理を選択することのできる Undo のことです。テキスト編集で Selective Undo をするためのライブラリを書いたので、それを実装する上で学んだことを簡単に述べます。ktsn/selectivie-undo-text: A Selective Undo library for text editing (Github)selective-undo-text (npm)Demo

webpack を使っているプロジェクトで、テストコードも webpack で依存関係の解決やトランスパイルをしたいということがあったので、その時に行ったことをまとめます。

執筆当時の環境Vue.js v1.0.17JavaScript で以下の様なコードを書いた時、onResize 内の this はグローバルオブジェクト (window) となり、this.log('resized') はエラーとなります。const obj = { log: function (str) { console.log(str) }, onResize: function (event) { this.log('resized') },}window.addEventListener('resize', obj.onResize) // this.log('resized') でエラー上記のコードの obj を、以下のように Vue.js の VM にするとエラーが起きなくなり、意図した通りに動作するようになります。また、this の値は obj に束縛されています。const obj = new Vue({ methods: { log: function (str) { console.log(str) }, onResize: function (event) { this.log('resized') }, },})window.addEventListener('resize', obj.onResize) // エラーが発生しないこのことから、Vue.js では methods に渡された関数を VM に束縛していると言えます。実際にコードを追って確かめてみます。methods で Github のリポジトリを検索すると、 _initMethods というメソッドが存在しているのがわかります。このメソッドは src/instance/internal/state.js の中に定義されています。_initMethods の中を見てみると、bind(methods[key], this) という記述があります。JavaScript ネイティブの bind ではないですが、どうやらここで this を束縛しているように見えます。vue/state.js at 521e8d2754c2e7f172c3c9702fdb74fe993027fb · vuejs/vueなぜわざわざ独自の bind 関数を使っているのかを調べるために、この bind の定

最近、何度か自作のライブラリを npm にアップしています。その時にやっていることを書き留めておきます。

最近 JavaScript のアニメーションの実装につらみを感じていたので、それを解消するためにライブラリを作りました。 vq というライブラリで、Velocity.js というライブラリのヘルパーという位置づけです。 内部のアニメーションは Velocity.js にまかせていて、vq は記述を簡潔に書けるようにしています。vq - GitHub vq - NPM

OSX, iOS アプリでも Rails の RAILS_ENV のように、動作環境に応じて値を変えたいという時があります。 この記事では、アプリから利用する Web API の URL を動作環境に応じて切り替えるのを例に、そのやり方を説明します。執筆時の開発環境は下記のとおりです。XCode: Version 7.2Swift: version 2.1.1

N 文字目以降を省略するというライブラリはたくさんあるのですが、行数指定できるものは見かけないので作りました。N 行以上になった時は省略したいというケースは結構ある気がするんですが、なぜそういうライブラリは無いのだろう......。Truncator - NPM Truncator - Github

Node.js の ORM である Bookshelf では公式サイトの例のようにアソシエーションを定義することができます。 しかし、モデルの定義を別ファイルに分けるとこの例が動かなくなります。 この記事では、モデルの定義を別ファイルに分けても意図通りに動くコードの書き方の説明と、それを支援する Bookshelf プラグインの紹介をします。

あるオブジェクトが絶えずアニメーションをするようなコードを書く時、様々な状態に応じて挙動を変えたいというのはよくあることだと思います。単純に実装すると、状態に対応するフラグを記録しておき、それに応じて条件分岐するという書き方になると思います。しかし、状態の数が増えると、フラグ管理が大変になり、コードがどんどん汚くなっていきます。そこで、State パターンのように、状態ごとに別々の挙動を行う関数を定義し、オブジェクトの状態が遷移した時に実行する関数を切り替えるようにすると、コードが状態ごとに整理され、見やすくなります。

最近 Vue.js を使って Web アプリを書いていて、どんなディレクトリ構造だと良いんだろうなーということを考えた結果を書きとめようと思います。Angular Best Practice for App Structureっぽい感じです。

もう年明けてしまいましたが、僕が2014年に読んだ技術書の中で良いと思ったものを三冊紹介します。ちなみに、筆者は普段 Web 系のコードを主に書いているので、読んでる本もそういったものに偏り気味です。

Objective-C では非同期処理の完了後の処理をデリゲートメソッドで行うものがあります。デリゲートメソッドで処理するのは、単純なシステムなら問題ありませんが、システムが複雑になってくると、1つのデリゲートメソッド内に多くの条件分岐ができて、コードが読みにくくなる場合があります。こういった時にはデリゲートメソッドの代わりにコールバック関数を用いることで、コードがすっきりします。既に存在するライブラリが、非同期処理完了後の処理をデリゲートメソッドで実行するようにしている場合は、デリゲートメソッド内でコールバック関数を呼ぶようなラッパークラスを書く必要があります。コールバック関数については以前の投稿を読むと分かるかもしれません (Objective-C でコールバックを持つメソッドを実装する方法について)。非同期処理完了後の処理をデリゲートメソッドで行うと以下のようになります。例として、WebSocket ライブラリの square/SocketRocket を用いています。今回は説明を簡単にするために、クライアントが送信したメッセージを受け取ったら、即座に同一のメッセージを返すサーバーを仮定します。// メッセージ送信- (void)sendMessage:(NSString *)message { [_socket send:message];}// メッセージ受信 (SocketRocket のデリゲートメソッド)- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message { // メッセージ受信後の処理を書く NSLog(@"%@", message);}メッセージ受信後に1つの処理のみを行うのであれば上記で充分ですが、場合によって異なる種類の処理を行いたい場合は工夫をする必要があります。例えば、サーバーから受け取るメッセージの種類によって処理を分けたい場合は、サーバーから受け取ったメッセージ内に、type のようなパラメータを加えて、デリゲートメソッド内で条件分岐をするということが考えられます。また、上記の sendMessage メソッドを呼び出すクラスが複数あり、クラス毎にメッセージ受信後の処理が違うというような場合は、デリゲートメソッドのみでは対応できません。こうい

CSS の幅や高さ指定を直感的なものにしてくれる border-box というものがありますが、これを使うと jQuery UI の Resizable の挙動がおかしくなります。この問題は短くて単純なコードで解決することができます。通常、CSS の width や height は HTML 要素のコンテンツのサイズを指定します。つまり、border や padding の値は width や height には含まれません。例えば、width が 100px で、左右の padding が 20 px の HTML 要素を表示してみると、見た目上の幅は 140px となるわけです。これは CSS を書いてると結構気持ち悪く感じることがあると思います(他の要素との組み合わせを考える時にめんどくさかったり)。上記の問題(?)はCSS で、box-sizing: border-box; を指定することにより解決することができます。つまり、width や height の値を padding や border も含んだものとして指定できるようになります。先の例の width が 100px で、左右の padding が 20px の HTML 要素を考えると、見た目の幅が 100px となり、要素内のコンテンツの幅が 60px になります。しかし、box-sizing を border-box にすると、jQuery UI の Resizable の挙動が気持ち悪くなります。具体的には、HTML 要素のサイズを変更するためにドラッグを開始すると、padding や border の値だけ大きさがずれます。このせいで、ドラッグ中のマウスポインタの座標と、HTML 要素の端が一致しないのですごく気持ち悪いです。Resizable の border-box 問題に関しては、jQuery 側ではまだ対応されていないみたいなので、自分で対応してみました。以下がそのコードです。jQuery UI のコードを読み解くのは嫌だったので、普通な感じの解法です。$el が border-box と resizable の両方を適用している HTML 要素の jQuery オブジェクトです。$el.on('resize', function (ev, ui) { // box-sizing

非同期に結果が返ってくる処理を書く場合、Objective-C では @Protocol を定義して、デリゲートメソッド内で結果をもらうのが良いのかもしれませんが、JavaScript を書いてるとコールバックで結果を取得したいと考えてしまいます。この記事では、Objective-C でコールバック付きのメソッドを作る方法を解説します。(コールバックって呼んでいいのかわかりませんが)