【javascript】ifにするぅ?switchにするぅ?そ・れ・と・も

【要件】
受け取った animal_id に応じて、以下のとおり表示したい。

animal_id 表示名
1 cat
2 dog
3 lion
4 panda
5 giraffe

はい。きっと最初に思いつくのがif文による分岐ですよね。
続きを読む

カテゴリー: JavaScript | コメントする

アプリのバッジ数などに使える小技

今日はアプリのバッジ数をつける時なんかに使うであろう小技を紹介。

何かから未読数とかを受け取って表示するケースを考えますが、
「100以上なら99と表示したい」なんてこと、よくありますよね?

真面目な皆さんはこんなコードを書くかもしれません。


console.log(num);  // 120

if(num > 99) {
  num = 99;
}

console.log(num)  // 99

はい、これでOKです。
期待通りに動きます。

でも今日頭のいい人のコードを読んでて感動したので紹介します。

console.log(num);  // 120

Math.min(num, 99)

console.log(num)  // 99

はいこれだけ。

Math.min()は、引数の中から最小のものを返してくれる関数ですね。
言われてみれば当たり前なんですが、こういうところでコーディングのセンスの差がでますよね〜。

(まあ、実用上は100以上の時は 「99+」 なんて表記するために+をつけなきゃいけないから、結局どこかでif文書いたりすることが多いんでしょうけどね。)

カテゴリー: JavaScript | コメントする

【Javascrip】配列の .reverse() に気をつけろ!

こんばんは。
たかきです。

今日もjavascriptを書いております。
みなさんも書いてますか?

配列、使ってますか?
使ってますよね。

array に .reverse() って使ったことありますか?
そう、配列を逆順にするあれですね。

var arr = [0, 1, 2, 3, 4];
var arrRev = arr.reverse();
console.log(arrRev); // [4, 3, 2, 1, 0]

そう、こんな関数ですね。
続きを読む

カテゴリー: JavaScript | コメントする

jQueryでセレクタに属性を指定するときに気をつけること

自分がはまったのでメモを兼ねての投稿。

<div class="fade-in slide-in diary">
  なんか文章なんか文章なんか文章
</div>

<div class="fade-out diary">
  なんか文章なんか文章なんか文章
</div>

こんなhtmlがあったとして、jQueryで fade-in クラスを選択したいとします。

$(".fade-in");

はい、もちろんこうですね。
そうです、class属性は “.”(ドット)で指定できます。

じゃあ、今度は fade- で始まるクラスをすべて選択したくなったとして、一旦属性を指定する方法で、class=”fade-in”を指定してみましょう。
以下が自分が犯したミス。

$("[class='fade-in']") // 返り値なし 

一見同ものが返りそうですが、違います。
[class=””] は完全一致したものが返ります。
つまり、この一個目の div は、

$("[class='fade-in slide-in diary']") // ヒットする
$("[class='fade-in']") // ヒットしない

なのです。

カテゴリー: JavaScript | コメントする

macでgulp-ruby-sass が動かない時に読んでみる記事

こんばんは。gulp-ruby-sass、使ってますか?
便利ですよね。
自宅mac(10.9)でgulp-ruby-sassを走らせようとしたら、

OptionParser::NeedlessArgument: needless argument: –sourcemap=none

と表示されてしまってエラーになってしまいました。

gulpfile.jsのsassに関係するところはこんな感じ。

gulp.task('sass', function() {
  return sass('gulp/sass/**/*.scss')
    .pipe(plumber())
    .pipe(pleeease({
        autoprefixer: {
            browsers: ['last 2 versions']
        },
        minifier: true
    }))
    .pipe(gulp.dest('www/htdocs/css'));
});

…なにもおかしくない。

なぜだ。

はい、実はgulp-ruby-sassは sass のバージョンが 3.4 以上でないと動かないようです。

この記事を読んでいる方はきっとgulp-ruby-sassで困っているでしょうから、一緒に調べてみましょう。

$ sass -v
Sass 3.2.19 (Media Mark)

はい古いですね。

では、アップデートしましょう。

$ sudo gem update --system

これでgemが最新化されます。

Latest version currently installed. Aborting.

と表示された場合は既に最新です。このままでOK。

からの、

sudo gem uninstall sass

そして

$ sudo gem i sass
Fetching: sass-3.4.21.gem (100%)
Successfully installed sass-3.4.21
Parsing documentation for sass-3.4.21
Installing ri documentation for sass-3.4.21
1 gem installed

どうだ、うまく行ったか!?

$ gulp sass
[00:07:05] Using gulpfile ~/Documents/test/npm_lesson/gulpfile.js
[00:07:05] Starting 'sass'...
[00:07:05] Finished 'sass' after 250 ms

やった!うまく行った!
今日これにハマったので忘備録を兼ねて。

stack overflowに感謝。
stackoverflow.com/questions/28683069/new-gulp-ruby-sass-alpha-task-failing

カテゴリー: front-end, JavaScript, Work | コメントする

Xcode7がインストール出来ない時に読む記事

こんばんは、たかきです。

この度私物MacBook Air(13-inch 2012 Mid)をEl Capitanにアップデートしたのですが、Xcodeをバージョン7にアップデートしようとすると、

Xcodeをダウンロードできませんでした
“購入済み”ページからダウンロードし直してください。

というアラートが出てアップデート出来ませんでした。
その時に試したことを紹介します。

Cdgy6q6UMAAuN7k.jpg-large

症状
ダウンロードの途中で上記アラートが出てアップデートが完了しない

やったこと
Macを一度セーフモードで立ち上げる

こんな場合に試してください
ストレージ不足で一度アップデートに失敗したことがある場合

解説っぽいこと
Xcodeのアップデートには4GBくらいのストレージの余裕が必要です。
十分な空きが無いことに気づかずアップデートを始めてしまい、空き容量不足で一度エラーを経験すると、その後ストレージを十分に空けてもアップデートができずに上記のアラートが出続けます。
Wi-Fiの環境が悪いのかなとも思い自宅や会社で試しても同じく失敗しました。
実はこの時、Xcodeのゴミファイルがシステムにキャッシュされているようで、これが悪さをしていた模様。
セーフモードで起動するとこのようなキャッシュファイルを削除してくれます。
不具合がない時でも定期的にセーフモードで起動するとMacを綺麗に保てるという人もいます。
ちなみに、今回失敗を繰り返した時のストレージの空きは13G、セーフモードで一度起動した後は16Gになっていました。

環境
ハード: MacBook Air 2012 Mid 13-inch
OS: Mac OS X El Capitan
新Xcodeバージョン : 7.2.1
試した日: 2016年3月16日

カテゴリー: Apple, Work | コメントする

【jQuery】あとづけする要素に .on() する方法

今日サーバーサイドエンジニアにjQueryの相談をされて調べ物をしていたら面白い書き方を見つけたので共有しますね。

append したものにクリック判定を当てたい場合ってよくありますよね。
今日はこんなケースを見てみましょう。

<div id=”parent”> が置かれていて、2秒待つと #parent の中に <div id=”child”> がアペンドされる。#child をクリックするとアラートが出る。

早速悪い例から。

See the Pen BKNbyb by Takaki Hiemno (@takaki1216) on CodePen.
↑jsを見てみてください。

$('#child').on();

このときにまだ <div id=”child” /> のDOMが生成されていないので、 .on() が bind されないんですね。
で、次のが今日知った書き方。

See the Pen LNVaxQ by Takaki Hiemno (@takaki1216) on CodePen.

$('#parent').on('click', '#child', function() {
alert('You touched me!');
});

これね。1.7から採用されたっぽいですね。
詳しくはここ読んでね。event-delegation って言うのかな?イベントの委譲?
api.jquery.com/on/

カテゴリー: JavaScript, jQuery | コメントする

Panasonic の電動自転車のバッテリーが充電できなくなった時の対処方法例

いつものように充電しようと充電器にバッテリーを差し込んだ時、事件は起こった。

子供(2才)が充電器の端子部分に巨大なゼムクリップを置いてしまっていたようで、それに気づかずに差し込んだところ、火花が散り充電ができなくなってしまった。

充電器に挿すといつも光るLEDが点灯しなくなってしまったのだ。

今日はこのバッテリーを自力で修理した話をする。

我が家の自転車のバッテリーはパナソニックの「NKY452B02 / Li-ion / 25.2V-13.2Ah」という製品。

すぐに購入店舗にバッテリーを持って行き事情を説明するも「いやぁ、新しいの買うしかないっすね〜」と。

途方にくれながらネットで「Panasonic 電動自転車 バッテリー 充電できない」などと検索すると、ヒューズ交換で済んだというブログを見つける。

それならとメーカーのPanasonicカスタマーセンターに電話するも、修理は受け付けておらず買い換えるしかないとのこと。

…。

ならばダメ元で分解してみよう、と立ち上がったのが今回の話。

まずネジはプラスやマイナスのものではなく、星形なので専用のドライバーが必要である。


以前にiMacを開ける必要があった時に買ったこちらのドライバーを使用した。
IMG_7355
蓋を開けるといきなりヒューズを発見。なるほどこれを交換すれば。

ところが驚いたことにこのご時世、平型ヒューズなどどこにも売っていないのだ。
ホームセンターや街の電気屋さんを何件か回ったが手に入らなかった。
結局、オートバックスで買うことができた。これを読んだ方で同じく平型ヒューズが手に入れられないという人がいたらカー用品店に行けばあるかもしれない。
150円出せばお釣りが来るような価格で2個買える。

しかし、後にわかるところなのだが、この緑(30A)のヒューズは充電に関係ない
このヒューズを交換し意気揚々と充電器に挿した時の期待感と、LEDが点灯しないことがわかった時の絶望感の高低差たるや。

やはりヒューズ以外の原因で壊れているのか。
もっと詳しく調べる必要があるとケースから中身を取り出してみると
IMG_7373
側面に別のヒューズを発見(写真はヒューズを抜いた後のもの)。

恐らく防水のため、バッテリーの中身が更にビニールの袋に包まれていたのでそれをソムリエナイフで丁寧に開け、こちらのヒューズを見てみると、

IMG_7371
絶対にこれが原因だ。中が焦げて切れているのが目で見てわかる。

後はもう面白い話はなにもなく、これを交換してビニールテープで袋の穴を閉じ、カバーを閉じたらめでたく充電できた。

結局はじめからわかっていれば150円で直る故障だったのだ。
これを直せないと案内して4万円も出費させようとしたメーカーには遺憾だ。

ここまではすべて自分で経験した事実である。
同じようにショートが原因で充電ができなくなってしまった人の助けになればと思ってブログを書いたが、感電などにはくれぐれも注意してほしい。
この記事を読んだことが原因で起きた事故の責任を私は負わない。


あとは余談だが、はじめショートさせてしまって充電ができなくなった時に、自転車にバッテリーを挿すと自転車が動いたものだから、充電器の故障を疑って充電器を先に買ってしまった。

これでまず10,000円の出費。

そして、ヒューズがどうしても手に入れられないまま翌日自転車を使う必要があり、ヒューズ入手まで待っていられないとバッテリーも買い換えてしまった。
それで更に40,000円。
一個目に間違えて買ったヒューズが150円。
正しい知識があれば150円で済んだ修理に50,150円もかけてしまった記念のブログでもある。

(2016年10月31日追記)
記事の反響が思ったより多かったため追記します。
本記事で交換するのはヒューズです。
リチウムイオンバッテリーは大変危険です。バッテリー部分への改造は絶対に行わないようご注意願います。
カテゴリー: 生活 | 11件のコメント

2016

あけましておめでとうございます。
本年もよろしくお願いします。

カテゴリー: 生活 | コメントする

smarty + javascript

こんばんは。
フロントエンドエンジニアのtakakiです。

smartyベースでソシャゲなんかを作ってますと、smartyにアサインされた値をjsに渡したいことがありますよね。

<script>
  {literal}
    userId = {/literal}{$userId}{literal};
  {/literal}
</script>

こんな風にしてグローバルに置いて外部jsから触れる様にすると思います。

が、これやると、{$userId}がnullの時にバグるので要注意!
どういうことかというと、{$userId}がnullだと、jsは

  userId =;

こうなるからです。
これを防ぐには<script>
タグより前に、

{if !$userId}
  {assign var="userId" value="null"}
{/if}

と書いておけば解決します。
valueに文字列のnullをセットするのがミソです。
これを普通のnullにしちゃうと、

  userId =;

これのまんまになりますからね。

あるいは、<div id=”main-container”>かなんかに、

<div id="main-container" data-user-id="{$userId}">
  <!-- 略 -->
</div>

こうやってセットしておけばjQueryで簡単に取得できますね。書きながらいま気づきましたけど。
外部jsなどからこのuserIdにアクセスするには、以下のように書いてください。

var userId = $("div#main-container").data("user-id");
カテゴリー: front-end, JavaScript, jQuery | コメントする