Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
フロントエンドに秩序は戻ったか？
Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック
相次ぐモダンなフレームワークの登場、脱jQueryの動き、ECMAScriptの進化など、SitePointの常連ライターが2016年のJavaScript事情を振り返ります。 2016年は、見方によっては歴史的であり、奇妙でもあり、楽しくもあり、恐怖でもあった年でした。JavaScriptだけに絞ると、ほかの大きな出来事に比べれば取るに足りない変化に見えますが、開発者にとっては重大な出来事でしょう。 JavaScriptの人気はとどまるところを知りません。すべての人に好かれる言語仕様ではありませんが、10年前のように馬鹿にされることはほとんど無くなりました。個人的にはJavaScriptが大好きです。そう、あのもどかしかった初期の頃からです。C++やJava、あるいはPHPから移ってきた人は最初は戸惑うでしょう。JavaScriptは取っ付きやすく見えますが、実はそうではありません。でも
JSCapture·こんなことまで！JavaScriptでスクリーンショット&キャストの保存 MOONGIFT
HTML5ではgetUserMediaを使ってWebカムにアクセスできるのは良く知られています。しかしデータの入力元は他にも考えられます。その一つがディスプレイです。画面に表示されている内容は確かに出力データになるでしょう。 そんな画面の内容をキャプチャできる機能が最新のGoogle Chrome（35以上）から登場しています。その実験とも使い方を紹介するのがJSCaptureです。 JSCaptureの使い方 まず最初にGoogle Chromeの設定を有効にする必要があります。 設定を有効にしたら再起動しましょう。 まずはキャプチャです。JSCaptureのサイトで実際に試すことができます。キャプチャをクリックするとダイアログが出ます。 画面共有の確認が出ますので、はいを押します。 見事キャプチャされました。Downloadを押して画像として保存できます。 次にレコーディングです。結構
HTML形式でプレゼン用のスライドが簡単に作成できる「WebSlides」
HTMLの基礎的な知識さえ持っていればテンプレートをいじるだけで簡単にプレゼンテーション用のスライドを作成できるのが「WebSlides」です。PCの矢印キーを押すだけでサクサクスライドを切り替え可能で、HTML形式なので特定のパーマリンクへ飛ばしたり閲覧者数をカウントしたり500種類以上のSVGアイコンを使用することもできます。 WebSlides: Create Beautiful HTML Presentations https://webslides.tv/ 実際にWebSlidesで作成したプレゼンテーションをそのままウェブページにしたのが以下の4つ。矢印キーで手軽にスライドを移動でき、読みたい内容が「何枚目のスライドに書かれているか？」がわかればURL末尾に「#slide=(スライドの番号)」を付け加えればお目当てのスライドまでジャンプすることもできます。 上下の矢印キーでスラ
paste.js - JavaScriptでクリップボードからペーストされたデータを読み取る MOONGIFT
HTML5になってクリップボードの内容にもある程度JavaScriptからアクセスできるようになりました。ファイルをアップロードする際にもinput(type=file)を使う以外にもドラッグ&ドロップでのアップロード、さらにペーストを使うこともできます。 そうしたクリップボードで処理されたコンテンツを扱いやすくしてくれるのがpaste.jsです。 paste.jsの使い方 ペーストされる対象は入力欄に限りません。普通のDOMでも行えます。 テキストをペーストしたところ。ちゃんと補足できています。 contentEditableの場合、フォントの装飾も反映できます。 画像の貼り付けもできます。 画像を貼り付けた場合、blobになって展開されます。後はCanvasなどに描画することもできますし、サーバへアップロードすることもできるでしょう。デスクトップであれば当たり前なコピー&ペーストもWe
JavaScriptでローカル画像を表示する方法
2017/06/22 ファイルをアップロードする前のプレビュー表示など、ユーザーがサーバーにアップロードしなくても画像をウェブページ上に表示する方法です。データURI形式で表示する方法と、Blob URLで表示する方法の2種類があります。 サンプルコードBlob URL、またはData URIを取得し、それをそのままimg要素のsrc属性に指定すれば表示できます。 <input id="target" type="file" multiple> Blob URL document.getElementById( "target" ).addEventListener( "change", function() { var fileList = this.files ; for( var i=0,l=fileList.length; l>i; i++ ) { var blobUrl = wi
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
日付ピッカーを実装するだけのシンプルなスクリプト・Pikaday - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルな日付ピッカーを実装する 為のスクリプト・Pikadayのご紹介。 jQueryなどに依存せず、独自で動作 する非依存型スクリプトなので使い やすいのでは無いかと思います。 シンプルな非依存型のデートピッカーです。ありそうでないような。 普通のデートピッカーです。他ライブラリを必要としないので手軽に使えそうですね。圧縮版で9KBほど。jQuery依存版も一応あるみたいです。 Sample 動作サンプルです。日本語にはまだ直してないです。 コード <script src="pikaday.js"></script> <script> var picker = new Pikaday( { field: document.getElementById('foo'
Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し その1</li> <li data-target=".foo">吹き出し その2</li> <li data-target="b" dat
正規表現の構文を色分けして解読しやすくするスクリプト・Regex Colorizer - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 正規表現コードを色で解読しやすく する、というスクリプト。エラー の有無も分かるので、解読だけで なく、勉強のお供にもいいかもし れませんし、解読速度も速められ そうです。 正規表現コードを色分けしてくれるスクリプト。用途は開発補助・・ですね。
ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1); エフェクトは上記のように
フリップエフェクト付きのローディングインジケーターを実装するスクリプト・Flipload.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 フリップ（引っくり返す）エフェクト付きのローンディングインジケーターを実装する、というライブラリのご紹介です。目立つのでロード中というのをしっかり明示できそうです。 フリップさせる要素もいろいろと対応してるみたいです。非依存型なので単体で動作します。 フリップさせてローディング中にする、みたいなやつ。 window.setTimeout(function() { iframe.src = 'http://www.youtube.com/embed/xEhaVhta7sI?html5=1&autoplay=1'; }, 2000); Youtubeのようなiframeに切り替える、みたいな事も出来るようです。その場合は上記のようにスクリプト側でパスを指定します。 フリ
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
javascriptのcanvasで画像を自由にトリミングしてアップロードする機能を作ってみた - スケルトン・エピ
今回はjavascriptで画像をアップロードする際にトリミングするコードをcanvasを使って書いてみました。 趣味でゲームのスクリーンショットをアップロードしてみんなで見せ合うようなWebアプリケーションを作っていたのですが、元の画像サイズやファイル形式って人によってまちまちだったりします。 ゲームということもあり、デジカメのような大きすぎる画像サイズになることはないのですが、どうしてもプライベートなチャット内容が入ってしまうのは嫌です。できれば自分の見せたい範囲だけをアップロードしたいものです。 また無圧縮のpngやbmpなんかでアップロードされた場合、数MBの画像をやりとりする分けにはいきません。そこですこし劣化したjpeg等の圧縮された画像形式に変換することになりますが、これをサーバー側で行うと、プレビュー画像をユーザーに見せるタイミングがサーバーで処理を行った後になってしまい、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES2016 / ES2017の最新動向を追ってみた - Qiita
GitHub - tapmodo/Jcrop: Jcrop - The Javascript Image Cropping Engine
GitHub - fengyuanchen/cropper: ⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper![GitHub - fengyuanchen/cropper: ⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa24a7ddf8b1b2e49cde7f8ba9d5749a4d4be54d/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fa74488877ab0dc5139a37a07d9ab7398c2b445b80accb5f3c3d4545b0dcc1879%2Ffengyuanchen%2Fcropper)
GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON
