JavaScript からファイルをダウンロード保存する方法
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
Chromeの拡張機能を自作する - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC Engineers' Blog
こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例：Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン
カスタムタグ · Riot.js
カスタムタグの例 Riotのカスタムタグは、ユーザインターフェースの構成要素です。 アプリケーションの「ビュー」部分を担います。Riotのいろいろな特徴をハイライトした、TODOの例の拡張から始めましょう。 <todo> <h3>{ opts.title }</h3> <ul> <li each={ items }> <label class={ completed: done }> <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title } </label> </li> </ul> <form onsubmit={ add }> <input ref="input" onkeyup={ edit }> <button disabled={ !text }>Add #{ items.length
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
Elastic Progress | Codrops
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax. Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it’s clicked, it animates into a fun little wire and a label that indicates the downl
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
301 Moved Permanently