asystのブックマーク - はてなブックマーク

jQuery不要の軽量レイジーロード！echo.jsの使い方

当サイトでは以前まで、jquery.lazyloadというレイジーロードの定番ライブラリを使用していましたが、2015年10月頃より、このecho.jsに鞍替えしました。良い点echo.jsの良い点は「jQueryに依存しないこと」です。当サイトではページスピードを向上するためにjQueryからの脱却を図っており、その目的でこのecho.jsを導入しました。正直なところ、目に付く良い点と言えば、それくらいです。だから、既に他のレイジーロードライブラリを利用していてそれに問題がない場合、わざわざ、このecho.jsに変更する理由はないでしょう。悪い点echo.jsは、機能が多くありません。例えば、私が以前使っていたjquery.lazyloadは、「マウスカーソルを重ねた時に読み込みを開始する」「画像をフェードインで表示する」などといった多数のオプションがありましたが、echo.jsには

asyst 2017/05/15

リンク

Twitterのモーメントの使い方まとめ

モーメントに関するQ&Aモーメントって何？簡単に言うと、ツイートのまとめ機能です。作成者は、自由に自分や他人のツイートを集めて、並び替えて、それらを「モーメント」として公開することができます。モーメント(Moment)とは直訳すると「瞬間」で、この機能は「その時その時の思い出をまとめたストーリーを作ろう」という趣旨のものです。新潟旅行のモーメントモーメントの見本として、新潟旅行に行った時の数ツイートをモーメントにまとめてみました。モーメントを作成できないのは何故？2016年10月現在、モーメントは追加されたばかりの機能です。そのため、一部のユーザーから順々に使えるようになっていきます。自分のアカウントでまだ使えない場合は、使えるようになるまで待ちましょう。作成できなくても、他人が作成したモーメントを見ることはできるはずです。作るのは大変？簡単です。タイトルと説明文を決めて、あとはツイー

asyst 2016/11/29

すごい労力のかかったドキュメントだ。ありがとうございます。

リンク

PhotoSwipeの使い方！Light Boxの決定版を導入しよう！

アニメーション、スライド、ダブルクリックによるズームなど、機能盛り沢山のライトボックス系ライブラリ、Photoswipeの使い方を紹介します。

asyst 2016/10/17

リンク

ウェブキャプチャー

投稿日:2016/02/13 / 更新日:2016/02/13 ウェブサイトのキャプチャーを、スマホ、デスクトップ、タブレットと、デバイス別に取得できるウェブサービスです。資料作りなどにご活用下さい。キャプチャーを作成キャプチャーを作成するURLアドレスを入力して下さい。1〜3分後にキャプチャーが作成され、それから24時間の間だけ画像が保存されます。ウェブサイトにそのまま画像を埋め込むことはできません。作成作成したキャプチャーが、ここに表示されます。ヒント基本的な操作入力フォームに、キャプチャーを撮りたいウェブページのURLアドレスを入力し、「作成」をクリックして下さい。キャプチャーの作成を開始します。作成には1〜3分ほどの時間がかかります。作成した画像は、「DOWNLOAD」をクリックすると保存できます。保存せずに、直リンクしてウェブサイトなどに埋め込むことはできません。画像は一

asyst 2016/02/14

リンク

JavaScriptで位置情報を取得する方法(Geolocation API)

ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。サンプルデモを見る現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G

asyst 2015/11/16

リンク

短縮URLメーカー

投稿日:2014/10/14 / 更新日:2016/02/02 オンライン上で、長いURLを見やすく短縮できるwebサービスです。GoogleやBitlyなど、有名な短縮URLサービス、7つに対応しています。短縮URLを作成するGoogle goo.glBitlybit.lyis.gdis.gdv.gdv.gdOw.lyow.lyTinyCCtiny.ccUX.NUux.nu短縮したいURLアドレスチェック短縮後のURLアドレス確認するヒント基本的な操作「サービスの選択」で、短縮URLの種類を選択して下さい。「短縮したいURLアドレス」に、短縮したいURLアドレスを入力して下さい。準備ができたら「短縮URLを作成する」のボタンをクリックして下さい。下のフォームに、作成した短縮URLが表示されます。Firefox、Chromeなど一部ブラウザなら、クリックしただけでコピーできます。ht

asyst 2014/10/14

リンク

oEmbed APIの使い方まとめ！URLから埋め込みHTMLタグを作ろう！

oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。統一規格ってどういうこと？統一規格があることで、web開発者はoEmbedの仕様だけを知っておけば、「個別に各サービスの仕様を調べる」といった学習コストをかけることなく、様々なサービスの埋め込み用コンテンツを利用することができるわけです。 2014年9月には日本で人気のブログサービスはてなブログが、このoEmbedの規格を採用して、ブログ記事の埋め込み用コードを取得するAPIを公開しました。採用するサービスが増えれば増えるほど、web開発者にとって好ましい環境が整っていくというわけですね。