Smooth Scroll (スムーススクロール)、Androidで重い問題。
あけましておめでとうございます！
一発目の記事です。
ということで本記事のタイトル通り、【Smooth Scroll(スムーススクロール)、 Androidで重い問題】についてみていきたいと思います。
よろしくお願いします。
以下のサイトのソースを基にみていきたいと思います。
引用ソース
$(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });
このままだと一部、Androidでスムーズに動かないことがあります。（iPhoneは比較的スムーズ）
例えば、画像リンク→ページ内遷移（スムーススクロール）→ページ下部へみたいな動きのときはもっさり感が半端ない。
原因と解決策
なぜこんなにもっさりしているのか...
それは..
Click イベントを使ってるから！
前も言ったかもしれませんが（言ってないかもしれません）モバイルブラウザにおけるclickイベントってかなり重いです。
理由は、Touchイベント,Mouseイベント,Keyboardイベントなど、これらのイベントをすべてclickイベントでは、網羅してしまっているからです。
結果、処理に時間がかかってしまうんですねー。
逆にアクセシビリティ対応をするのであれば、clickってかなり便利だったりするけど...。
（それぞれの処理に対してハックする必要がないので）
解決策ソース：モバイル向け！
$(function(){ // イベント登録 $('a[href^="#"]').on('touchstart touchmove touchend', function(event){ // タッチスタートでフラグを設定 if ('touchstart' == event.type){ $(this).attr('data-touchstarted', ''); return; } // タッチムーブが発生したら、フラグを消す。(タップと判定させない為) if ('touchmove' == event.type){ $(this).removeAttr('data-touchstarted'); return; } // タッチエンド時にフラグがあれば、タップと判定する。 if ('undefined' != typeof $(this).attr('data-touchstarted')){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top - 20; $("html, body").animate({scrollTop:position}, speed); // フラグを削除 $(this).removeAttr('data-touchstarted'); return false; } }); });
touchstart touchmove touchendをそれぞれバインドさせ、
タッチスタート＝タッチエンドの時をユーザーがタップしたと判定させ動かしています。
結構、昔から使っている手法だけど、改めて共有ということで...。
PCに対応させたいときは、UA判定で分けてもいいかもですね。
それでは、この辺で。
2017年を振り返って。
PCの前で瞬きをしていたら、あっという間に2017年が終わってしまいました。
皆様いかがお過ごしでしょうか。
今年もざっくりこの1年間を振り返ってみたいと思います。
2017年のできごと。
組織の変更によりフロント側の人間へ。
今までは制作メインだったけど組織の変更があり、フロントに立つ事が多かった1年だった。
プロジェクトの管理・立ち上げ・企画・制作・提案・ディレクション...最初の頃は色々苦悩があったなぁ..。
自分の意見を言っていいのかどうなのかと自問自答したり、進行管理がうまくできなくて悩んだり..
制作もディレクションも両方できるにこしたことがないし、今後もその能力については高めていきたいと思う。
個人の活動では、知り合いのデザイナーさんに案件を振っていただいたり、
某コミュニティのリニューアルに0から携われたり、大分有効な時間を過ごした気がする。
あ、そうだ。 去年のブログから...目標を確認をしてみよう...。
- 英語： △
- 自分のポートフォリオサイトの開設：×
- アドベントカレンダーへの参加：×
- オリジナルのステッカーをつくる：×
- 家にBARをつくる：×
- LINEスタンプの作成：×
なるほど。。そんなことを考えていたのか自分は。
2017年の目標を振り返って
- 英語： △
- 自分のポートフォリオサイトの開設：×
- アドベントカレンダーへの参加：×
- オリジナルのステッカーをつくる：◎
- 家にBARをつくる：×
- LINEスタンプの作成：◎
英語について
やっぱり、外国人とコミュニケーションをとりたい！という理由だけだとモチベーションが持続しないなぁ～。と言い訳...。
環境のせいにしたくないけど、英語しか使わない環境にいっそのこと足を踏み言えれて自分を追い込みたい気分ではある。
ただ、ハワイに行く機会があり現地の人に自分がつくったステッカーをあげたり、SNSで友達になれたのはよかった。
自分のポートフォリオサイトの開設
これやるやる言っててできてないやつ。。
来年は本気出そう。
アドベントカレンダーへの参加
不覚にも気付いたら、終わっていたという。。
別プロジェクトで忙しかったのでしょうがない。。。と言い訳...。
オリジナルのステッカーをつくる
これは実現した！来年は、もっとつくっていきたいし、いろんな人にプレゼントしたいなぁー。
家にBARをつくる
あ～これもできてないなー。。。なんか別にもういっかなーって感じでw
LINEスタンプの作成
こちらは実現できた！！来年も2～3個は、つくっていきたい！
2018年の目標
- 自分のポートフォリオサイトの開設
- ブログを12ヵ月分ちゃんと書く！
- セミナー・勉強会の主催・実施！
- オリジナルのステッカーをつくる！
- LINEスタンプの作成！
- 他業種への技術支援！
- 個人の活動の充実！
- コネクション強化！
- アドベントカレンダーの参加！
- 技術力向上・マネジメント力の向上！
おかげ様で購読者も5人→11人へとなりました。
ありがたいことです。
今後とも宜しくお願い致します。
ではよいお年を。
もうclassの付与とか剥奪ならこんなに短くかけるのか。
すみませんッ！ブログさぼってました。
今回も大した内容ではないですが、メモです。
もうclassの付与とか剥奪だけならこんなに短くかけるのか
ということでソースとDEMOです。
ソース
let btn = document.querySelector('.btn'); btn.addEventListener('click', function(e) { btn.classList.toggle('active'); });
DEMO
See the Pen BmOGBW by paradox_tm (@takumaro-web) on CodePen.
各種ブラウザ対応状況
最近見つけた超カオスなユーザーエージェント
最近みつけた超カオスなユーザーエージェントがある。
それがこれだ。
カオスなユーザーエージェント
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; touch; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; tablet pc 2.0; rv:11.0) like gecko
なんということでしょう。
Windows10でIE11なのに“touch”端末でしかも“tablet”であり“pc”である。
おいおいおい。マジかよ。
正気じゃねぇーぜ兄貴。
条件分岐を増やせば、出し分けができるかもしれないけどもうここまできたらユーザーエージェントによるコンテンツの出し分けはやめて、すべてレスポンシブ対応にしましょう！
ちなみに以下の端末っぽい。
https://www.amazon.co.jp/HP-x2-210-P5U14AA-ABJ/dp/B01MYD7RWW
［Chrome］セキュリティ警告を出すようになるらしい。
好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法（Tweet Gridの使い方）
「Tweet Grid」が発表になったのは2015年でかなり今更感あるけどあんまり日本語記事が出てこないので備忘録としてまとめておきやす。
「Tweet Grid」とは？
好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法。
カスタマイズ可能で見た目も美しい。
サンプルを見たほうが早いので以下のDemoページで確認ください。
https://codepen.io/takumaro-web/full/LjpWpg/
手順
- TweetDeckにログインする。
https://tweetdeck.twitter.com/
※ ツイッターのアカウントとパスワードが必要 左側のメニューの一番下の「＋」を押す。
「Choose a column type to add」の中から「Collection」を選択
「＋ Create collection」を押す
「Name」と「Description」を適当に入力（省略可）
画面上に新しいカラムが表示されるので表示させたいツイートを検索してドラッグ&ドロップ
※
このボタン押しながらドラッグ&ドロップ上のメニューボタンを押して「Share」→ 「View on twitter.com」を選択
Twitter画面が立ち上がるので表示されたURLをコピー！！
https://publish.twitter.com/ こちらにアクセスし8でコピーしたURLを貼り付ける。
Copy Codeでコードをコピーし、Webサイト上に貼り付けて完了。
※ set customization optionsで変更してもよい。
表示させたいツイートを変えたい場合は、TweetDeck上で編集すればよいから非常に楽だ。
是非、お試しください。
node.jsのアップデートとかnpmとか
手順１：nodistのインストーラー
https://github.com/marcelklehr/nodist/releases/
環境変数の設定とかすべてやってくれるので最新版をインストールすればOK。
めっちゃ楽だ。
nodistとは
Windowsでnode.jsのバージョン管理をするのに便利なやーつ。
コマンド
アップデート
nodist update
最新の安定板をインストール
nodist stable
インストール可能な node バージョンを確認
nodist dist
node.jsの最新バージョンを表示
nodist latest
指定バージョンのnode.jsをダウンロード
nodist add v6.11.1
切り替え
nodist use v0.10.32
一覧を表示
nodist ls
npmのバージョン指定
nodist npm 5.x
手順2：npmの指定
node - v でバージョンを確認してnpmを使えると思いきや、使えないのでnpm のバージョンも指定してあげる。
npmのバージョン指定
nodist npm 5.x
最新版を指定したければ、npmのバージョンを指定後に以下のコマンドを叩く。
npm install npm
とりあえず、これでアップデート完了！！
ってかnodeのバージョンの最新版って、v8.1.4 なのｗ（2017年7月現在）
手順3 既存プロジェクトで使用しているgulpとか動くか確認
大体動かないので、npm init からすべていれ直す。
Local gulp not found が出た時の対処法
npm link gulp
Node Sass could not find a binding for your current environmentが出た時の対処法
npm rebuild node-sass
Could not read response for https://nodejs.org/dist/index.jsonが出た場合
$ set HTTP_PROXY=http://proxy.server.co.jp:8080
ホスト名の proxy.server.co.jp は自分の環境にあわせて編集
ポート番号の 8080 も自分の環境にあわせて編集
エディターのコマンド/ターミナルは使うな。
PCに入っているコマンド・ターミナルから使うと動く。エディタのやーつだとエラーを吐き出す可能性あり。
参考
http://qiita.com/yokoh9/items/20d6bdc6030a3a861189 http://qiita.com/shika358/items/0be01167d02c1abec186
