ネットショップ語り楽天市場、Yahoo!ショッピング（PayPayモール）、au Payマーケットのストアページ制作をしています。特集ページ制作が得意です。 「わかりやすく伝える」をモットーにサンプル、デモを交えてECページ制作テクニック、Web制作テクニックを解説します。 ecmemo.net@gmail.com プロフィール詳細 お問い合わせ
数値の増減 | jQuery逆引き | Webサイト制作支援 | ShanaBrian Website
ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.number-spinner.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.number-spinner.js"></script> 【JavaScript】 $(function() { $('.sample').numberSpinner(); }); 【HTML】 <p><input type="text" name="num" value="0" class="sample" /></p>
★【jQuery】外部Javascriptファイルを条件分岐で読み分けてみたで!! - WEB野郎
サイト制作にはもはや外部Javascriptの読み込みは欠かせない。 スライドやギャラリー、メールフォームや描画など多くの機能をJavascriptに依存している。 ところでレスポンシブデザインでのWEB制作ではデバイスやブレークポイントによってJSを読み分ける場面が少なからずある。 コーディングの理想からいえば、デバイスやビューが変わる場合でも、ワンソースで同一の外部ファイルを読み込みたいところだが、 「PCの時はこのスライドで」 「スマホの時だけはこのギャラリーを」 などという要求は少なくない。 だからと言って不要な外部ファイルを読み込んだり。二つもソースを書くのはスマートではない。 様々な場面に応じて、別々の外部Javascriptをそれぞれ読み分けるすべはないものだろうか？ そこで今回は条件分岐による外部Javascriptファイルの読み分けについてまとめてみた。 jQueryのa
某サイトに見る狂ったjQueryのソースと高速化・改善方法
自宅の光回線が遅すぎて乗り換えを検討していた矢先、Ymobileのキャンペーンページがやけにもっさりしているので、思わずソースを覗いてしまった。一流企業のソースはさぞかしモダンなのだろうと思ったら、jQueryで鬼のDOMいじり。思わず閉口してしまったので同じ轍を踏まないために改善方法を考えます。 経緯 我が家で契約しているSo-net光という回線が常時1Mbps/s以下という稀に見るクソっぷりなので、違約金を払ってでも回線を変更したいと考えていました。 まずなぜSo-net光にしたかと言うと、全ての業者と契約パターンの中で、最も運用費が安かったからです。キャッシュバックが56,000円・月額費用が2,800円・初月無料だったので21ヶ月使ってようやく料金が発生し始めるという計算です。ちなみに違約金は3万円ほどになる予定です。 そこで乗り換え違約金全額キャッシュバックのSoftBank光に
脱jQuery派のあなたに！Wijmoで実現するHTTP通信 | MESCIUS.devlog - メシウス株式会社
こんにちは。今日はWijmoのHTTP通信機能をご紹介します。 フロントエンド開発において、皆さんはどのようにHTTP通信を実現されているでしょうか。例えば郵便番号検索のWeb APIを呼び出す場合、JavaScriptの標準機能のみを使用して実装を行なうと、コードは以下のようになると思います。 JavaScript標準APIによるHTTP通信の実装例 //------------------------------------------ // HTTP通信で郵便番号検索Web APIを呼び出すサンプル //------------------------------------------ // リクエストを初期化 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://postcode-jp.appspot.com/api/p
Subresource Integrityについて調べた
Subresource Integrity という記事をみて、 ちょっと興味深かったのでSubresource Integrityについて、軽く見てみた。 Subresource Integrityはどういうものかおそらく、以下のようなもの。 ウェブアプリケーションでCDNをつかって、サブリソースを参照することは当たり前になっている。 しかし参照先のサブリソースが安全であるという保証はない。 もし、CDN経由で参照しているサブリソースが攻撃者により改変された場合、XSSの危険性が生じる。 これは、サブリソースの整合性をチェックする仕組みを導入することで、危険を回避できる。 Subresource Integrityとは、サブリースをSHA256, SHA512などでハッシュ化して、linkタグやscriptタグにintegrity属性として付与することで、整合性を確認できるようにしたもの。
コンテンツを横方向に無限スクロールさせる「simplyScroll v2」
「simplyScroll v2」というjQueryプラグインを使えば、画像やテキストブロックといった要素を横方向にゆっくりとループスライドするスライドショーを作ることができます。 ※2017年5月段階のバージョンでは、横幅可変サイズ指定時に無限スクロールが発生しない（１度のみループスライドして停止する）という不具合を確認しています。 横幅を固定幅で指定するか、以下の記事を参考に、もう一つのループスクロール用jQueryプラグインを使っての実装をお試しください。 コンテンツを縦横自在に無限スクロールさせる「infiniteslide.js v2」 ループスクロールの作り方 「simplyScroll v2」をダウンロードする まずは、公式サイトからプラグインをダウンロードしましょう。 外部ページ「jQuery simplyScroll」公式ダウンロードサイト プラグインファイルをサーバーに
【Labs】スマホ対応レスポンシブデザイン カルーセルスライダー【simplyScroll v2】
6月更新・前月(5月)の人気記事トップ10 06/06/2024 ( 02 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 01 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】Safariでソースコードを見る方法 ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む ( 05 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 08 ↑) 【Labs】CSSだけでドロップダウンメニュー ( 09 ↑) 【Labs】PHPのエラー表示をなくす方法 ( 06 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方
左右にループするスライドを実装してみた – Creator Note
毎日雨ですね。 私の地元よりも今住んでいるところは、たくさんの虹が見れるので雨でもハッピーになります^^。 でも暑い…暑さには弱いです。私は冬が好きなので（知らん）。 今回は左右にループするスライドを実装してみました。 永遠ループは今まで使う機会多かったのでおなじみだったんですが、 いつも右から左に流すタイプばかりで、いざ調べてみると案外みぎから左ってなくって…。 2つ同時に実装すると動かなかったり、Wordpressに対応してなかったり…結構動かなくて実は苦戦しました。笑 で、見つけたのが今回使用した『simplyScroll.js』。 実はこのJS、開発がもう終了してるんです。でも簡単に実装できるし、オプションも利くのでやってみるとさらっと実現できました。 はじめからこれにしとけばよかった…。 以下、ソースです。 See the Pen XgEmVM by sayuri (@giraf
写真が画面の端から端へ流れる無限ループするアニメーション 4種 | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
[Javascript] イベントリスナーいろいろ
どうもこんばんは！HYPのこうじです。 イベントリスナー、色々ありますよね。よく使います。 にも関わらず、毎回忘れて調べるハメになるのでまとめました！ イベントリスナー使用時の注意 1. 関数に引数を付けない ブラウザによってはつけてもちゃんと動作しますが、しない場合もあります。 するかしないか分からないものは、指定しない方が無難です。 [js] // いいね！ dosument.addEventListener(‘DOMContentLoaded’, GetBird); // よくないね！ dosument.addEventListener(‘DOMContentLoaded’, GetBird(‘コザクラインコ’)); // よくないね！ dosument.addEventListener(‘DOMContentLoaded’, GetBird()); [/js] 1. 動的に何かする
![[Javascript] イベントリスナーいろいろ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2138df58875d2dfd5c8e3200fffb7eeec937bf2e/height=288;version=1;width=512/https%3A%2F%2Fhyp.llc%2Fwp-content%2Fuploads%2F2016%2F07%2Fjs-event-listener-cover.png)
[Javascript] ECサイトで使える！縦に長いページには一番上に戻るボタンを使おう！ (レスポンシブ対応)
[Javascript] ECサイトで使える！縦に長いページには一番上に戻るボタンを使おう！ (レスポンシブ対応) 2016.07.09 2019.09.17 Javascript どうもこんばんは！HYPのこうじです。 今回は縦に長いページでページ内移動が便利になる『一番上に戻るボタン』の実装をしようと思います！ は？iphoneは上の方タップすれば一番上いくから要らないっしょ。 パソコンは”Home”ボタン使いなYO！ (ちなみにかなこさんは僕と同様、自分にとって必要なモノ以外覚えないので実際にこういう発言はしません。多分…) まぁこんな事いったら元も子も無いですが、全ての人が知っているわけではないので、視覚的直観的に『あぁこれ押すと上まで行くんだろうな』というのが分かるボタンがあると非常に親切というのもあります。 一番上に戻るボタンの実装 htmlタグの作成 まずはこれが無いと元も子
![[Javascript] ECサイトで使える！縦に長いページには一番上に戻るボタンを使おう！ (レスポンシブ対応)](https://cdn-ak-scissors.b.st-hatena.com/image/square/93619f5974ecb9f20fc2e7e1cabac20fbf48585d/height=288;version=1;width=512/https%3A%2F%2Fhyp.llc%2Fwp-content%2Fuploads%2F2016%2F07%2Fjs-movetotop-cover.jpg)
[Javascript] 動的に要素を作成する為のあれこれ
どうもこんばんは！HYPのこうじです。 javascriptに慣れてきたら、動的に要素を作成して要素に追加とかやってみたくなります。 そう。僕の事です。 例えば以下のような場合。 ショッピングサイト等でよくあるランキングを作ったとしましょう。 コーディングはこんな感じです。 [html] <div id="ranking"> <ul> <li> <a href="#"> <p class="rank rank_1">1位</p> <img class="image" src="example1.jpg"> <p class="name">グレートな商品</p> </a> </li> <li> <a href="#"> <p class="rank rank_2">2位</p> <img class="image" src="example2.jpg"> <p class="name">エク
![[Javascript] 動的に要素を作成する為のあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b6353eeb7501b8c2a95cdcdd348b3915a6f3183/height=288;version=1;width=512/https%3A%2F%2Fhyp.llc%2Fwp-content%2Fuploads%2F2016%2F08%2Fjs-create-element-cover.jpg)
Yahooショッピングでインラインフレームを使用時のtargetを簡単に設定
Yahooショッピングでインラインフレームを使用時のtargetを簡単に設定 2016.11.07 2019.09.11 jQuery Vanilla JSを使おう！ どうもこんばんは！HYPのこうじです。 Yahooショッピング出店し、ページを作成する際に有料で使用出来る『Yahooトリプル』というFTPサーバーがあります。 このFTPサーバーですが、通常のFTPと違ってちょっとクセモノです。 すぐに反映されない 反映がめちゃくちゃ遅いです。 『あ、テキスト間違ってた。てへぺろ！』なんてことがあろうものなら、一文字直すだけでも反映まで長いと20分とか平気で掛かります。 サーバー上で検証しながらページ作成なんてもってのほかです！ 元々、Yahooショッピングの出店料が有料だった時代に、FTPサーバーへファイルアップ時に、外部リンクや不正なスクリプト等をアップされないように未然にチェックして
画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript : 森のコーディング
8月28 画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript カテゴリ:javascriptjQuery Tweet 画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。 そんなときは、まっしろいまま待たせるんじゃなくて、 せめて、 「今ローディング中ですよー」 という、このグルグルまわるアニメーションを出してあげると、 少しはイライラが軽減される。 （ほんの少しだけ） それを、javascript ＆ jQueryでシンプルに実装するのを説明します。 サンプルをつくったのでまずは確認。 あぁ、ネコかわいいよ、、ねこ・・。 1.まずはローディング画像を用意 あのグルグルまわってる画像 はGIFアニメで作られてる。 適当に「loading画像」 で検索してきてもいいし、 こういうジェネレータサイトみたいなのもある。 htt
WordPressテーマの作成方法 | kigiroku
WordPress（ワードプレス）テーマの作成方法 WordPress（ワードプレス）のテーマを作成するには、htmlとcssの他に、phpとWordPress（ワードプレス）のテンプレートタグの知識が必要になります。phpとテンプレートタグは、htmlやcssに比べると難易度が高く、コーディングが苦手なWebデザイナーとっては、壁となることがあります。Javascriptを触れる方であれば、phpやテンプレートタグの学習は難しくないでしょう。 WordPress（ワードプレス）のテーマは、一から自作しようとするとかなりの工数が掛かります。インターネット上には、たくさんのWordPress（ワードプレス）テーマが公開されていますので、それらテーマを利用し開発を進めるのが合理的でしょう。 ここでは、WordPress（ワードプレス）テーマがダウンロードできるサイトをご紹介します。 WordP
jQueryを使って簡単にできるローディング画面を作ってみた | 株式会社チップディップ
フルスクリーンで動画や画像を表示しようとしたりすると、必然的にサイズが大きくなりサイトが重くなってしまい、ページの表示速度が遅くなってしまう事があると思います。 ページの表示が遅いと『即、戻るを押す』。僕もネットサーフィンをしている時についやってしまいます。 コンテンツが表示されるまでの間に代わりに表示させておくローディング画面を作っていきたいと思います！ これが今回の完成図です。 See the Pen ローディング画面 by tipdip (@tipdip_blog) on CodePen. ローディング画像を用意する 今回はgifアニメーションでこんな感じの画像を用意しました。 ロード画像のgifアニメーションはPhotoshop等で作成できますが、フリー素材も調べれば色々ヒットするので、そちらを使うのも手かもしれません。 今回僕もこちらのサイトのものを使用させていただきました。 F
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する ｜ Tips Note by TAM
下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。 検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。 部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。 設定したスクリプトはこちらです。 searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, hitNum; // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('#search-result__list').empty(); $('.search-result__
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]id順に要素を並び替える
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita