画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」 – bl6.jp
Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を備えたイメージギャラリーを実装できるjQueryプラグインです。画像をドラッグして位置を移動させることもできます。 Viewerのデモは以下からチェックできます。 デモ デモはレスポンシブになっているので、いろんなデバイスで見れるのがうれしいですね。 拡大や縮小などができるので画像をじっくり見たい時に便利です。オプションも、ボタン、ナビバー、タイトル、ツールバー、フルスクリーン、キーボードなどさまざまな項目が用意されています。 イメージギャラリーをカスタマイズして実装したい方にもオススメです。 というわけで、便利な機能がいろいろ付いたイメージビューアを取り入れたい時に活用されてみてはいかがでしょうか。 Viewerのダウンロードや詳しい使い方は以下からどうぞ。 Viewer
[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。
![[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/af9a10d85702c4d930b7cc9ea507b0a9293a16c1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111901.png)
長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」 – bl6.jp
Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれるjQueryプラグインです。いわゆるmoreタグを生成させることができます。リンクになっているのでこれをクリックすると全文が表示されます。 以下はShortenの実際のデモページになります。 デモ moreをクリックすると短縮された分のテキストが表示されます。全部表示されるとmoreはlessというリンクになるので、lessをクリックすると短縮された状態に戻ります。 この手の機能はコメントやレビューなどに使われているのをよく見かけます。シンプルな機能ですが、その�ぶん使いどころはたくさんありますね。 テキスト量が多くて見辛い時やスペースを有効的に活用したい時なんかにも役立つかと思います。 セッティングに関してもこのようにとてもシンプルで使い易いです。 $(element).shorten(); 「more」や「less
動画と音声のコンテンツ - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
地理空間情報Webアプリの開発(4) - 合同会社ミドリアイティ
前回までに、地理空間情報を活用したモバイルWebアプリケーションのサーバー環境を構築し、サーバー側プログラムを開発しました。 そこで今回は、簡単なクライアント側プログラムを開発します。 今回開発するプログラムは、現在地を中心としたOpenStreetMap上に、近くの応急給水拠点をマーカーで表示するというものです。 HTMLファイルの完全なリストは以下の通りです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>現在地近くの応急給水拠点</title> <style> html, body { padding: 0; margin: 0; height: 100%; } #mapdiv { height: 100%; width: 100%; } </style> <script type="text/javascri
Leaflet – OSMにgeoJSONでマーカーをつけたりできる便利なJavaScriptライブラリ
#map { height: 180px; } 地図のデフォルト値を設定して、描画する // 地図のデフォルトの緯度経度(51.505, -0.09)と拡大率(拡大レベル13) var map = L.map('map').setView([51.505, -0.09], 13); // 描画する(Copyrightは消しちゃダメよ) var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors, CC-BY-SA', maxZoom: 19 }); 特定の座標にマーカーを置く L.marker([50.5, 30.5]).addTo(map); 動作サンプル See the Pen raGPex by
Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
5分で完了！Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方 | ランサーズ（Lancers）エンジニアブログ
こんにちは。 開発部の 神庭（godgarden）です。 先日、サービスの操作説明をするために、操作マニュアル（チュートリアル）ようなものを作りたいって要望があり、少しだけ調べる機会がありました。 操作マニュアル（チュートリアル）といえば、前職の受託システム会社で働いていた時では、ExcelやWordを駆使してゴリゴリ頑張って作っていました。 ただ、画像や文字・図形だけで作られた操作マニュアルでは、細かいところの説明や動きを、エンドユーザー様にうまく伝えることが難しく、電話で補足しないと伝わらないってことも何度かありました。（私のドキュメント作成能力の問題かもしれませんが…） ほかにも、仕様変更や機能拡張などでシステムは日々進化していっているのに、操作マニュアルやチュートリアルは、古いままって状態もありました。ご経験ありますよね・・・？ 今回調べるにあたり、そういった背景やWebサイト/W
Instagram APIでおうちごはんカレンダー作ってみた｜くろひつじのメモ帳
仕事でInstagram APIを使うことになったので、勉強がてら以前から作ってみたかった「おうちごはんカレンダー」を作ってみました。 １年以上も前の記事です。情報が古くなっている可能性があります。 できたもの ・我が家のおうちごはん（JavaScript版） ・我が家のおうちごはん（PHP版） ・みんなのおうちごはん APIの仕様変更に伴い、上記サイトは削除しております。ご了承ください。 我が家のおうちごはん ２つは、どちらも私が@mei331のアカウントで投稿している写真の中から#おうちごはんタグのついたものだけを抽出してカレンダー状に表示しているものです。 みんなのおうちごはん はInstagramの写真すべてから、#おうちごはんタグのついたものだけを抽出し、並べています。 Instagram APIについて Instagram APIを使う場合、Instagram Develope
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
SEOとか考える前に基本をおさらい。.htaccessとrobots.txtを見直そう！
photo credit: Control Room / cliff1066 .htaccessやrobots.txtを設定していない方は、まずファイルを作成しましょう。 テキストエディタで『htaccess.txt』と『robots.txt』を作成します。 中身はなにも書いてなくてOK。 これをブログなどを公開しているサーバへアップロードします。 アップロードした『htaccess.txt』を『.htaccess』にリネームしたら完成！ ※ファイル名の先頭に『.』を付けると、そのファイルは見えなくなってしまいます。 そのため、アップロードしてからファイル名を変更するようにしてください。 .htaccessでページコントロール 外部からのリンクでURLが間違えている場合や、画像への直リンクなど。 どうしてもコチラの意図や希望から外れてしまうことは生じます。 そうしたときに、できるだけコント
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ajaxzip3 - Google Code