Web制作・フロントエンド javascript 西暦のセレクトなどに使う配列の作り方
selectboxとかで西暦月等の選択用に、キーと値が同じ配列を範囲を指定して作りたい時。PHPで言うrange関数と同じ動きの関数を作るconst range = (start, end) => { let a= {}; for (let...
Web制作・フロントエンド
Web制作・フロントエンド 
Web制作・フロントエンド 【Vue3】条件によってclassを切り替える
Vue3を使って、動的なクラス名にしたい時。ざっくりシンプルルールだけ書くと<div :class="{'クラス名': 条件}"></div>ざっくり条件ルールが複数ある場合<div :class="{'クラス名': 条件,'クラス名': ...
Web制作・フロントエンド SVG画像がブラウザでは画像として表示されず、ソースが見えてしまうとき
SVG画像がサーバーにアップロードすると、ブラウザから見れない、URLを叩くとソースが見えてしまうとき、・・・それはレスポンスヘッダが正しくないからです。簡単なのは.htaccessに以下を追記します。AddType image/svg+x...
Web制作・フロントエンド フォームの内容をjsonにしたい時の、jquery拡張$.fn.serializeObject()
jQueryには入力フォームの内容を文字列で返す $.fn.serialize() や、 配列で返す $.fn.serializeArray() がありますが、オブジェクト形式で取りたくてけっこー探し回ってやっとたどり着いたのでメモです。結...
Web制作・フロントエンド スクロールスパイ系js10個まとめ
スクロールに合わせて、ナビゲーションをアクティブにしたいライブラリを探してみると、たーくさんあったので、メモ。探せばどんだけでも出てくる感じだけど、自分の求めている物になかなか辿り着けない。。Swiperデモ：ScrollSpyデモ：サブメ...
Web制作・フロントエンド 【Movable Type】jqueryで新着投稿にnewマークを付ける
Movable Typeで、24時間以内の投稿は自動でNEWマークを付ける方法。作戦 再構築をしなくても24時間を過ぎると自動で消える ↑ の理由でajax newマークの見た目や場所が一定ではないので、DOM構築はしない ↑ の理由で先に...
Web制作・フロントエンド jquery 要素の作成で第二引数でまとめて
jqueryで要素を作成するとき、第二引数を使ってプロパティ類をまとめて設定する方法。これするといちいちaddClassやらイベントやら追記しなくて済むのでソースが綺麗になるよ。$('', { class: 'btn btn-primary...
Web制作・フロントエンド 雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。Versionは1.7.4です。（だと思います＾＾；）デモサイト通常の設置$('#section').snowfall({ image :...
Web制作・フロントエンド 【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる
先日の続きです。YoutubeのプレーヤーAPIを使って簡単な再生プレーヤーを設置したのですが一部のスマホ端末で再生できない現象が出たので調査。まず、やっていることはyoutubeプレーヤーの全面にプレイ画像を置き、クリックしたらプレイ画像...
Web制作・フロントエンド YoutubeAPI インターネットエクスプローラー10でwindow.onYouTubeIframeAPIReadyがフックしないとき
IE10にて起きた現象で、YoutubeAPIのwindow.onYouTubeIframeAPIReadyが作動しない不具合がでました。ブラウザを更新すると動作しなかったりで安定しなかったので対処法。対処法どうもIE10だとドキュメントの...
Web制作・フロントエンド three.js メッシュの立方体をグリグリ視点を変えれるようにする
HTML5に搭載されたwebGLを扱うためのライブラリthree.jsを使って立体物を表示、マウスで視点を操作できるようにしたサンプルです。マウス視点操作にはTrackballControls.jsがありますが、Z回転が邪魔だったりで今回は...
Web制作・フロントエンド 年間のイベントを一覧表示できるウィジェット実装jQuery「glanceyear」:phpspot開発日誌
年間のイベントを一覧表示できるウィジェット実装jQuery「glanceyear」:phpspot開発日誌.
Web制作・フロントエンド CSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース
CSS3を使ったアニメーションは従来のjavascritpアニメーションに比べ、軽く動作が美しい、表現の幅も広いですが、非対応のブラウザの場合、とても残念になります。今回はマウスオーバーでフリップアニメーションをCSS3で行い、非対応ブラウ...
Web制作・フロントエンド javascrip：ハッシュタグからイベント情報を取得
javascriptでクリックイベントから要素のデータで情報を使いたいときjQueryのDataAPI $('div').data('hoge');はよく使う手法ですが、シンプルに扱うにはハッシュから取った方が見やすかったりします。毎回、忘...
Web制作・フロントエンド sassのstyleオプション：NetBeans7.4でsassを試したみた。
NetBeansが7.4になってからSassとLassがやっと標準装備されて嬉しい限りですが、以前までのプラグインでの動かし方と大きく違っているのでコンパイラーをインストールしたり環境構築が面倒になっています。それぞれのインストールについて...