Fly higher! Sky is the limit!

webの現場で働く人のブログ

【JavaScript】jQueryのthisを生のJSで表現してみる。

jQueryのthisって便利だよね。

これに対するこれって感じでめっちゃ便利だけど、生のJSで実装する場合、
どうしたらよいんだろうかということで、書いてみた。

知人がつくったALT FRIENDSというページを基に書き換えてみる。

ALT FRIENDSは、画像に対して右クリックを押すとaltが表示されるという、画期的なページです。
これはjQueryで実装されているので生のJSに書き換えてみる。

元ページ

See the Pen ALT FRIENDS by Nasu Alipey (@alipeyoff) on CodePen.

JSの記述

$(document).ready(function() {
  //入力
  var $clickMeElement = $('#haltest img');
   //クリック動作
    $clickMeElement.bind('contextmenu',function() {
    $imgAlt = $(this).attr("alt");
        alert($imgAlt);
    });
});

#haltest img を定義し、バインドさせ該当の画像の上で右クリックをしたら、alt値を取得しアラートを出す。

thisってやっぱり便利ですね。

これを書き換えていきます。

JSの記述

const IMG = document.querySelector("#haltest");
IMG.addEventListener("contextmenu", function(e){
  if(e.target.alt !== undefined){
      alert(e.target.alt);
   }
});

jQueryのthisは、生のJSでは使用できないのでまず、親要素を指定しています。
親要素内で右クリックを押して、もしalt値があれば(=画像)でalt値を取得しアラートを出す。

これで完成!!

書き換えたもの(フォーク)

See the Pen ALT FRIENDS by paradox_tm (@takumaro-web) on CodePen.

これくらいの処理であれば、重いjQueryを読み込むよりもクッソ処理は高速になるかなーと思います。

それでは。

Smooth Scroll (スムーススクロール)、Androidで重い問題。

あけましておめでとうございます!
一発目の記事です。

ということで本記事のタイトル通り、【Smooth Scroll(スムーススクロール)、 Androidで重い問題】についてみていきたいと思います。
よろしくお願いします。

以下のサイトのソースを基にみていきたいと思います。

techacademy.jp

引用ソース

$(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から携われたり、大分有効な時間を過ごした気がする。

あ、そうだ。 去年のブログから...目標を確認をしてみよう...。

paradox-tm.hateblo.jp

なるほど。。そんなことを考えていたのか自分は。

2017年の目標を振り返って

英語について

やっぱり、外国人とコミュニケーションをとりたい!という理由だけだとモチベーションが持続しないなぁ~。と言い訳...。
環境のせいにしたくないけど、英語しか使わない環境にいっそのこと足を踏み言えれて自分を追い込みたい気分ではある。

ただ、ハワイに行く機会があり現地の人に自分がつくったステッカーをあげたり、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.

各種ブラウザ対応状況

https://kangax.github.io/compat-table/es6/

最近見つけた超カオスなユーザーエージェント

最近みつけた超カオスなユーザーエージェントがある。
それがこれだ。

カオスなユーザーエージェント

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]セキュリティ警告を出すようになるらしい。

Googleからこんな通達が届いた。

2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。

SSL環境だと安全でないと判断されるようになるようだ。

セキュリティの観点から個人情報やパスワードとかプライベートな情報を送信するページであったら、 入力した情報がハッカーに盗まれないように警告が出るのはありがたいけど、なぜ検索フォームでも出るようになるんだろうか…。

f:id:paradox_tm:20170825171332p:plain

f:id:paradox_tm:20170825171415p:plain

ブラウザの仕様とはいえ、仕方がないが今後HTTPS 移行は避けられなさそう。

尚、 Chrome ブラウザの仕様変更なので、検索アルゴリズムの影響はない模様。

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法(Tweet Gridの使い方)

「Tweet Grid」が発表になったのは2015年でかなり今更感あるけどあんまり日本語記事が出てこないので備忘録としてまとめておきやす。

「Tweet Grid」とは?

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法。
カスタマイズ可能で見た目も美しい。

サンプルを見たほうが早いので以下のDemoページで確認ください。
https://codepen.io/takumaro-web/full/LjpWpg/

手順

  1. TweetDeckにログインする。
    https://tweetdeck.twitter.com/
    ツイッターのアカウントとパスワードが必要
  2. 左側のメニューの一番下の「+」を押す。
    f:id:paradox_tm:20170728150543p:plain

  3. 「Choose a column type to add」の中から「Collection」を選択

  4. 「+ Create collection」を押す

  5. 「Name」と「Description」を適当に入力(省略可)

  6. 画面上に新しいカラムが表示されるので表示させたいツイートを検索してドラッグ&ドロップ
    f:id:paradox_tm:20170728151034p:plain このボタン押しながらドラッグ&ドロップ

  7. 上のメニューボタンを押して「Share」→ 「View on twitter.com」を選択
    f:id:paradox_tm:20170728151132j:plain

  8. Twitter画面が立ち上がるので表示されたURLをコピー!!

  9. https://publish.twitter.com/ こちらにアクセスし8でコピーしたURLを貼り付ける。

  10. Copy Codeでコードをコピーし、Webサイト上に貼り付けて完了。
    ※ set customization optionsで変更してもよい。

表示させたいツイートを変えたい場合は、TweetDeck上で編集すればよいから非常に楽だ。
是非、お試しください。