2016年に始めるとご利益３倍？四国お遍路始めます
ファンの方々ならタイトルだけでわかると思いますが、またまた「水曜どうでしょう」リスペクト企画発動です。 2013年の「ベトナム1,800km縦断旅行」、2016年GWのリスペクト企画「ASEANサイコロの旅」と、不定期に行っている旅行企画「e-birdどうでしょう」ですが、ついに「四国八十八ヶ所シリーズ」にも手を出すこととなりました。
続きを読む【jQuery】シンプルなフィルター機能付きギャラリー実装
長らく更新を止めていましたが、久々に投稿。 仕事この数ヶ月で色々な技術に触れましたが、やっぱり基礎は大事だねという問題にぶつかりまくってました。 なんで、ここしばらくは新しい技術を追いかけ過ぎず、基礎を積み重ねています。
フィルター（絞込）機能付きギャラリーの実装
基礎学習の一環としてこういったサンプルを実装・投稿していきたいと思います。今回はタイトル通り、よくあるフィルター（絞込）機能付きギャラリーの実装サンプルを紹介します。
See the Pen Simple Filter Gallery by Shinichi Kogiso (@kgsi) on CodePen.
処理の流れ
- class:filtermenuのli要素をクリック
- liに設定されたdata-fliterの値を取得
- class:postと併記したclassと一致するかチェック
- 一致したclass:postのみを表示
メニューのdata値をclickで取得し、そのdata値とclass:postと併記されているclassとを比較して、一致したpostのみを表示するというシンプルなロジックとなります。
表示とフィルター処理ロジックを分離
メンテナンスや、機能拡張していく際にひとまとめの処理を編集していくのは効率や見通しが悪いので、それぞれのロジックを分離して作成します。今回はES2015の復習も兼ねてるので、Class構文でFilterGalleryを作り、実装しています。各メソッドの説明は以下の通り。
- 初期値の格納、イベントの設定
constructor() - class:filtermenuのli要素がクリックされた際のメソッド
onClickFilterMenu() - フィルターメニューの状態を更新させるメソッド
updateMenu(targetFilter) - ギャラリーの表示状態を更新させるメソッド
updateGallery(targetFilter)
※引数 targetFilterには、data-filter値で取得した値をセット
バンコク出張中なので「地球の歩き方」にも載っていないローカルタイ料理屋を紹介してみる
こんにちは、kgsiです。
この度勤め先の辞令により、2度目の長期バンコク子会社への出張中です。この記事はバンコクで書いています。今回の出張は自身の海外渡航最大期間の30日滞在を予定しています。タイのビザ無し滞在ギリギリの期間ですね。
「タイで仕事をする」という事自体は楽しいのですが、大旅行小旅行合わせるとバンコクには約10回以上は渡航しているので、既に観光旅行気分がほぼありません。休日はオフィスのあるアソーク駅近辺をぶらぶらして、暇ならオフィスで仕事をするという、東京にいる時以上に働き、東京で休暇を過ごす時以上に消極的な生活をしています、本当にありがとうございます。
そんな中で美味しいご飯というのは何よりもの娯楽。特にタイ料理は豊富なレパートリーを揃える、まさにエンターテイメント。
毎日の生活を通して、自由旅行者のバイブルである「地球の歩き方」にも載っていない（ちょっと盛ってます、載っているものもあります）、ローカルなタイ料理屋・タイ飯を紹介していきます。
※今回は写真のアップロードにTwitterを利用しています。必ずしも時系列でアップしていないので、日付が前後していること、ご容赦ください
【水曜どうでしょうリスペクト企画】「サイコロの旅 in ASEAN」始めました
2013年に怒涛の勢いで実施した「ベトナム バイク縦断旅行」に続き、新たなる「水曜どうでしょう」リスペクト企画「サイコロの旅 in ASEAN」が2016年5月2日から決行されます。この初回投稿では企画の経緯を説明します。
続きを読むWebデザイン雑誌が消えたのはいつからだったか
そういえば最近Webデザインの雑誌をめっきり見なくなったなぁ、という感想と雑談。
続きを読む