Dropboxも採用！JSだけでPDFをレンダリングできるPDF.jsにしびれた！
WebアプリでPDFを扱うときって、どうしています？ 一昔前ならサーバーサイドで生成してAdobe Readerで表示させるぐらいでしたが、いまならJavaScriptだけで描画も制御できちゃうんですね。 本記事はJani Hartikainen、Florian Rappl、Jezen Thomas、Jeff Smithが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 現在のブラウザーはほぼすべて、WebサイトでのPDF文書を閲覧できる機能を最初からサポートしています。しかし、開発者はこのもともと備わっている機能を制御できません。たとえば、Webアプリ側のルールでPrintボタンを無効にしたい場合、有料会員への移行ページだけをレンダリングしない場合などを考えてみます。embedタグを使えばブラウザーにもともと備わ
Scout2
Description Scout2 is an open source tool that helps assessing the security posture of AWS environments. Using the AWS API, the Scout2 Python scripts fetch CloudTrail, EC2, IAM, RDS, and S3, configuration data. The gathered configuration is analyzed and stored as JSON objects in several JavaScript files. These files are imported in the Scout2 HTML report, which allows for a quick and efficient rev
3Dデータ(Blender)をThree.jsで表示するまでの方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは。 最近、懐かしのアニメを見ることにはまっています。ハルです。 今回は、「3D表現がしたい！」と思い、 こんな感じの3D表現を、Blender で作成したデータを簡単に書き出して Three.js で簡単に表示させる方法をまとめてみました。 今回の完成ファイルをGithubに公開しています。よろしければ参考にしてください。 完成ファイル：https://github.com/hal-satoyuki/sample3d 完成ページ：https://hal-satoyuki.github.io/sample3d/ それでは早速、作っていきましょう！ 今回の動作確認ブラウザについて 動作確認のブラウザには、Firefox を使います。GoogleChrome で確認すると、XMLHttpRequest のエラーが出てしまうためです。 また、手順については、MacPC での説明を
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
引っ越し祝いに大きめのエジプト神像を送りつけられたのでラズパイを仕込んで喋れるようにした - Qiita
プロローグ 恋人と暮らすことにしたので、新しい部屋に引っ越した。 家具やインテリアのテイストも二人で相談して、忙しい日々の中でもくつろげる落ち着いた空間を作ろうとしていた。 そんな幸福な日常が終わりを告げるまで、そう長くはかからなかった。 引っ越しも一段落して、新しい部屋にも慣れ始めたある朝、友人から引っ越し祝いと称して身の丈1mほどの神像が送りつけられた。 古代エジプトで天空神として崇められた、「ホルス神」をしつらえた置き時計だった。 その日からホルス神は、我が家のリビングに鎮座することになった。 準備 というわけで今回は、Raspberry Piを使ってリビングに突如として現れたホルスを喋らせて、さらに目覚まし機能を搭載してみようと思います。 今後エジプト神像を送りつけられた際の参考にしてください。 必要なものはこちら。 Raspberry Pi 2 micro SD スピーカー US
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
バージョン管理したくない作業用スクリプトは「,」ディレクトリに入れるといい - Qiita
TL;DR: グローバルな gitignore に ,/ を追加して、作業用スクリプトを , ディレクトリに入れると便利。 ,/tmp_script.sh で実行できる。 Git リポジトリの中に一時的に使う作業用スクリプトを置いておきたいことがある。自分だけが使うものなのでコミットはしたくないが、いちいち .git/info/exclude に追加して無視させるのも面倒臭い。 今まで自分は、 tmp_script.sh~ や tmp_script.sh.bak など、グローバルな gitignore で無視されるファイル名にしていたが、これは不要なファイルと間違えて消してしまう危険がある。 ignored.tmp_script.sh は分かりやすいぶん長い。 _tmp_script.sh は悪くないが、コミットすべきファイルにもアンダースコアで始まるものがあって紛らわしい。 そこで、作業
Appleの商品スライダーを再現したjQueryプラグイン「Kiwi-slider」
Posted: 2014.10.28 / Category: javascript / Tag: jQuery 「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。 プラグインのダウンロードと準備 デモ＆ダウンロードは下記から Kiwi-slider html & css ダウンロードした「kiwi.css」「kiwi-slider.js」を読み込んだら、後述するidを「new KiwiSlider」で指定します。 html <link rel="stylesheet" type="text/css" href="stylesheets/kiwi.css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="javascrip
Photoshopを快適カスタマイズできるオススメ無料プラグイン6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
Photoshopでラクをしたい一心で見たサイトまとめ【スクリプトとエクステンション編】 - ぬんびりぶろぐ
ツイート ミクさん誕生日おめでとう！ヌン（@nun_）です。 フォトショップでできるだけラクをするには、アクションとかレイヤーのスタイルファイルでしょ！と思っていましたが、もっとラクできないかなと思って「スクリプト」と「エクステンション」なるものを調べてみました。 別次元だったよ・・・すごいラクできるよ・・・ しかもスクリプトは自分でカスタマイズできるよ・・・ スクリプト スクリプトを使う すてきなスクリプトがわんさか http://webdrawer.net/tools/psextention.html じぶんでスクリプトを書いてみる いちばん簡単だとおもったやつ http://ascii.jp/elem/000/000/437/437333/ ていねいなガイド http://stocker.jp/diary/photoshop-jsx/ 順を追って学べる http://www.open
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2014年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2014