みかづきブログ その3

3ヶ月つづけてみました。

iOS

Mobile Safari で ウェブページのソースを確認する

iOS

Macと接続する MacのSafariの「環境設定」 > 「詳細」 > 「メニューバーに開発メニューを表示」にチェックを入れる MacとiPhoneをライトニングケーブルで接続 MacのSafariの「開発」から自分の端末を選択しSafariのソースを確認 ブックマークレットをつかう …

iOSで -webkit-overflow-scrolling: touch をつかうと上に要素がかぶっていてもスクロールしてしまう。

iOS7.1, iOS8.1, iOS8.4 で確認しました。 HTML <div class="box"> <div class="img"></div> </div> <div class="mask"> </div> CSS .box { overflow: scroll; -webkit-overflow-scrolling: touch; } .img { width: 1000px; height: 1000px; background: url(http://jsrun.it/assets/y/S/0/t/yS0tr.jpeg) center center no-repeat; …

iPhoneでテキストボックスからフォームをsubmitする

iOS

iPhoneでもテキストボックス内で改行ボタンを押すとsubmitできるようです。(iOS8.4 iphone6にて確認) DEMO http://jsrun.it/kimmy/q4Ll※ iPhoneでご観覧ください。

iPhone の Mobile Safari で Video を再生したときのコントロールセンター挙動

iOS

以前、 iPhone の Mobile Safari で Audio を再生したときの挙動を調査 してまとめましたが、今回はVideoを再生した際のコントロールセンターの挙動を観察しました。(iOS8.4 iPhone6で確認)iPhone の Mobile Safari で Audio を再生したときの挙動まとめ -…

iPhone の Mobile Safari で Audio を再生したときの挙動まとめ

iOS

Mobile Safari で Audioを再生する方法は大きく、Audioタグ をつかう方法と Web Audio API をつかう方法があります。 2つの方法には微妙な違いがあって、いままでもちょいちょい検証してきたんですが、ここらで1つの記事にまとめておこうと思います。※ 検証…

ホームボタンを押してSafariを裏にまわしたときにAudioを停止する

iOS

audioタグをつかってAudioを再生した場合、別タブを開いたりSafariを閉じたりしてもAudioはバックグラウンドで再生し続けてしまいます。今回はこの対策を3つ考えました。 DEMO(未対策なAudioタグ) ※ iPhoneでご観覧ください 対策A: blurイベントでaudioをp…

Mobile Safari で 電子コンパスにアクセスする

ウィンドウのデバイスオリエンテーションイベントに渡されるオブジェクトのwebkitCompassHeadingにデバイスの向きが 0 ~ 360 ではいっています。0が北、90が東、180が南、270が西のようです。また、webkitCompassAccuracyで精度も確認できます。-1が入ってい…

スマートフォンで touchmove を preventDefault すると clickイベントが若干発火しにくくなる。

iOS や Android では 擬似的な clickイベント が用意されており、DOMに振ることができます。 clickイベントが発火する条件はもろもろあるのですが、指を動かしながら画面をタップすると、短めのフリックもclickと判定してくれることがわかります。 しかし、…

iPhoneのアプリを消せないように制限する

iOS

1回だけ誤操作でiPhoneアプリを消してしまったことがあって、なにを消したのかすらわからない状態になってしまったのですが、その対策を教えてもらいました。 設定手順 設定 > 機能制限 を ON にする 設定 > 機能制限 > Appの削除 を OFF にする これで機能…

mobile Safari はキーボードが表示されているときしかkeypressイベントが発火しない

iOS

DEMO mobile Safari はキーボードが表示されているときしかkeypressイベントが発火しないということを知りました。 あたりまえといえばあたりまえなんですが、BluetoothキーボードをつなげばUIのキーボードを出さなくてもOKだと思っていたので、ちょっとショ…

iOSでも background-attachment: fixed に近い動作を実現する

iOS

個人的に background-attachment: fixed をぜんぜんつかわないので気づかなかったのですが、iOS8でもつかえないんですね。昔つくったコード をiPhoneで確認して気づきました。 CSS html { height: 100%; } body { height: 400%; background: #e3e3e3 url(htt…

Web Audio API なら iOS でも OS の ボリュームに依存せず音量を0にできる

Mobile Safari では audioタグ の volume を 0 にしても音が出ることがある - みかづきブログ その3kimizuka.hatenablog.comaudioタグでは実現できませんが、Web Audio API をつかえば実装できます。まず、以前つくった Web Audio API のサンプルをiOS用に書…

Mobile Safari では audioタグ の volume を 0 にしても音が出ることがある

JavaScript (function(win, doc) { "use strict"; var audio = doc.getElementById("audio"); audio.volume = 0; // Mobile Safari で効かない doc.addEventListener("click", function() { audio.play(); }, false); })(this, document); DEMO PCのSafariで…

konashiでLEDを光らせる

iOS

この記事を konashi.js 読み込むとLEDがビカビカひかります。konashi.js - JavaScript/HTML/CSSでフィジカルコンピューティングユカイ工学LLC教育無料konashi (YE-WPC001) | konashi on the BASEyukaishop.base.ec

スマートフォンで長押しのメニューを表示させない

以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…

iPhoneアプリ研究記 2015年 ver. 春

iOS

99%迷わない! Waaaaay!(うぇーい!)方向音痴のための距離と方向だけのナビ&待ち合わせ 99%迷わない! Waaaaay!(うぇーい!)方向音痴のための距離と方向だけのナビ&待ち合わせHouchimin LLC.ナビゲーション無料目的地の住所を入力すると目的地までの距…

世界一ミニマルな野球速報アプリ chibadge(チバッジ) が復活しました。

プロ野球 2014シーズン終了とともにストアから取り下げていたchibadgeですが、2015シーズン開幕とともにストアに返ってきました。chibadge - 千葉ロッテマリーンズのスコアがバッジで確認できるアプリchibadge.kimizuka.fm chibadgeとは chibadge(チバッジ…

Mobile Safari のリーダー表示でリーダーの情報を表示する

Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。 DEMO http://jsrun.it/kimmy/reader ※ iPhone の Safari で御覧ください つかいかた URLにアクセスするとURLバーに 「Reader View Available」と表示されます。URLの左側のリ…

風邪をひいて声が出ないので Web Speech Synthesis API で文章を読み上げて窮地を乗り切った話

風邪をひいて声が出ないので Mac の sayコマンド で文章を読み上げて窮地を乗り切った話 - みかづきブログ その3風邪をひいて声が出ないので Mac の sayコマンド で文章を読み上げて窮地を乗り切った話 - みかづきブログ その3前回は Mac の Sayコマンドを活…

Mobile Safariのランドスケープ表示(横向き)でページを拡大しないようにする

iPhoneは本体を横向きにしてランドスケープ表示にすると、Mobile Safari の表示が拡大します。 今回はこの機能をOFFにする方法をまとめます。 テキストの拡大をOFFにする body { -webkit-text-size-adjust: 100%; } または、 body { -webkit-text-size-adjus…

iPhoneアプリ研究記 2014年12月

iOS

Filters〜無限に増えるフィルター加工で写真や動画がもっと楽しくなるカメラアプリ〜 Filters〜無限に増えるフィルター加工で写真や動画がもっと楽しくなるカメラアプリ〜KAYAC Inc.写真/ビデオ無料インスタグラムやPathのようなフィルターを自作できるアプ…

続・iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法

iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法 - みかづきブログ その3 iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法 - みかづきブログ その3昔はiPhoneのMobile Safariでdocumen…

iPhone、Androidでページスクロールを止める

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

iPhoneアプリ研究記 2014年11月

iOS

11月につかってみたアプリです。かなりすくないです。 Facebook Groups Facebookは機能をどんどんアプリ単位に分業してますね。Facebook GroupsFacebook, Inc.ソーシャルネットワーキング無料 Skype Qik: グループビデオメッセージ 導入してみたもののまっ…

iPhoneでSafariのブラウザのページスクロールを禁止する

iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。すなわち、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); この記述でページスクロール…

minimal-ui 調査

iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告 iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告|Web制作 W3G多少問題はありましたが、Safariの表示領域を広くつかう手段としては有効だったminimal-ui。しかし、 iOS 8 Release No…

konashi.js 作業メモ その2

konashi.js 作業メモ - みかづきブログ その3 konashi.js 作業メモ - みかづきブログ その3先週末にまたも konashi をがっつり触る機会があったので気づいたことをメモしておきます。 ログを表示する window.kの中身を見ていて気づきました。 k.log というメ…

AppleCare+ for iPhone と auスマートパス をつかってiPhoneを修理に出す

iOS

裏面が傷だらけになってしまったiPhoneをなんとかしよう。 - みかづきブログ その3 裏面が傷だらけになってしまったiPhoneをなんとかしよう。 - みかづきブログ その3前回は応急処置で済ませましたが、カメラも不調になってしまったので修理に出すことにしま…

裏面が傷だらけになってしまったiPhoneをなんとかしよう。

iPhone6に機種変更してからはや4日。 華麗にアスファルトに落下させてしまい、裏面がボロボロになってしまいました。。。 表面がバリバリになったときの対処法 は以前考えたのですが、今回は裏面用の方法を紹介したいと思います。バリバリに割れてしまったiP…

iPhoneアプリ研究記 2014年10月

iOS

先日iPhone6を買ってかなりアプリをいれかえました。 なので今月はかなりはやいですが、つかってみたアプリをまとめてみます。 el とても綺麗なゲームです。絵本みたいな雰囲気がとてもよいです。BGMもよいです。 ただ、個人的にはこの手のゲームはバルーン…

iPhoneアプリ研究記 2014年9月

iOS

JR東日本アプリ 兎に角多機能なアプリです。多機能すぎていまいち使いにくい気がします。 なんでもできるなにかはiPhoneで充分で、アプリは1うに機能に特化させても良いのではないかなと思いました。 個人的にはYahoo!の乗り換え案内が最強だと思ってます。J…

konashi.js 作業メモ

週末にがっつり konashi.js をつかったアプリを開発していたんですが、気づいたことを2点メモしておきます。 konashi-bridge.min.js の読み込みについて reo.matsumura さんのコードをForkしていたときには気づきませんでしたが、konashi-bridge.min.js を読…

iPhoneアプリ研究記 2014年8月

iOS

今月はちょっとはやめに試してみたアプリをまとめてみます。 逆転裁判5 iPhone版の逆転裁判123HDもプレイしましたが、それと比較するとユーザーに親切なインターフェイスになりましたね。 随所に迷わずに操作できる工夫が見られます。 その反面、123HDほど自…

konashiの入力をkonashi.jsで受け取る

今日までの3日間、「課題解決型」ハードウェアハッカソン Hirameki | GUGEN2014 に参加させてもらってきました。そのなかで、konashiの入力の状態を監視するアプリづくりを担当したのですが、せっかくなのでそのときのソースを公開しておこうと思います。 実…

iPhoneアプリ研究記 2014年7月

iOS

1ヶ月なんてあっというまですね。それでは今月試してみたアプリをまとめてみます。 いろぴこ 「Philips hue LEDランプ」に対応したということで再ダウンロード。 まあ「Philips hue LEDランプ」なんてハイカラなデバイスはもってないんですけどね。「登録し…

PUSH通知の証明書を更新する

iOS

先日リリースした chibadge(チバッジ) ですが、申請に半年以上費やしたため、すでにPUSH通知の証明書の有効期限が切れそうです。 PUSH通知がつかえなくなると、本当になにもできないアプリになってしまうため、急いで更新したときのメモを残しておきます。…

iPhoneアプリ研究記 2014年6月

iOS

すこし早いですが、今月試してみたアプリをまとめます。 Google スプレッドシート, Google ドキュメント とにかく便利です。Google スプレッドシートGoogle, Inc.仕事効率化無料Google ドキュメントGoogle, Inc.仕事効率化無料 生きろ!マンボウ!-3億匹の仲…

iPhone用イエローカード(シンプル ver.)

ワールドカップがもりあがっていますね。以前、 iPhoneを振ってイエローカードを出すページ をつくりましたが、今回はシンプルにアクセスした時点でiPhoneをイエローカードみたいにするページをつくりました。 イエローカード イエローカード - js do it つ…

chibadge kuro リリースできました。

chibadge shiro 以上に申請に手こずった chibadge kuro ですが、本日ついにリリースできました。chibadge kuro - マリーンズの失点がバッジで確認できるアプリFumitaka KIMIZUKAスポーツ無料これで先日公開した、chibadge shirochibadge shiro - マリーンズ…

iPhone用タッチポインタ(習作)

最近、ウィンドウズストアアプリをつくっていて、Windowsタブレットをつかう機会に恵まれまくっているのですが。Windowsタブレットにはタッチした箇所にタッチした感を演出する機種が結構あります。その演出とおんなじような体験の再現を目指してコードを書…

世界一ミニマルな野球速報アプリ chibadge(チバッジ) をつくりました

chibadge(チバッジ)とは chibadge(チバッジ)は千葉ロッテマリーンズのスコアをバッジで伝えてくれる世界一ミニマルな野球速報アプリです。 ※ chibadgeはマリーンズファンが勝手につくった千葉ロッテマリーンズ非公式アプリです。 chibadge (チバッジ) - …

Chromeでひらくボタン

iPhoneのSafariで開くとChromeのバナーと、Chromeへ招待するボタンが表示されます。 動作原理 URLスキーム mobile Safari の URLバーに、 googlechrome:// と入力すると(Chromeをインストール済みであれば)Chromeを開くことができます。 また、その際に、 …

FacebookアプリのWebViewではすべてを表示しないモック

試しにつくってみました。こちらのサイト をFacebookでシェアし、 iPhoneのFacebookアプリで見てみると、本文が途中までしか表示されず、Safariで開くようにサジェストされます。Safariで開くと、隠れていた部分が徐々に表示されていきます。原理としてはユ…

公開中のiPhoneアプリをストアから取り下げる

iOS

先日付で公開しようとしていたアプリをうっかりストアにだしてしまう。 こんなことってありますよね。そんなときは落ち着いて、下記の手順でストアから取り下げましょう。 落ち着いて進めるべき手順 落ち着いて iTunes Connect にアクセス 落ち着いて Manage…

iPhoneアプリ研究記 2014年5月

iOS

今月インストールしてみたアプリをまとめてみます。 キャンディークラッシュ めちゃくちゃ有名なアプリですね。 やたら広告がでてたんで試しにインストールしてみました。 大味なアイコンとは裏腹にアプリのデザインは非常に綺麗でしたし、演出も良いですね…

iPhoneアプリの審査期間の目安

iOS

アップル公式 News and Updates - Apple Developerこちらのサイト の右カラムにおおよその目安が記載されております。 外部サービス Average App Store Review Timesこちらのサイト ではユーザー投稿の平均値が確認できます。 僕の7日前に申請したアプリはま…

iPhoneのアイコンをカスタマイズする

iOS

プリコン - かわいいプリ風デコ写真をつくって、無料でアイコンにできちゃう!そのままLINE・Twitter・Facebookで友達にシェアできるよ -KAYAC Inc.写真/ビデオ無料プリコンを使うと、好きな写真を簡単にアイコンにしてホーム画面に置いておくことができま…

2.12との戦い

2010年にDeveloper登録してから、はや4年。 先日、ようやく1本目のアプリをリリースすることができました。ずーしーほっきーのリフティングFumitaka KIMIZUKAソーシャルネットワーキング無料このアプリをリリースするまでに、 実に5本のアプリがリジェクトさ…

iOS7のSafariでツールバーを非表示にする

<meta name="viewport" content="minimal-ui" /> と記述するだけで、ツールバーが非表示となり、UIが最小限になります。 ただし、初期表示が非表示になっているだけなのでステータスバーをタップするとツールバーが表示されます。</meta>

iPhoneアプリ研究記 2014年4月

iOS

Amazonでの買い物履歴に続いて、先月試してみたアプリも公開してみようと思います。 HummingWay - GPS連動ミュージックプレイヤー 発想が良いと思いました。 僕は決まったジョギングコースを走っているので、ラスト1kmのところでラストスパート感のあるBGM(…