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

多言語対応・ブラウザ言語設定での切り替え・ローカライズについて

Published / by hihihi / Leave a Comment

ブラウザの言語設定で訪問時に言語を切り替えてって依頼が来たけど、これの最適解まとめたのってあんま見たことないなぁ〜

  • いろいろ手法があるけど、どれがえんやっけ
  • そもそもそれってほんとにユーザーにやさしいの?

って部分を説明する用にググってたら、グーグルさんが俺にも優しくしてくれないと検索結果にうまく出せないよって言い出した。

結論

忘れそうだからまとめておく。出し分けの手法メモったのは下の方に。

「振り分けするよりすなおにデフォルト言語で見せて選択させたげて〜。訪問時リダイレクトはグーグルさんが各言語クロールしづらくなるから、するならHTML リンク要素:hreflangとx-defaultの設定をしてかつ、クローラーがクロール可能なようにしてね。」

<link rel="alternate" hreflang="ja" href="http://ja.example.com/" />
<link rel="alternate" href="http://example.com/" hreflang="x-default" />

っってまとめた後になんやけど
下記SONICJAMさんの記事にわかりやすくほぼ全部書いてありました。(クローラーの事以外。おれの小一時間・・・・!)
素敵すぎますね。
みなさんこちらをご覧になればよいかと〜↓

WEBサイトの多言語化において考えるべきこと | ビジネス・戦略・サービス | BLOG | 株式会社ソニックジャム
http://www.sonicjam.co.jp/blog/strategy/001587/

以下調査内容知りたい方のみどうぞ〜
(さらに…)

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の部分を一括置換で変更できる。
(ご利用は自己責任なやつです)

可変グリッド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日

gulpでちょっとバベって見ようと思ったらコケた

Published / by hihihi / Leave a Comment

世界は回り続けるのです

そろそろesで書くかとbabel入れたら、変換がうまく行かなかった。

gulp + Babelの環境をつくる

ES6 で書く環境を作る(gulp + Babel 編) – Qiita
https://qiita.com/hkusu/items/9b312274b3ff2913e15b
↑記を参考に

$ npm install --save-dev gulp-babel

してgulpfile.jsで処理を通しても変換されず・・・なぜ、とおもっていたら

javascript – babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう – スタック・オーバーフロー
https://ja.stackoverflow.com/questions/31664/babel%E3%81%A7%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB%E3%82%92%E3%81%97%E3%81%A6%E3%82%82%E5%85%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%81%BB%E3%81%BC%E5%90%8C%E3%81%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86

readmeをよんでねって。
https://www.npmjs.com/package/gulp-babel

インストールもいっこ必要やった。

$ npm install --save-dev gulp-babel babel-preset-env

そしてgulpfile.jsで指定するpresetsの値が変わっていた

presets: ['env']

結局こうなった

/**
 * babel:test
 */
$.gulp.task('babel', function() {
        console.log('babelchange watched');
  $.gulp.src(PATH.develop + 'assets/es6/**/*.js')
    .pipe($.babel({
      presets: ['env']
    }))
    .pipe($.gulp.dest(PATH.develop + 'assets/js/'));
        console.log('babel');
});

とりあえずとおった。