カテゴリー別アーカイブ: js

いつかやってって言われそうなエフェクトメモ

Published / by hihihi / Leave a Comment

いつかやってって言われそうだから調べたやつ、すぐわすれるメモ。

Ripple Effect

クリックしたところが波紋のように反応するgoogleさんが大好きなやつ

クリックで波紋を出すエフェクト(Ripple Effect)実装メモ – Qiita
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c
(さらに…)

多言語対応サイトでは訪問時にどうサイトを表示させるのが良いだろう?

Published / by hihihi / Leave a Comment

タイトルまんま。

ええっと、表示方法や出し分け方法っていろいろ手法があるんやんな、どれがえんやっけ。今まで悩んだこと無いの、なんでやっけ。

サイトで多言語対応するにあたっての、ブラウザ言語設定での切り替え・出し分け・ローカライズ(?)に関する考察。

ユーザーにとってほんとに良いのはどういう挙動だろう?

これの最適解まとめたのってあんま見たことないなぁ〜と思ったので、時間出来たので調べてみました。そして調べる最中頭こんがらかったり、情報整理する必要が出たりしと挫折しそうになったので、同志のために記事にまとめました。あかんところあったらゆーて下さい。

頭に浮かんだ手法羅列

  • いったんデフォルト言語で出してユーザーが必要に応じてボタンなどから切り替え
  • URLのクエリで言語設定して該当言語のコンテンツをPHPでインクルード
  • ブラウザ言語設定を参照して該当言語のコンテンツを格納したページへリダイレクト
  • ブラウザ言語設定を参照してajaxでコンテンツをページ内で出し分け
  • PHPロケール情報から判定
  • 各言語ページの一個上の階層に親ページを用意して選択
  • 文字サイズボタンみたいにcookieで記憶させといて2回目以降訪問時に出し分け
    「コンテンツの表示の仕方」と「ユーザー言語の判定の仕方」と「ディレクトリ(URL)の作成方法」の問題が全部ごっちゃになってますが、いったん羅列、です。

結論

訪問時は特に出し分けはしない、もしくはサイトTOPへの初回訪問時のみブラウザ言語設定の言語のコンテンツを表示させるなどする(手法はJSでもPHPでも。)

サイト内に言語の切り替えボタンは必須。そこからユーザーの意志で各言語に行き来出来るようにする

最終で見ていた言語をcookieで保持しておいて次回訪問時にコンテンツをajaxで出し分け、とかもできればしない。(ユーザーが意図せぬ挙動となる可能性・検索結果が最適化されない問題)

ディレクトリ等コンテンツ自体を各言語で作成し、URLさえ叩けば目的言語のコンテンツに行けるようにするのが吉。

以上。一般的にはこうかと。もちろんコンテンツの内容や構成、目的によって例外もあり。理由は次項「理由」にて。

ex)
日本語
https://example.com/
https://example.com/about/
↑↓(※共通パーツとして各言語間を行き来出来るボタンをサイト内の目立つ位置に置く)↑↓
英語
https://example.com/en/
https://example.com/en/about/

一番単純なのが吉ってことですね。

今まで悩んだこと無いのは最適と思われる形が単純なものだったからか。

出し分けの具体的な手法メモったのは下の方に移動しました。ほんとは真っ先に調べたんだけど。
記事書いていろいろ情報をたどる間にいろいろ変にいじんないほうが良さそうだなーってなったので。

理由

サイトの情報を利用するのはエンドユーザーだけではないから。検索エンジンのクローラーに正しい情報を提供する→エンドユーザーを適切なコンテンツへ導く手助けにもなるよねって話。

(さらに…)

node nodebrew 更新 エラー

Published / by hihihi / Leave a Comment

npxが動かなかったのでnode.jsを更新

しようとしたらできなかった

一旦nodebrewをインスコし直し

nodebrewでinstallが失敗するようになった – Qiita
https://qiita.com/shimitei/items/7975bc1b60cfb477817e

$ curl -L git.io/nodebrew | perl - setup

nodebrewをインスコし直し!
ここにたどり着くのに一時間かかった。
通ってよかった!

nodebrewで手軽にnode.jsバージョンアップ&バージョン切り替え – Qiita
https://qiita.com/strsk/items/db64f4dd27484a875d20

ちな確認と更新

$ nodebrew ls-remote
$ nodebrew install-binary v9.11.1
$ nodebrew use 9.11.1

ちなnode最新情報
Node.js
https://nodejs.org/en/blog/

swiperのデフォルトprevnextのSVGのfill色を変える。

Published / by hihihi / Leave a Comment

あ、出来るんや、っておもったからめも。
DLしたswiperのcssをいじる
.swiper-button-next
.swiper-button-prev
のbackgroundに指定されているsvgのbase64URLの下記部部分を変更
fill%3D’%23007aff

007affが色コードなので
赤にしたければ

fill%3D’%23ff0000

に変更。
同様にbulletの色も007affの部分を一括置換で変更できる。
(ご利用は自己責任なやつです)

グレースケールのGoogle Mapsのピンのアールが最近ジャギる

Published / by hihihi / Leave a Comment

のでスタイルのカスタム内容を変更しました

具体的にはスタイルに関して渡しているパラメータを変更
エレメントに個別で指定していたスタイル→全体を上書きするように変更。
コレによって、スタイルがあたってたりあたってなかったりで
うまく上書き出来てなかったりボーダーがジャギったりするのを回避できるようになりました。
記事下部の参考サイトなんかを参考に。数値はお好みで。
個別にカスタムするより、こっちの全体を変更するほうが今までのよりきれい
ただし全体にかけているので、個別で色調をぜんぜん違うものに変更するなら今までどうりエレメントにスタイルを指定する必要ありんす。

stylers: [
    { hue: "#e0dcd1" },
    { lightness: -5 },
    { saturation: -90 }  //彩度
]

参考サイト

マップのスタイル設定を開始する  |  Google Maps JavaScript API  |  Google Developers
https://developers.google.com/maps/documentation/javascript/styling?hl=ja

Google Maps APIを使って地図をカスタマイズする | style01

Google Maps APIを使って地図をカスタマイズする

投稿日:2018年2月25日

可変グリッドjs

Published / by hihihi / Leave a Comment

Masonry以外のもの久々に調べた

ドラッグできるよって

【JavaScript】超高機能なグリッドレイアウトを実装する[Packery]はドラッグによる並べ替えにも対応! – ONZE

【JavaScript】超高機能なグリッドレイアウトを実装する[Packery]はドラッグによる並べ替えにも対応!

お金掛かるよって

【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。 – ONZE

【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。

Isotope
https://isotope.metafizzy.co/

お金掛からないけど開発中だしバグとかシラネって

Masonryより高機能!フィルタ、ソート、レスポンシブ対応のグリッドレイアウト「Muuri.js」 | WordPressテーマ/DigiPress

Masonryより高機能!フィルタ、ソート、レスポンシブ対応のグリッドレイアウト「Muuri.js」

Masonryと上2つは同じ開発者だって。へぇ!

Ajax通信と画像のアップロード

Published / by hihihi / Leave a Comment

FormData使わなあかんのですね。。知らんかった。

jQuery Ajaxでファイルを送りたい! – かもメモ

processData: falseとcontentType: falseがポイントの様です。

new FormData()する時にformを渡してやると
form.submit();した時と同じ様に
フォーム内のデータがnameとvalueのセットでそのまま送信されます。

JavaScript – 【jQuery】FormDataの中身をコンソールで確認したい(59822)|teratail
https://teratail.com/questions/59822

フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版) – Qiita
https://qiita.com/kon_yu/items/f98df7ac826e7c36cc6c

$(function(){
  //画像ファイルプレビュー表示
  $('form').on('change', 'input[type="file"]', function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $preview = $(".preview");
        t = this;

    // 画像ファイル以外の場合は何もしない
    if(file.type.indexOf("image") < 0){
      return false;
    }

    reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
                  src: e.target.result,
                  width: "150px",
                   class: "preview",
                  title: file.name
              }));
      };
    })(file);

    reader.readAsDataURL(file);
  });
});

あとひさびさ
JavaScriptメールアドレスチェッカー: 小粋空間
http://www.koikikukan.com/archives/2014/09/18-003333.php

【memo】今週のおバグさんとか

Published / by hihihi / Leave a Comment

ホバー時にgifアニに切り替えるとChromeで止まる

Gif画像のリロード問題 – Qiita
https://qiita.com/RuriKameoka/items/dfc2ef45a85221ccc4b1

ロールオーバーで画像切り替え レスポンシブイメージ編 – Qiita
https://qiita.com/hibikikudo/items/95376b5134023811a9c1

忘れがちなやつ

max-widthのリセットはautoではなくinitialを使う – Qiita
https://qiita.com/volkuwabara/items/90654ed6bb81c2b8cdaf

Google が提供する日本語 Web フォント – Qiita
https://qiita.com/shotets/items/502f8093d53369eaab50

forループの中でsetTimeoutしたらiはどうなるか – console.lealog();

Swiperのautoplayがフリック後も止まらないようにする

Published / by hihihi / Leave a Comment

ユーザーアクション後も止まらないようにするには指定が必要

大事。
autoplayDisableOnInteraction:false,

autoplay: { delay: 2500, disableOnInteraction: false, },
もあるけど、こっちはなんかマルチスライドだとバグったので上の記法で回避。

Swiperのページネーションクリック後の動作について – Sketch & Jump

投稿日:2018年1月15日