Sass製SVG爆速表示ライブラリのご紹介 - dwango on GitHub
こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションのmisuken(GitHub/Twitter)です。 今回は10月に公開したsmart-svgとreact-sass-inlinesvgという2つのSVG表示ライブラリに関して、作成に至った経緯、ライブラリの特徴、工夫したポイント、パフォーマンス等の話をしていきたいと思います。 ライブラリを作成した経緯 これまでのSVGの表示方法 ニコニコ生放送ではこれまで、SVGを表示する際にはreact-inlinesvgというライブラリを使用していました。 react-inlinesvgは<img>のようにsrcにURLを渡して表示するタイプのライブラリです。 SVG要素がDOMに展開されるため、CSSからスタイルを適用できます。 react-inlinesvgのREADMEに書いてある使用例。 import React from '
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
Ionicでのアプリ開発の始め方 - Qiita
Ionicとは? Ionicとは、Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワークです。 Build amazing apps in one codebase, for any platform, with the web. （公式サイトより） とあるように、Web/iOS/Android アプリが全て同時に開発できる、いわゆるハイブリッド開発ができる優れものです。1 また、近年Webをアプリとして便利にするPWA(Progressive Web Apps)という仕組み2も誕生しましたが、IonicはこのPWAにも標準でサポートしています。 Ionicの始め方 とりあえず手元で始める場合は、以下の手順で始められます。 1.Node.jsをインストール 2.Ionic, Cordovaを
GoogleスプレッドシートのデータをJSONで取得してみた
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 最近一段と寒くなってきましたが皆さんいかがお過しでしょうか。 私は寒さに弱いので、早速コートを出してきました。冬本番になったら何を着たらいいのだろう…… 先日GoogleスプレッドシートのデータをJSONで扱う機会があったのでここで、ちょっとまとめておきたいと思います。 もくじ 事の発端 Google Sheets APIとは 4ステップでデータを取得する JSON形式のデータをjQueryで整形する まとめ 事の発端 社内で運用しているチェックシートをもっと手軽にできないか、という要望があったのでチェックフォームを作りました。 チェック項目のデータはその他のものにも転用したい為、Googleスプレッドシートで管理しています。 イメージとしてはこんな感じ。 Googleスプレッドシートを選んだ具体的な理由はこちら。 wikiにWY
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自
JavaScriptフレームワークについて個人的な思い - 当時を振り返りながら - albatrosary's blog
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。１年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター·JS Bin MOONGIFT
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
Lifehacker：Firefoxアドオンの作り方 - ITmedia Biz.ID
多少のプログラミング経験があれば、Firefoxアドオンを作るのはそんなに難しくない。自作アドオンを作るためのハウツーを紹介する。 ここで自家製Firefoxアドオンをリリースし始めて以来、何人ものユーザーから「Firefoxアドオンを作るのは難しいの？」という問い合わせを受けた。多少プログラミングの経験がある人なら、その答えは「そんなに難しくない」だ。 Firefoxアドオンの中身はJavascript――ブックマークレットや従来のWebページで使われている、あまりミステリアスではない言語――とXUL（「ズール」と発音する）というマークアップ言語だ。独自のアドオンを作るには、ある程度のJavascriptのノウハウとXMLファイルの快適な編集、それからお気に入りのブラウザを思いのままにすることへの健全な好奇心が必要だ。 わたしがWeb上のフリーチュートリアルを使ってFirefoxアドオン
Free Static HTML Website Templates - Designmodo
Free Static HTML Website Templates Designmodo offers a collection of HTML website templates that can be customized and downloaded using the Slides application. Use one of these templates as your starting point when you want to create landing pages or multi-page websites. Wedding Website Template This beautiful website template is specifically designed for wedding planners, event coordinators as we
「jQuery Mobile 1.0」リリース | ソフトアンテナ
スマートフォン用のJavaScriptライブラリ「jQuery Mobile 1.0」がリリースされています。ここからダウンロード可能。jQuery Mobileを使用すれば、HTML5のタグを使って、JavaScriptを直接書く必要なくスマートフォン向けのサイトを構築することができるようです。デモもありました。
360度パノラマ画像をFlashビューアーで表示させる - みんなのＩＴ活用術
Pandoraで作ったパノラマ画像をFlashのビュワーを使ってウェブで公開する方法をご紹介します。パノラマ写真は撮影範囲が広くなるほど横長になってしまい、それを見るパソコンのモニター画面によっては原寸表示時にすべて表示しきれない場合もあります。ビューワーを使えばデジカメ画像のアスペクト比に近いサイズで、マウス操作で左右を（上下も）移動させてグルリと見回すことができます。 ※Pandoraの使い方は、「普通のデジカメ画像を合成してパノラマ写真を作る」をご覧ください。 パノラマビューアーといえばQTVRパノラマが最もポピュラーではないでしょうか。検索するとその作成ノウハウがたくさんヒットします。しかし残念ながら作成用ソフトはMACでしか使えませんでした。また現在も作成ソフトが配布されているのかは不明です。 Ryubin's Flash Panorama Laboratory のパノラマビュー
Big Sky :: スコープと参照と...
部下にも何度も説明してて、この辺がC言語のポインタみたいな鬼門なのかなーとか思いながら。 javascriptでhtml内のonclickの内容を書き換えようとしています.. - 人力検索はてな javascriptでhtml内のonclickの内容を書き換えようとしていますが 変更後の関数に変数を渡すと、変更後の関数(load)自体が実行されてしまい、うまくいきません 現在は以下のように、onclickの内容を変更しようとしていますが、 関数を実行させずに、html内のonclickの内容だけ書き換える場合はどのようにしたらいいですか？ document.getElementById('box').onclick = (function(id){ load(id) })(userid); http://q.hatena.ne.jp/1305849029 こういうコードになった経緯を考える
BigtableをjQueryで操作できる「gaedirect」とは
BigtableをjQueryで操作できる「gaedirect」とは：クラウドとgaedirectでできる緊急対応マッシュアップ（1）（1/3 ページ） 緊急時の“クラウド”の有用性 このたびの東日本大震災で被災された皆さま、ご家族ならびに関係者の皆さまに、心からお見舞いを申し上げます。今回の大震災では、多くのWebサイトでアクセス不能状態が発生したのは、記憶に新しいところです。緊急時こそ、必要な情報を入手するために多くの人がWebサイトにアクセスするわけですが、このような切実に情報が必要とされるときに限って、トラフィック増大によるアクセス不能が発生してしまう状況が多々見られました。 しかし、このような緊急時対応サイトをGoogle App Engine（以後、GAE）などによってクラウド化しておけば、このような問題は解決できたといえます。クラウドを使用すれば、ユーザーアクセスが急激に増加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top 4 JavaScript Concepts a Node.js Beginner Must Know
見出しタグ（h1～h6）へのリンクリストを動的に生成する | Web Design Leaves
Is it possible to run an .exe or .bat file on 'onclick' in HTML
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
GitHub - Seneca-CDOT/c3dl: Repository for c3dl (Canvas 3D JS Library). See wiki for related links
