js・ajaxの最近のブログ記事

【js】入れ子の連想配列の値を取得

ノンプログラマには、既存のシステムですでに作成されている変数から値を取り出せると何かと便利。

今回はMTAppjQueryで特定のサイトだけ管理画面をカスタマイズしたかったので、宣言されていた連想配列から値を取り出して切り分けすることに。

MTAppjQueryでは、管理画面のHTMLソースを見ると、その画面の情報がjsの配列として格納されている様子。これを利用するとその画面がどのウェブサイトのものかを判別できる。

このとき連想配列が入れ子になっており、取り出し方を調べたのでメモメモ。

値をうまく取り出せさえすれば、あとはmatch()で条件つけてif()で切り分ければOK。

-----------------------------

var kudamono = {
  red : apple,
  yellow : banana
};

という連想配列があったとして、値を取得して変数に格納するなら、

var  hoge = kudomono['red'];

でappleが取得できる。

-----------------------------

じゃぁ入れ子の場合。

var kudamono = {
     red : { big : apple ,  smal l: strawberry  },
     yellow : {  big : orange, small : kinkan  }
};

ならば、

var hoge = kudamono.red .big;

でappleが取得できる。

chromeの不具合

jQueryで、イメージスライダーを実装した際、Chromeで二つの不具合が発生。けっこうレアなバグだと思うのでメモメモ。

使用したプラグインは、「jquery.bxslider」。

 

◆その1 画像ズレ Chrome全般

後続の要素の画像が、スライダーが動くたびに1pxほどずれては戻り、ずれては戻り。

センタリングしているものがズレているのは分かったが、他の画像は物によって症状が出ない。

原因は、ズレる画像の親要素の幅が奇数pxだったこと。偶数ピクセルにすると症状が出なくなった。

 

◆その2 テキスト色が薄くなる Mac Chrome & Mac safari

後続の要素のテキストが、スライダーの動きにつられて薄くなっては戻り、薄くなっては戻る。

症状の出ない箇所を参考に調べたところ、背景色がついてない場合に症状が出ることがわかった。

すべての要素に背景色を付与して症状が出なくなった。

jsなどでリンクさせないhref=""の書き方

<a href="javascript:void(0)">

jQueryプラグインまとめ

いつもググって探していたので、効率化のためにここにメモ書き

jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい

 

スライドショー・カルーセル

  • 無難になんでも使える -- bxslider
  • 某THKUNIV様 -- 左右チラ見せ -- jquery.film_roll.js
  • 某MGK様 -- 背景スライダー -- jquery.bgswitcher.js
  • レスポンシブで脱jQuery -- Swiper

チラ見せスライドショー

jQuery FilmRoll以外のプラグインでも、CSSで工夫することでの実装できる。ネット上で紹介されているのは下記のようなもの。

動画設置のあれこれ(jQuery.player)

jPlayer(jQuery.player)で動画を設置するさいのあれこれメモ。

◆前提となるプレイヤーは、jPlayer(jQuery.player)

◆動画の変換は、「すーぱー連続動画変換」で行ったのがうまく動作した

  • Free Video Convertor で「mp4」変換したのは不具合あり。
  • なので、まずはm4vを作成
  • さらにIE10で不具合出たため、拡張子だけm4vからmp4に変えたところ動作した

◆動画ファイルへのパスの書き方を「http://」からのURLで記入

  • IE8での不具合が解消

◆Basic認証をのないディレクトリにファイルを置くこと

  • androidでの不具合が解消

◆読み込み優先はogvを最初にする

  • Firefoxでの不具合が解消

 

以下、今回は該当しなかったけど、サーバによっては下記が必要かも。

◆mime typeの設定

http://www.maido3.com/server/script/mimetype.html

jQueryのカンタン構文のコピペメモ

******************************************
リストのストライプ 偶数行に「.even」を付与
※偶数は0開始なので、実際は奇数行。
※evenの反対は「odd」
******************************************

 

$(document).ready(function(){
// for stripe
 $(".stripe li:even").addClass("even");
});

 

 

******************************************
#moreをクリックしたら#areaBlockのクラスを変えてアコーディオン
******************************************

$(document).ready(function(){
// for more
$("#more").click(function(){
$("#areaBlock")
.slideDown()
.removeClass("close")
.addClass("open");
$(this).remove();
});
});

-------------

CSS

 

 .close{ display: none;}

******************************************

scrollspyのメモメモ

 

スクロールに応じてナビゲーションをアクティブにする

Bootstrap-scrollspy.js

http://scriptogr.am/ia_archiver/post/2012-03-14-1550

 

Bootstrapの日本語ドキュメント

http://php-fan.org/sample_code_demo/bootstrap-js.html

 

※今回はゲットしたBootstrap-scrollspy.jsが古かったため、モノホンBootstrapから切り出して使用した。

縦書きさせるJavaScript

縦書きに挑戦する機会があったので、JavaScriptについてメモメモ。
探したかぎり、使えそうなものは下記の4種類

  • 竹取.js
    デモが左にスクロールさせて読み進めるタイプで、イマイチ操作感が悪かったのでとりあえずパス。
  • nehan
    縦書きしたいボックスにクラス名を振ることで実装。今回はこれを採用。
  • tategumi.js
    HTMLヘッダー内に一括して設定を記述する。けっこう突っ込んで試したところ、禁則処理した次の行に意味不明な空白行が生成。解決できなかったため、今回はパス。
  • h2v.js
    ライセンスで商用利用を禁止しているため、パス。モノとしてはよさげ。

 

CSSのみで縦書きさせる手もあるが、「~」や「ー」などが縦書きにならないので、JSを入れるのが現実的みたい。

画像にheight属性を指定しないとレイアウト崩れの原因になる。

Masontyで高さ確定したのちに画像を読み込んだりすると高さが変わってしまうのが原因と思われ。

今回はMTのプラグイン「ResizeImage」で画像の大きさ変更を併用していたが、このプラグインを使用するときはwidthとheightを空で記述しておくと自動的にサイズを入れてくれるようだ。

Select ジャンプ

<select onchange="location=this.options[this.selectedIndex].value"> <option selected="selected">▼ メニュー ▼</option> <option value="http://www.yahoo.co.jp/">Yahoo!</option> <option value="http://www.google.co.jp/">Google</option> </select>

jQuery Masonry (リキッドレイアウト)

石積みレイアウト・レンガ積レイアウト

【取説】
http://www.css-lecture.com/log/javascript/jquery-masonry.html

【ダウンロード元】
http://masonry.desandro.com/

※ウィンドウ幅を変えると、アニメーション的に要素を再配置してくれる。

 

・角丸は別jsで実装されてるらしい?

識別子、文字列または数がありません

 

var options = $.extend(

{
slides: ".slides",
prevId:'prevBtn',
prevText:'Previous',
easing:null , // ここのカンマがエラー

}, options);

 

みたいな時に、最後の「null」の後ろにカンマが入ってるのがアウト。

どこがダメなのかというと、「最後のクセに区切りやがって馬鹿者め」的なエラーとなる。

ファッション系など、これまでFlashバリバリで作成されていたサイトでjqueryなどに置き換えたいという要望が増えている。この場合、デザイン優先になるために、既存のライブラリをそのまま流用することが難しいことが多い。

結果、複数のライブラリを流用して組み立てて、オリジナルのライブラリを作成することになるが、この際、IE6・7がかなりのネックになる。

お客様に迫るべき選択肢は3つ。

  1. 機能的な部分を重視するなら、「プログレッシブエンハンスメント」という考え方を理解してもらい、IE6・7についてはある程度あきらめてもらう。
  2. クロスブラウザでの見栄えを重視するなら、Flashでの制作にとどまってもらう。
  3. どうしても両立したいなら、十分な予算と製作期間を準備してもらう。(お客様にはボッタクリに見えるかも)

1番の場合でも、IE6/7でもそれなりの見栄えを保証するためには、モダンブラウザについても機能的に制限が出てくることを事前に説明する必要あり。

3番の場合、プログラマを最低一週間は拘束できるだけの予算とすれば、1ライブラリで20万以上? 現実的な金額ではないなぁw

 

Flashの場合、Flash Playerというベースに乗っかるのでどのブラウザでも挙動は同じ。、一方、jqueryなどのAjaxもいちおうはそれがベースになって各ブラウザでの挙動をある程度統一してくれることにはなっている。が、実際にはIE6などにはどうしても対応しきれていないのが現実。また見栄えの部分で結局はCSSでの調整なので、クロスブラウザ対策の手間はけっこう大きい。

これを踏まえて、Flashの延長線上でAjaxへ踏み込むと痛い目にあいますよと、、Ajaxなりの表現方法という意識をもってデザインや動作の仕様を詰めていきましょう、というのが吉。

アーカイブ

ウェブページ

「紺屋の白袴」とはまさにこの事。見にくいしスマホ対応もまだしていません。そのうちやります。そのうちにね。

エフスタジオの中の人は株式会社メキメキに在籍しています。