iPhone "Tilt Auto Scroll" for iOS13+, Android, Shortcuts & Bookmarklets - ショートカット & ブックマークレット+広告ブロッ
. . . _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ 1. Note 1.1 はじめに -ショートカット内のJavascriptコードはブックマークレット化対応のため、 Visual Studio Code のJS & CSS Minifier プラグインで圧縮・軽量化（Minify）しています。 ★ Prettier - Code formatter プラグインで整形する（参照:8.2）かまたはオンライン上のbeautifier（参照:8.3） などで整形してコードを確認してください。- ソースコードをショートカット内で全部公開にしました。 [Ver.1.1.0] Android に対応しました。 [Ver.1.2.0] ★ コードの安全性について信頼できなければショートカットまたはブックマークレットを実行しないでください。 外部には、広告をブロックするためにGAS のデータベースからデータをGET リクエストしていますが、POST やPUT をしていないことを確認してください。 [Ver.1.1.0] ★ 全て自己責任でお願いします。 ※ センサーを働かせるため、バッテリーの消耗にご注意してください。 1.2 http://～ のURLは不可 -→ https://～に置き換えますが、ショートカット等をリロードしてください。 [Ver.1.1.0]- 1.3 Safari 以外のブラウザはブックマークレットを作成してください。 ショートカットよりブックマークレットの方が使いやすいと思います。 1.4【ブックマークレットの作成】 ショートカット内のJavascriptコードの先頭の長い１行をコピーし、任意のブックマークのURLに貼り付けてください。 そのブックマークの名前を"Tilt Auto Scroll"に編集します。 ブックマークレットは他のサイトのブックマークと区別するため、"Bookmarklets"フォルダを作成して入れてください。 1.5 整形したコードをショートカット内のコードに置換えても動作します。 プログラミングの知識があれば、設定角度や色・透明度などは容易に変更できると思います。 2. Usage 2.1 画面の下部に、"DeviceOrientation"ボタン表示→画面をタップ→ボタン消去 2.2 「"動作と方向"へのアクセスを求めています」のダイアログ画面表示 ☆ サイトごとにアクセス要求のダイアログ画面を表示します。 残念ですが、Apple の仕様です。（参照:7.1【iOS 13 以上での事前準備】） 2.2.1［キャンセル］ サイトをリロードしショートカット等をリロードしても再度［許可］することができません。 そのサイトのキャッシュを消去するか、または電源オフして再起動すれば回復します。 2.2.2［許可］ 3.1 "Tilt Scroll"モードで開始します。 一度[許可]すればキャッシュされますので、ショートカット等をロードする必要はありません。 ☆ しかし、サイトをリロードした場合はショートカット等をロードする必要があります。 この場合は、2.1 "DeviceOrientation"ボタン 2.2 のアクセス要求のダイアログ画面はでません。 2.3 広告ブロッカー搭載 [Ver.1.1.0] 3. 【Scrollモード】 3.1【"Tilt Scroll"モード】 ±3°以内で停止、 ±3°を超えて画面上部をこっちに傾けると↑スクロール（ページ下方向）、あっちに傾けると逆方向 ☆ デバイスの傾きに応じて加速度が変化します。（参照:7.2） 3.2 Scrollモードの切り替えは、トグルスイッチです。 -±60°-±45°(又は横±30° [Ver.1.2.0])を超えると"Auto Scroll"モードに切り替わります。 ☆ デバイスを少しひねる（手のひら返し）だけで-±60°を超え-、Scrollモードが切り替えられます。 アラートのOKをタップした角度が基準（オフセット）になります。 3.3【"Auto Scroll"モード】 従来の「自動スクロール」（参照:7.5）と同じ（上下のスワイプ量に応じた速度）ですが、 ☆ ±30°を超えると停止し、±3°以内に戻すとスクロール方向が反転する機能を追加しました。 ☆ ±20°～±30°で速度を加減（あっちで+25%、こっちで-25%）、±40°で反転（スクロール停止）、±20°以内に戻すとスクロール [Ver.1.1.0]、角度の変更（10°、20°、30°） [Ver.1.2.0] スワイプ速度を加減していますので、スクロール速度と一致はしていないと思います。 ☆ スクロール方向（速度加減量[%]）のトースト表示 [Ver.1.1.0] 4. 【スクロールリング】の操作 4.1［ドラッグ］移動できます。 下層のリンク先をタップする場合、広告などで隠れてしまう場合など邪魔なときはドラッグ移動してください。（参照:7.7） 4.2［シングルタップ］：非表示（透明）←→表示（トグル） ドラッグ移動と非表示（透明）により迷子になってしまうこともありますので、3.2 Scrollモードの切り替えで表示します。 4.3［ダブルタップ］ ：ページ最後にジャンプ ページ最後のときはページ先頭にジャンプ（画面上部のタップより高速で移動します。） 4.4［トリプルタップ］：コンパス画面表示←→非表示（トグル） -6.2 "Tilt Auto Scroll+ Alpha バージョンのみ搭載- 4.5 Scrollモードによる色変更 [Ver.1.0.1] 5. 【左右スワイプ】ページ内（左右端からでなくてよい） 5.1 -[戻る]: 左スワイプ←前のページがあるとき- -[進む]: 右スワイプ→次のページがあるとき- [Ver.1.0.0] [戻る]: 右スワイプ→前のページがあるとき [進む]: 左スワイプ←次のページがあるとき [Ver.1.0.1] 5.2 Drag & Copy bugfix [Ver.1.1.0] 5.3 お気に入りのページを開く（ -加速度センサー- ） [Ver.1.1.0] 左に速く振る→同じウィンドウでURL1を開く 右に速く振る→同じウィンドウでURL2を開く （URL2が指定なしなら別のウィンドウでURL1を開く） -加速度センサーを読み取らないほうが消費電力を抑えるかもしれないので割愛します。 方角の変位に変更しました。- 6. Download Shortcuts 6.1 Tilt Auto Scroll: Ver.1.0.0 2022/08/27 Ver.1.0.1 Scrollモードによるスクロールリングの色変更, 左右スワイプ逆 2022/09/27 Ver.1.1.0 広告ブロッカー搭載、"Auto Scroll"の速度可変、その他bugfix -https://www.icloud.com/shortcuts/f3458a7436f943f5b599ffcf3aed79cc- 2023/08/16 Ver.1.2.0 Android 対応、その他bugfix https://www.icloud.com/shortcuts/7c9324bb68fd43eda07863e6c15cf442 7. Related Sites 以下のサイト内のJavascriptコードを公開情報として利用させていただきました。 この場で、感謝申し上げます。 7.1 iOS（特に 13 以降）でのモーションセンサー有効化 : まだプログラマーですが何か？ https://dotnsf.blog.jp/archives/1076737232.html 7.2 JavaScriptで画面に触れずにページをスクロール！ - Qiita https://qiita.com/HIBIKI-CUBE/items/c391f37400664b719f52 7.3 Javascriptでコンパスを作ってAndroid、iPhoneが向いている方角を特定 ? One IT Thing https://one-it-thing.com/6555/ 7.4 iOS13+でジャイロ許可、やっぱりDeviceOrientationControlsを使いたい | 【公式】トカチニッチ https://tknc.jp/tp_detail.php?id=1116 7.5 CMONOS.JP | 開発者ブログ | 自動スクロールするブックマークレット https://cmonos.jp/blog/2013090200/1.shtml 7.6 【javascript】ページの高さにおけるスクロール量をパーセント（%）で表示 https://gxy-life.com/2PC/PC/PC20210825.html 7.7 マルチタッチ ウェブブラウザ向けの開発 - HTML5 Rocks https://www.html5rocks.com/ja/mobile/touch/ 8. Development environment iPhone 13 mini, iOS15.4, 15.6.1 xiaomi pad 6, Android Tablet 8.1 「JavaScript Anywhere JSAnywhere」をApp Storeで https://apps.apple.com/jp/app/javascript-anywhere-jsanywhere/id363452277 8.2 VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する | 己で解決！泣かぬなら己で鳴こうホトトギス https://onoredekaiketsu.com/minify-compression-of-javascript-and-css-with-vscode/ 8.3 Online JavaScript beautifier https://beautifier.io/ 8.4 Spck Editor / Gitクライアント 9. Bug? 画面の録画中に気づいた不具合です。 9.1 02:08 「ショートカット ユーザガイド」の「ようこそ」ページにおいて、スクロールリングを［ダブルタップ］すると「ショートカット15.5の新機能」ページの最下行へ移動してしまう。 → 9.2 02:09 下のアドレスバーの[ぁあ]をタップした？ → 9.3 02:39 「「WebページでJavaScriptを実行」アクションの概要」ページにおいて、右スワイプすると左半分スクロールしてしまう。 ○ 長いURLにより、横スクロールするページでした。 9.4 02:48 ［タップ］で折りたたみが開きにくい。（ 02:43 の開きは正常 ） → 9.5 03:07 左スワイプで前のページに移動したとき、ブックマークレットが読み込まれていない状態になる。 ○ ページをリロードしてしまう？ _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
. . . _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ 1. Note 1.1 はじめに -ショートカット内のJavascriptコードはブックマークレット化対応のため、 Visual Studio Code のJS & CSS Minifier プラグインで圧縮・軽量化（Minify）しています。 ★ Prettier - Code formatter プラグインで整形する（参照:8.2）かまたはオンライン上のbeautifier（参照:8.3） などで整形してコードを確認してください。- ソースコードをショートカット内で全部公開にしました。 [Ver.1.1.0] Android に対応しました。 [Ver.1.2.0] ★ コードの安全性について信頼できなければショートカットまたはブックマークレットを実行しないでください。 外部には、広告をブロックするためにGAS のデータベースからデータをGET リクエストしていますが、POST やPUT をしていないことを確認してください。 [Ver.1.1.0] ★ 全て自己責任でお願いします。 ※ センサーを働かせるため、バッテリーの消耗にご注意してください。 1.2 http://～ のURLは不可 -→ https://～に置き換えますが、ショートカット等をリロードしてください。 [Ver.1.1.0]- 1.3 Safari 以外のブラウザはブックマークレットを作成してください。 ショートカットよりブックマークレットの方が使いやすいと思います。 1.4【ブックマークレットの作成】 ショートカット内のJavascriptコードの先頭の長い１行をコピーし、任意のブックマークのURLに貼り付けてください。 そのブックマークの名前を"Tilt Auto Scroll"に編集します。 ブックマークレットは他のサイトのブックマークと区別するため、"Bookmarklets"フォルダを作成して入れてください。 1.5 整形したコードをショートカット内のコードに置換えても動作します。 プログラミングの知識があれば、設定角度や色・透明度などは容易に変更できると思います。 2. Usage 2.1 画面の下部に、"DeviceOrientation"ボタン表示→画面をタップ→ボタン消去 2.2 「"動作と方向"へのアクセスを求めています」のダイアログ画面表示 ☆ サイトごとにアクセス要求のダイアログ画面を表示します。 残念ですが、Apple の仕様です。（参照:7.1【iOS 13 以上での事前準備】） 2.2.1［キャンセル］ サイトをリロードしショートカット等をリロードしても再度［許可］することができません。 そのサイトのキャッシュを消去するか、または電源オフして再起動すれば回復します。 2.2.2［許可］ 3.1 "Tilt Scroll"モードで開始します。 一度[許可]すればキャッシュされますので、ショートカット等をロードする必要はありません。 ☆ しかし、サイトをリロードした場合はショートカット等をロードする必要があります。 この場合は、2.1 "DeviceOrientation"ボタン 2.2 のアクセス要求のダイアログ画面はでません。 2.3 広告ブロッカー搭載 [Ver.1.1.0] 3. 【Scrollモード】 3.1【"Tilt Scroll"モード】 ±3°以内で停止、 ±3°を超えて画面上部をこっちに傾けると↑スクロール（ページ下方向）、あっちに傾けると逆方向 ☆ デバイスの傾きに応じて加速度が変化します。（参照:7.2） 3.2 Scrollモードの切り替えは、トグルスイッチです。 -±60°-±45°(又は横±30° [Ver.1.2.0])を超えると"Auto Scroll"モードに切り替わります。 ☆ デバイスを少しひねる（手のひら返し）だけで-±60°を超え-、Scrollモードが切り替えられます。 アラートのOKをタップした角度が基準（オフセット）になります。 3.3【"Auto Scroll"モード】 従来の「自動スクロール」（参照:7.5）と同じ（上下のスワイプ量に応じた速度）ですが、 ☆ ±30°を超えると停止し、±3°以内に戻すとスクロール方向が反転する機能を追加しました。 ☆ ±20°～±30°で速度を加減（あっちで+25%、こっちで-25%）、±40°で反転（スクロール停止）、±20°以内に戻すとスクロール [Ver.1.1.0]、角度の変更（10°、20°、30°） [Ver.1.2.0] スワイプ速度を加減していますので、スクロール速度と一致はしていないと思います。 ☆ スクロール方向（速度加減量[%]）のトースト表示 [Ver.1.1.0] 4. 【スクロールリング】の操作 4.1［ドラッグ］移動できます。 下層のリンク先をタップする場合、広告などで隠れてしまう場合など邪魔なときはドラッグ移動してください。（参照:7.7） 4.2［シングルタップ］：非表示（透明）←→表示（トグル） ドラッグ移動と非表示（透明）により迷子になってしまうこともありますので、3.2 Scrollモードの切り替えで表示します。 4.3［ダブルタップ］ ：ページ最後にジャンプ ページ最後のときはページ先頭にジャンプ（画面上部のタップより高速で移動します。） 4.4［トリプルタップ］：コンパス画面表示←→非表示（トグル） -6.2 "Tilt Auto Scroll+ Alpha バージョンのみ搭載- 4.5 Scrollモードによる色変更 [Ver.1.0.1] 5. 【左右スワイプ】ページ内（左右端からでなくてよい） 5.1 -[戻る]: 左スワイプ←前のページがあるとき- -[進む]: 右スワイプ→次のページがあるとき- [Ver.1.0.0] [戻る]: 右スワイプ→前のページがあるとき [進む]: 左スワイプ←次のページがあるとき [Ver.1.0.1] 5.2 Drag & Copy bugfix [Ver.1.1.0] 5.3 お気に入りのページを開く（ -加速度センサー- ） [Ver.1.1.0] 左に速く振る→同じウィンドウでURL1を開く 右に速く振る→同じウィンドウでURL2を開く （URL2が指定なしなら別のウィンドウでURL1を開く） -加速度センサーを読み取らないほうが消費電力を抑えるかもしれないので割愛します。 方角の変位に変更しました。- 6. Download Shortcuts 6.1 Tilt Auto Scroll: Ver.1.0.0 2022/08/27 Ver.1.0.1 Scrollモードによるスクロールリングの色変更, 左右スワイプ逆 2022/09/27 Ver.1.1.0 広告ブロッカー搭載、"Auto Scroll"の速度可変、その他bugfix -https://www.icloud.com/shortcuts/f3458a7436f943f5b599ffcf3aed79cc- 2023/08/16 Ver.1.2.0 Android 対応、その他bugfix https://www.icloud.com/shortcuts/7c9324bb68fd43eda07863e6c15cf442 7. Related Sites 以下のサイト内のJavascriptコードを公開情報として利用させていただきました。 この場で、感謝申し上げます。 7.1 iOS（特に 13 以降）でのモーションセンサー有効化 : まだプログラマーですが何か？ https://dotnsf.blog.jp/archives/1076737232.html 7.2 JavaScriptで画面に触れずにページをスクロール！ - Qiita https://qiita.com/HIBIKI-CUBE/items/c391f37400664b719f52 7.3 Javascriptでコンパスを作ってAndroid、iPhoneが向いている方角を特定 ? One IT Thing https://one-it-thing.com/6555/ 7.4 iOS13+でジャイロ許可、やっぱりDeviceOrientationControlsを使いたい | 【公式】トカチニッチ https://tknc.jp/tp_detail.php?id=1116 7.5 CMONOS.JP | 開発者ブログ | 自動スクロールするブックマークレット https://cmonos.jp/blog/2013090200/1.shtml 7.6 【javascript】ページの高さにおけるスクロール量をパーセント（%）で表示 https://gxy-life.com/2PC/PC/PC20210825.html 7.7 マルチタッチ ウェブブラウザ向けの開発 - HTML5 Rocks https://www.html5rocks.com/ja/mobile/touch/ 8. Development environment iPhone 13 mini, iOS15.4, 15.6.1 xiaomi pad 6, Android Tablet 8.1 「JavaScript Anywhere JSAnywhere」をApp Storeで https://apps.apple.com/jp/app/javascript-anywhere-jsanywhere/id363452277 8.2 VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する | 己で解決！泣かぬなら己で鳴こうホトトギス https://onoredekaiketsu.com/minify-compression-of-javascript-and-css-with-vscode/ 8.3 Online JavaScript beautifier https://beautifier.io/ 8.4 Spck Editor / Gitクライアント 9. Bug? 画面の録画中に気づいた不具合です。 9.1 02:08 「ショートカット ユーザガイド」の「ようこそ」ページにおいて、スクロールリングを［ダブルタップ］すると「ショートカット15.5の新機能」ページの最下行へ移動してしまう。 → 9.2 02:09 下のアドレスバーの[ぁあ]をタップした？ → 9.3 02:39 「「WebページでJavaScriptを実行」アクションの概要」ページにおいて、右スワイプすると左半分スクロールしてしまう。 ○ 長いURLにより、横スクロールするページでした。 9.4 02:48 ［タップ］で折りたたみが開きにくい。（ 02:43 の開きは正常 ） → 9.5 03:07 左スワイプで前のページに移動したとき、ブックマークレットが読み込まれていない状態になる。 ○ ページをリロードしてしまう？ _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/