Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
Google Feed APIを使わないで相互RSSを表示する方法 「以前の投稿」で紹介しましたが、アクアリウムWikiではGoogle Feed APIを利用して相互RSSを表示していました。 しかし、Google Feed APIはキャッシュ周りに不具合があるようで、古いものが表示されることがありました。 また、近々廃止される方針らしく、いつ停止してもおかしくありません。 そこで「jQueryだけで相互RSSを表示しよう」という試みです。 jQueryでRSSを取得する方法 フィードを取得して、各アイテムを並べ直すだけなら、jQueryで簡単に実装できます。 $.get(FEED_URL, function (data) { $(data).find("entry").each(function () { // or "item" var el = $(this); console.l
レスポンシブに対応できてCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい
ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応できて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に短し襷に長し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できるものは利用したい。 で、やっと「これなら！」というやつに出会いました。 Slider ProというjQueryのプラグインです。なかなか良さそうです。 ただ、使ってみてハマったところがいくつかあったので書き残しておきたいと思います。 「jQuery オワコン 」がうたわれる昨今ではありますが、今後、Slider Proを使ってスライダーやカルーセルを実装する方の参考になれば幸いです。 Slider P
高機能で非依存のlightboxスクリプト・「lightgallery.js」
lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 Video等のサポート、iframeやGoogle Mapのサポート、20種から選べるCSS3 transitionsによるアニメーションエフェクト、各SNSへのシェアボタン、ハッシュプラグイン対応、フルスクリーン化対応などなど、よくあるlightboxの機能を詰め込んだようなもので且つ、jQuery等のライブラリに依存せず単体で動作してくれるのが特徴です。モジュールはオートプレイ、動画、フルスクリーン化等がデフォルトでビルトインされているみたいです。ファイルサイズは非圧縮の状態で42KB、圧縮版で24KBほどです。なかなか良いのでは。ライセンスはApache 2.0。 lightgalle
RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれ（2018.08.08追記）｜くろひつじのメモ帳
あけましておめでとうございました。本年もよろしくお願いいたします。 さて去年後半、xmlを読み込んでは切ったり貼ったりする仕事が相次いでました。 大変勉強になったので、サンプルや注意点、参考URLなどをまとめておきます。 本当にメモ書きのようなものなので、JS部分のみ抜粋してます。詳しい書き方はサンプルのソース見てくださると助かります。 Google Feed APIが廃止されたため、このページで公開されている方法の一部は使用できません。現在はPHPを使う必要がありますのでご注意ください。 （2018.08.08追記） 外部サーバのXMLファイルを読み込む 「ア○ーバブログの更新情報をサイトに載せたい！」なんて時に使えます。 Google AJAX Feed API を使う シンプルにデータ取得→HTMLに表示はこんな感じでできます。 サンプル１ ちょっと凝ったのはこんな感じ サンプル２
【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。
【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。 昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。 一夜明けて、現時点で Google Feed API が復旧しているようですね。 しかしまたいつ廃止されるかもわからない状況なので、今のうちに対策をしておいたほうが安心です。 ……というワケで。 昨日の記事の続きです。 外部ドメインのRSSをjQueryで読込／出力するには？昨日紹介したやり方ではクロスドメイン問題を解決していないため別ドメインのRSSは読み込み不可能でした。 そもそもクロスドメインとは？「クロスドメイン」とは、一般的には『異なるドメインを跨いで通信すること』を指します。 セキュリティの関係で ajax では同一ドメインのファイルと
jQuery レスポンシブメニュープラグイン SlickNav の使い方 | Web Design Leaves
jQuery レスポンシブメニュープラグイン SlickNav の使い方 CATEGORY: jQuery | TAG: プラグイン, レスポンシブ 2015年1月18日 jQuery レスポンシブメニュープラグイン SlickNav の基本的な使い方や設定に関する個人的なメモ。マルチレベル（メニューの階層）にも対応しているので便利。 SlickNav Responsive Mobile Menu v1.0.1 licensed under MIT 目次 jQuery プラグイン SlickNav のダウンロード SlickNav のページの「DOWNLOAD NOW」をクリックしてダウンロード。 解凍すると以下のようなファイルやフォルダがある。jQuery プラグイン SlickNav を使用するのに必要なファイルは「jquery.slicknav.min.js」と「slicknav.c
Rails+Bootstrapでnavbarのactiveを自動設定 - BitArts Blog
Bootstrapのnavbarで現在位置のaにclass="active"って付けるじゃないですか。あれって階層になると判定が大変でなかなか美しく実装できないですよね。 色々考えてみたけど、JSで実装すればいいんじゃないですかね？ JavaScript版とCoffeeScript版です。（要jQuery） 無理にサーバサイドレンダリングする必要のないところかと。 万能ではないけど、URLパスがちゃんと構造化されていればviewの実装で何もしなくても期待通りの結果になるのは便利。
スクロールすると「ページトップへ戻る」ボタン出現｜お小遣い稼ぎSite
一定の量をスクロールすると、右下に「PageTop」ボタンが出現。 クリックすると、ぬるっと一番上まで戻ってくれるボタンを設置します。 Googleが用意したjQueryを読み込む <head></head>の中に以下を追加。 本体をDLして自分でアップロード・読み込んでもいいけど、グーグルさんが用意したjQueryを読み込んだほうが速いです。 （ネットサーフィンをしてると大体コレを踏んでいて、パソコン内にキャッシュが残っていることが多いので） HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> jQuery <head></head>の中に以下を追加。 6行目の「600」は、600pxスクロールしたら「ページトップ」が出現。 13行目の「500」は、上部ま
Modern Slide In - Sequence.js Theme
Release Date August 9th 2015Latest Update August 9th 2015Theme Version2.0.0 Sequence.js Version What is the purpose of the Recommended Sequence.js Version?The recommended Sequence.js version this theme is packaged with. Other versions may work but may not have been fully tested.2.0.0 License GPLv3RepoGitHub Tags grayhorizontallightminimalproductsslider FeaturesOn mobile devices, the product image
【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方
今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。 この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を JavaScript を使って計算することで、古いブラウザとの互換性が高まり、より多くのデバイスで同じように表示されるようになっています。 最新のブラウザはもちろん、IE8、IE9、IE10 にも対応していますね。 また画像が切り替わるときのエフェクトの一部を jQuery UI に依存させることで、本体の［Juicy Slider］の容量を軽く抑えています。 以下［Juicy Slider］の設置方法です。 必要なファイルをダウンロード使用するファイル一式は公式サイトからダウンロードしてきます。 Juicy Slider : http://redslim.g
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」:phpspot開発日誌
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるので面倒であったり、更にクロスドメインが絡むのでややこしいんですよね。 iframe内のresizeイベントが取れるので、JSで動的にコンテンツのサイズが増えても、自動リサイズが出来たりするようです 関連エントリ iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload
レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」:phpspot開発日誌
Chocolat - jQuery responsive lightbox レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」 Lightboxは色々ありますが、ユニークなLightBoxクローンの１つで、全画面やズーム表示等は便利ですし、レスポンシブということで使いやすそうです。 関連エントリ レスポンシブで軽量なLightBox実装「Rebox」 シンプルで必要最低限だけどレスポンシブなLightBox実装「lighterbox」 ページサイドにカッコよく表示できるLightBox「Strip」
レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」:phpspot開発日誌
レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 2013年11月18日- Accessible Mega Menu レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 メガメニューとはナビゲーションバーを押すと表示される大きなメニューのことですが、こちらはレスポンシブ対応でPCでもスマホでも活用できる点がいいです。 単にメニューの選択肢だけ表示されるメニューとは違い、説明等も書けてサブメニューの選択肢が多い場合に使えそうですが、スマホ対応も出来るということで一応覚えておいてもよいかも。 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装
CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」:phpspot開発日誌
Salvattore ? A jQuery Masonry alternative with CSS-driven configuration. CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」。 Pinterest風UIを実現するライブラリは多数ありますが、CSSで設定が出来るのは便利かもしれません JSは使っていますが、カラム数等の調整をCSSでできるのが特徴です。 関連エントリ ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
スマホで"横から出てくる"メニュー作れるjQueryプラグイン「Sidr」の使い方！かんたんに実装できる上にサクサク動く！
こちらが新テーマの記事ページ。上のバーの右側の水玉アイコンをタップするとメニューが開く仕掛けにしてあります。 タップするとこのように右から「にゅっ」とメニューが出てくるように。それほど動きがカクつかないので満足。上の「MENU」というところか「閉じる」をタップすればメニューを閉じる仕様に。 また、最初からCSSも付いてくるので文字を入力するだけでそれなりにカッコイイメニューを作ることが可能です。 「Sidr」実装方法・使い方 <script src="javascripts/jquery.js"></script> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」:phpspot開発日誌
FlowType.JS ? Responsive web typography at its finest: font-size and line-height based on element width. 要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」。 通常は要素の幅を変えると折り返し位置のみがかわりますが、こちらを使えばフォントサイズやline-heightを自動調節可能。 レスポンシブなサイトなどで使うことができそうです。最小・最大のフォントサイズを指定することもできるのえ大きすぎたり、小さくなりすぎたりといったことも防げます 文字の大きさの問題はこうしたもので簡単に解決できますね 関連エントリ リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 タッチができてレスポンシブなカルーセル実装jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
404 Not Found
CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ:phpspot開発日誌