流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ - Diary
流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ みたいな主張があり、 WordPress のカスタマイズをしている人たちがこれを言いがちであり、実際間違ってないと思います。 では我々(我々とは誰か？)がそれに対していえることが何かというと、 PHP と jQuery で頑張って WordPress をカスタマイズするよりも JSON API と nuxt.js/next.js でサイトを組んだほうが簡単だということです。 WordPress のカスタマイズをやってきた人たちは長年のノウハウを積み上げており、それを活用してバリューを出しているわけですが、 nuxt.js でやっていっている人たちが熟達したとき、すべてが破壊されます。 じゃあ実際僕が nuxt.js でかっこいいサイト作る仕事して WordPress の人たちの仕事を奪っていくぞ！！！という気持
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
レスポンシブでタブレットとPCを同じにするためスマホとタブレットでviewportを切替える | IT女子のお気に入りフォルダ
非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。 ところが、タブレットサイズに対応していないレスポンシブ対応のデザインだと実寸のまま表示されてしまいます。往々にして横が画面に収まりきらず、横スクロールが発生しちゃうんですよねー。 レスポンシブ対応をするにあたり、iPadなどのタブレット端末はPCと同じ表示でという希望がけっこうあります。 そんなときは、vierportを切り替えてデバイスに合わせて表示する方が楽に対応できると思います。 というわけで、ユーザーエージェントで判別してタブレットとスマホでviewportを切替える方法のメモです。 jQueryに頼りたいと思います。 // スマホとタブレットでviewportを切替え $(func
Javascriptスクレイピング！jquery.xdomainajax.js
これぞJavascriptスクレイピング！jquery.xdomainajax.js 主催している勉強会でも何度もPHPでのスクレイピングネタを取り上げていいます。 Javascriptでもスクレイピング出来ないものか PHPでのスクレイピングでもそうなのですがスクレイピングする際はHTMLのタグやIDなどのセレクタを利用して取得します。 でもこの考えがいかにもJavascriptっぽいので、だったらJavascriptでもいけるのではないかと調べていたら素敵なjQueryプラグインを発見しました。 クロスドメインの制約突破！jquery.xdomainajax.js Javascriptの場合ネックになるのがクロスドメイン間の突破です。クロスドメインとは、例えばこのサイトはwww.kaasan.infoというドメインですが、このサイトを閲覧しながら 違うドメインの他サイトにアクセスすると
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors
通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。 また、右端の「#.hello｜5000」はスクロールの速度を設定しています。 リンクのパターンはさまざまなものがあり、各所に利用されています。 Arbitrary anchorsの使い方 実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
jQueryで指定されたイベントの定義場所を取得する方法
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
2時間縛りでd3.js挑戦してみた - mizchi's blog
何この記事 あんちべという人から無茶ぶりがきたので対応した mizchi、d3ブログ書いてくれた呑む— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian D3まだ極めてないです— 高意識エネルギー (@mizchi) 2014, 3月 2 @mizchi 2時間やろう、早く極めたまえ— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian おっしゃ待ってろ— 高意識エネルギー (@mizchi) 2014, 3月 2 前提 よく誤解されるんですが、D3.jsはグラフ描画ツールではなく、JavaScriptでSVGを生成するためのjQuery風DSLで、DSLとはいえかなりローレベルなライブラリです。SVGはベクタグラフィックスを生成する規格。ブラウザ上のSVGは、図形を書けるDOMであり、他
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
atsukitaira.com - このウェブサイトは販売用です！ - atsukitaira リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Table-to-JSON
Options ignoreColumns Array of column indexes to ignore. Type: Array Default: [] onlyColumns Array of column indexes to include, all other columns are ignored. This takes presidence over ignoreColumns when provided. This takes precedence over ignoreColumns when both are provided. Type: Array Default: null - all columns ignoreHiddenRows Boolean if hidden rows should be ignored or not. Type: Boolean
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jQuery UI 1.10 日本語リファレンス | js STUDIO
このサイトについて jQuery UIの日本語リファレンスです。 jQuery UIの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、スマホで意図しない広告へのタップを防ぐための3つの対策 
Antimath - Bxslider slides count
cdnjs - The #1 free and open source CDN built to make life easier for developers
