引っ越し作業にiPhone3Dスキャンを活用したら滅茶苦茶捗った話｜iwama
皆さんこんにちは、iPhone3Dスキャン大好きおじさんのiwamaです。 昨年末から色々とあって引っ越し作業をしていたんですが、その時にiPhone3Dスキャンを活用したら滅茶苦茶引っ越し作業が捗ったのでまとめてみました。 重要 今回の記事で解説する3Dスキャン技術を活用する場合はiPhone12Pro以降のiPhoneProシリーズかiPad Proが必要になります。 こちらのProシリーズにはLiDARセンサーという特殊なセンサーが搭載されており、それで現実と同スケールの3Dモデルを作成する事ができます。 一応LiDARセンサー無しのiPhoneでも３Dスキャンは行えますが、実寸大のスケールとは異なる場合が出てくるため注意が必要となります。 3Dスキャンって何ぞや？いきなり3Dスキャンといわれても？？？となる方が大半だと思いますので軽く3Dスキャンについても解説させてください。 現実
スマートフォンサイトを1080x1920pxのデザインサイズで作る
なんでもネイティブアプリのUIデザインが1080x1920pxだからと。 えーまじで、と。iPhone6+なら1242x2208pxでないの？と。 Webでそんな数字聞いた事ないんだけど今ってどうなの？と思ってググってみたんだけども iPhone/iPad解像度(画面サイズ)早見表 デザインアセットをiPhone6に対応するワークフロー iPhone6の時代のviewport設定について やっぱりWebだと1080なんてのはないなあと思い知らされた。 とはいえ時間もないし強引にやってみることにした。 デザインをみたら画像しかなかったので、1080x1920pxの等倍で画像切り出したりマークアップしたりして普通にサイト作った後に、CSSとJSで拡大縮小のおまじないかけて強制的に画面にフィットさせるという古典的手法を取った。 iPhoneを含めて大体の最新端末にはviewportを操作すれば何
1から始めるSwift言語。SwiftでiPhoneApp製作 その1
いい加減、ネイティヴ iPhoneAppの製作を行おうかと思います。 と言うのも、以前、iPhoneやらAndroidやら途中まで作成してはやめ、また始めなんてやっていましたらもう2016年。。 JavaやらC++やらswiftやらRubyやらと浅く広くやっていますと、「あれ。これどうだったけ？」「AutoLayoutってなんだっけ」状態が多々発生しますね（大袈裟に言いましたが） w と言うことで、やったことを忘れないように（これは歳か？w） しっかりSwiftと向き合って1からiPhone Appを作って行ければと思います！！ Swift GitHub 特にSwiftで書いてiPhoneAppをリリースした。って経験もないど素人レベルなので、 「これからiPhoneAppを作るぞ！」て方に参考になればと思います！ 何はともあれ、iPhoneApp作成に必要なのはPCはMacとなります。
WebエンジニアのためのSwift言語入門 - ICS MEDIA
Mac、iPhone・iPad、そしてApple Watch。これらのApple製品上で動くアプリはObjective-CとSwiftという言語で開発できます。Swiftは2014年に発表され、他のプログラミング言語の長所を多く取り入れたプログラミング言語です。何かしらのプログラミングの経験がある開発者にはもちろん、これからプログラミングを始める人にも比較的学習しやすいものとなっています。今回はiOSアプリにおけるパーティクル表現を通して、ActionScript 3.0やJavaScriptのようなウェブ開発技術と比較しながらSwiftを始めてみましょう。 デモについて Swiftで作られたパーティクルアニメーションをiPhone 6 Plus上で動かすデモです。画面上でフリックした場所にパーティクルが発生し、時間の経過とともに色が変わっていきます。 ソースコードはGitHubで公開して
iOS Design Guidelines
September 28, 2015 in design iOS Design Guidelines About these guidelines These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems. Resolutions and Display Specificatio
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
iOS 9, Safari and the Web－firt.dev
3D Touch, new Responsive Web Design, Native integration and HTML5 APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 10 years ago (16 Sep 2015) About 12 min reading time #ios #safari #macos I can’t believe it’s been a year since my last post in this blog; in the meantime, I’ve written articles at different magazines, while working on a new book and delivering several trainings ar
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas Animation - Qiita
Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas AnimationanimationcanvasrequestAnimationFrameDate.nowperformance.now このエントリでは、「ブラウザ上で Canvas アニメーションを効率的に動かすコードを書こうとした場合に、どういった API を利用すれば良いか?」をテーマに、Timer API について説明します。 このエントリに登場する Time API は、Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimatio
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
[CSS]iOSで滑らかなスクロールを実現する-webkit-overflow-scrollingの使い方 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[CSS]iOSで滑らかなスクロールを実現する-webkit-overflow-scrollingの使い方 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad835612cfc272d8f3a17547f348ac4d0ae79936/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2F6523979.jpg)
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
Hybrid Mobile Apps: Providing A Native Experience With Web Technologies — Smashing Magazine
In this article, Patrick Rudolph provides many hints, code snippets and lessons learned on how to build great hybrid mobile apps. He’ll briefly introduce hybrid mobile app development, including its benefits and drawbacks. Then, Patrick will share lessons he has learned from over two years of developing Hojoki and CatchApp, both of which run natively on major mobile platforms and were built with H
iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー | | 大阪のWeb制作屋Lavison
By Masaki 2014.09.26 WEB iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー こんにちは、masakiです。 iPhone6、出ましたね～。 iPhone6 Plusはちょっと大き過ぎなので個人的にNGです。あれは巨人用のスマホです。（嘘です） iPhone6 Plusの操作性とレイアウトについて 注目して欲しいのはiPhone6 Plusはタブレットではなく、「スマートフォン」の位置づけであるということです。 Plusを片手で操作するにはやはり難があり、タップしようにも指が届かないのです。大きすぎて、、 それでも片手親指で操作する方は実際にいます。そうした時にメニューボタンなど良く触れるボタンなどを上部に置くのは酷いUI。 こういった巨大なスマホ（もはやスマートではないが…）がPlusを筆頭にこれからどんど
URLスキームからのスマフォアプリ起動のフォールバック
前段 ブログリハビリ..._:(´ཀ`」 ∠): URLスキームで任意のアプリ（今回はLINE）を起動したい フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい Android Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。 var iframe = document.createElement('iframe'); iframe.className = 'is-hidden'; iframe.onload= function() { alert('LINEアプリ、インストールしてなくない？'); iframe.parentNode.removeChild(iframe); }; iframe.src = 'line://msg/text/loremipsum...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでスマホのスクロールイベントを無効化する - Qiita
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/
GitHub - IjzerenHein/autolayout.js: Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)
boombox.js/README_ja.md at master · CyberAgent/boombox.js
