【iOS】JavaScript を使って、UIWebView でページ内検索
こんにちは！ Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 ちょっと前ですが、UIWebView についての記事を書きました。 【iOS】UIWebView Hacks 〜ブラウザ開発テクニック ページ内検索についての内容が抜けていたので、今回はその話です。 UIWebView にはページ内検索関連の API はありません。Objective-C で DOM をたどることもできないので、ほとんどを JavaScript を使って実装します。 実装するポイント ソースコードは一番最後にあります。まあまあ長いコードなので、ポイントとなる部分だけ紹介します。 全てのエレメントをたどる body から childNodes をたどっていっても、iframe 内の document にはアクセスできません。window.frames で frame 一覧が
【iOS】UIWebView Hacks 〜ブラウザ開発テクニック〜
こんにちは。 Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 調べてみると、Sleipnir Mobile の最初のコミットは 2010年9月6日で、もう3年近く開発しているようです。最初はこんな貧弱な API でブラウザなんて作れるわけ無いと思っていましたが、なんとかなるものですね。今では多くのユーザーさんに使っていただけるプロダクトになりました。 今回は、この3年間で、使ってきた UIWebView の技を紹介したいと思います。詳細な方法については書きませんが、UIWebView で何ができて何ができないのかはわかるかと思います。それぞれの詳細なやり方については機会があれば書いていきたいです。 目次 長くなりそうなので、目次を用意しました。 余裕があればアップデートするので、ブックマークでもしておいてください。 UIWebView の API
NSProxy を使って UIWebView のイベントハンドリングをフックする
こんにちは。開発担当の福井です。 突然ですが、みなさん NSProxy をご存じでしょうか？ NSProxy は Foundation の中で唯一 NSObject を継承しないクラスです(NSProxy のサブクラスを除く)。 また、その実装はほとんどありません。 今回はその NSProxy を使って view に対するメソッド呼び出しをフックしてみようというお話です。 NSProxy の使い方 名前からも推測できるように、NSProxy は Proxy パターンを実現するためのクラスです。 メッセージの呼び出しが動的に解決される Objective-C において Proxy オブジェクトを実現するのは実に簡単です。 NSProxy は、ただ自身に送られたメッセージを、そのまま別のオブジェクトに受け流すことで Proxy としての機能を実現します。 Proxy オブジェクトを作ってみる
PSD からテキスト情報を抽出するスクリプト
こんにちは。デザイナーの高口です。 デザイナーの皆さんは、デザインを開発者に伝える時、どのようにしていますか？ 口頭で伝える、印刷したデザインに書き込む、指示書を作る…様々な手法があると思いますが、どれも時間がかかりますよね。 そこで今回は、伝える手間を少しでも減らすべく、PSD からテキスト情報を抽出するスクリプトをご紹介いたします。 1.スクリプトをダウンロード まず、下記のリンクからスクリプトをダウンロードして下さい。 (ご利用に際しては、自己責任にてお願いいたします。) ダウンロード ： TextExportToCSV ダウンロードしたファイルを解凍すると「TextExportToCSV.jsx」というファイルがありますので、下記のフォルダにコピーして Photoshop を再起動して下さい。 Windows – C:\Program Files\Adobe\Adobe Photo
Mac の Quick Look をちょっとだけ快適に – xattr 編 –
こんにちはこんにちは！ エンジニア川端です。 今年は桜の開花が早かったですね。「花は桜木、男は岩鬼。」と書こうとしたら、すでに去年のブログで書いてました。 ファイルを選択してキーボードのスペースを叩けば簡単プレビュー。 Mac OS X 標準機能の Quick Look、ステキですね。 # Windows の方は FenrirFS で同機能をご堪能ください！ 標準のままでもかなり役立つ Quick Look ですが、不満なのがテキストファイルの扱い。 標準のテキストエディタで作ったファイルはちゃんとプレビューできるんですが、 最強ステキソフト Emacs などで作ったテキストファイルは という風に巨大なアイコンが。 いくつかある解決策から、今日は「xattr 編」をお届けします。 最も簡単なのは…… Mac OS X 標準ソフト「テキストエディット」の環境設定で、「ファイルを開くとき」の設
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
CSS3 の使えると便利なプロパティ
こんにちは！WEB 担当の青野です。 そろそろ CSS3 でのコーディングも（趣味で）するようになってくると思うので、 レイアウトコーディング時などで個人的によく使いそうなものや、すべてのブラウザでサポートしてほしいものをまとめてみました。 ブラウザのバージョンは、以下の環境での確認となっています。 Safari:5.0.5 Google Chrome:12.0.742.100 Firefox:4.0.1&5.0 Opera:11.11 Internet Explorer:9 background-size 背景画像のサイズを指定する。 対応ブラウザ Safari、Chrome、Firefox、Opera、IE9 説明 background-size: 横幅 縦幅; auto 長さ指定（100px など） % 指定 contain（縦横比を保持し、背景表示領域に収まる最大サイズで表示） c
【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
こんばんは、企画の林です。 今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。 iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。 ※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。 iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには jQuery.animate() を使ってはいけません。 CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。 （jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。） 上下左右どの動きも transform:transla
【iPhone/iPad】ホームに置いたWebアイコンからSafari以外のアプリを開かせるJavaScriptを作りました
こんにちは！林です。 今回は、iPhone アプリ開発者 / ウェブ開発者向けの記事です。 みなさんは、iPhone の Safari にある「ホーム画面に追加」という機能をご存知でしょうか。 以下の図のように見ているウェブページを、ホーム画面にアプリのように置くことができる機能です。 ホームに置かれたアイコンをタップすると、Safari が起動し、そのウェブページを閲覧できる仕組みになっています。 頻繁に使うページをホームに置いておくと大変便利です。 この機能を利用して、 アイコンから任意のアプリ(※1) を起動する JavaScript を作成しました。 ※1 URI スキームに対応しているアプリのみ対応しています。 使い方 設置方法は </head> の直前に１行、スクリプトタグを追加するだけです。 ※ デフォルトでは、Sleipnir Mobile で開くようになっています。 <s
画面レイアウトを行うときに便利なツール « Elegant Apps Developers
こんにちは。BoltzEngine 担当の伊藤です。 Windows 10 の最新版、April 2018 Update (バージョン1803、ビルド17134.1) が配信されました。このアップデートで、Windows 10 の Microsoft Edge でもウェブプッシュが使えるようになりました。 これまで Chrome や Firefox を別途導入する必要がありましたが、標準の Edge だけでプッシュ通知が実現できるようになったので、今後より利用しやすくなりました。 こんにちは！ 島根支社でウェブエンジニアをしているカナツです。 GW も終わり、現実と向き合う日々に引き戻されたみなさま、いかがお過ごしでしょうか。 次の大型連休は島根観光をオススメします。自然が豊かすぎる島根で非日常的な日々を過ごしたくないですか？ 前置きはさておき、みなさん、チーム開発時のソースコード管理って
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選
こんにちわ。坪内です。 突然ですが、この2年ほどで集めた素敵なネットショップを一挙公開しちゃいます。はっきり言って、この記事書いてるだけで、何度もポチリかけたくらい、素敵なアイテムがてんこ盛りです。既に知っているショップも多いと思いますが、知らないショップがあったら是非チェックしてみてください。 ちなみに、数が多すぎて説明文書くのは断念しました。カテゴリ毎には分かれているので、実際にご自身の目で確認してみることをオススメします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
