前の記事を岡田がバズらせたので、プレッシャーを感じている山田です 公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その２です。 僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。
自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて | ココノヱブログ
前の記事を岡田がバズらせたので、プレッシャーを感じている山田です 公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その２です。 僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
印刷範囲を指定できるjavascript「jPrintArea」
印刷時にナビゲーションなどのいらない部分を省略したい時があります。 CSSを分けることで可能ですが、いちいち別のファイルを作成するのも面倒です。 jPrintAreaでは簡単に印刷範囲を指定することができます。 sponsors 使用方法 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(functio
JavascriptでIEからテキストファイルを保存、読み込みする - ウィリアムのいたずらの、まちあるき、たべあるき
Windowsでかつ、InternetExplorerを使ったときだけなんだけど （また、セキュリティ上、HTTPを使わないで、そのファイルをダブルクリックして表示したときだけなんだけど） Javascriptから、テキストファイルを保存、読み込みさせる方法 Scripting.FileSystemObject を使います。 ■仕様 outtest.txtというファイル名で ＜html＞ ＜head＞＜title＞ファイルのテスト＜/title＞＜/head＞ ＜body＞ ＜SCRIPT Language="JavaScript"＞ ＜!-- //======================================// // ファイルシステムの取得 // //======================================// var fs = new ActiveX
Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル 当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss
Webアプリに高機能な音声認識を追加するWeb Speech API - Kesinの知見置き場
Microphone' by Juan_Alvaro, http://www.flickr.com/photos/31590610@N03/5408706936/ CC by 2.0 最近、にわかに音声認識というものが盛り上がっています。 スマートフォンに搭載されている、AppleのSiri、NTTドコモのしゃべってコンシェル、Googleの音声検索あたりが有名ですが、お掃除ロボやエアコン、カーナビといった家電にも音声認識機能が搭載されるようになってきました。 認識の精度や意識の問題（人前で機械に話しかけるのはちょっと恥ずかしい）などの課題はありますが、音声認識はアプリや家電のUIの一部としてこれから普及していくと思われます。 ですが、一般の開発者にとって音声認識機能を自分のアプリやウェブサイトに組み込むのはまだまだ難しいです。 Juliusのようなオープンソースの音声認識システムもありま
potraceをjavascriptに移植した - Webと文字 - Webデザイン・デザイナーの制作に役立つネタまとめ / ニコニコ風
[ ｜ω・） ] [ actionscript ] [ ActionScript3 ] [ algorithm ] [ canvas ] [ image ] [ svg ] [ ip ] [ javascript ] [ javascript.lib ] [ js ] [ photoshop ] [ potrace ] [ programming ] [ vector ] [ Web ] [ Webサービス ] [ これはすごい ] [ プログラミング ] [ 画像 ] [ ライブラリ ] [ コンピュータ・IT ] [ トレース ] [ 画像処理 ] [ tool ] canvas,ラスタベクタ変換 ベクター画像/生成、二値化/輪郭 「コードはnitoyon氏とPeterSelinger.氏がすべての権利を有します」? ベジェ化 potraceとはラスター画像からSVG等のベクター画像を
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その1 - Webと文字
○|￣|＿ ＜編集中に記事が消えました…サンプルのみです。 サンプル 青空文庫から宮沢賢治、「グスコーブドリの伝記」をサンプルに選びました（参考資料１）。IE、FireFox、Chrome、Safariで見れると思います。マウスホイールで拡大、縮小が出来ます。 サンプル：グスコーブドリの伝記 参考資料 宮沢賢治 グスコーブドリの伝記 追記：2010/5/17,24 縦組 文字を縦に組み上げることを縦組といいます。以下の資料が詳しいです。 日本語組版処理の要件（日本語版） この文書は，CSS，SVGおよびXSL-FOなどの技術で実現が求められる一般的な日本語組版の要件を記述したものです．この文書は，主としてJIS X 4051（日本語組版規則）に基づいていますが，一部，JIS X 4051に記載されていない事項にも言及しています． 日本語組版では文字は正方形の外枠を持ちます。 これはバウンデ
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その2 - Webと文字
前回は組版の観点からtypeface.jsに手を入れてみました。 JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その1 - Webと文字 今回はGoogleAppEngineを利用して、サービスの土台を作ります。 フォントサイズの問題 typeface.jsで使用するフォントサイズは、元のフォントサイズの２〜４倍になります。8MBの日本語フォントだと20MB近くになります。これでは手軽に試してみることができません。そこで、任意のサイトの使用文字のみを含んだJSフォントを提供するWebサービスを作ります。 Google App Engine Google App Engine - Google Codeはこういった用途に対して、無料で、手軽に利用できます。参考資料1を参照して、GMAILのアカウントとサービスの登録を行います。途中、携帯電話のメールアドレスが必要になります。サービス
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その3 - Webと文字
例によってサンプルのみです。Google App Engineでギコ文庫というアプリを作ってみました。 ギコ文庫：http://gikobunko.appspot.com ギコ文庫はWebテキストを縦書き+アンチエリアスで読めるかも知れないサービスです。 URLを入れて実行を押すと、htmlが生成される。 js側の方は調整してないので表示がグダグダなのがわかる。 縦書き用のフォントはIPAフォントのダウンロード || OSS iPediaのIPAexフォントを利用した。ライセンスは詳しく調べてない。問題ありそう。 細かい解説や技術情報は今週末になると思います。あくまでサンプルです。実用に耐えられるようには出来ていません。
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その4 - Webと文字
前回JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その3 - Webと文字はサンプルのスクリーンショットを貼りました。今回はその解説です。 GAEで作成したアプリ：ギコ文庫 ギコ文庫：http://gikobunko.appspot.com/ Beautiful Soup JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その2 - Webと文字ではminidomを使用してhtmlの解析を行いましたが、今回からそれをやめてbeautiful soup（参考資料1）を使用します。理由は、minidomの解析時間です。 XMLの論考: PythonにおけるElementTreeのXMLプロセス（参考資料2） xml.minidomは、適度な大きさを超えるようなXML文書の処理には向いていないということが明らかになりました。その他は（公正に見て）適切な結果になっています。 参考資
HTML5のCanvasを使いやすくするライブラリまとめ
HTML5のCanvasを使いやすくするライブラリまとめ HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。 投稿日2013年12月20日 更新日2014年02月08日 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circl
webRTCで顔認識(face.js)を試してみた。 - Alumican on workbench
face.jsって、なんか、顔認識できるらしいぞ。凄い！ そんなわけで、試してみる。 ccv.jsとface.jsを使うと実現できるぽい。 ccv.jsは、コンピュータビジョンのライブラリ。 face.jsは、顔認識するためのパターンデータみたい。 ２つのソースは、以下から取得してきた。（どこがオリジナルかわからず。。。） https://github.com/wesbos/HTML5-Face-Detection 顔を認識っていったら、誰もが一度はやってみたいと思ったはず。 顔を笑い男に上書きするやつを書いてみた。 ソース(sample02.html) <html> <head> <title>sample02</title> <script type="text/javascript" src="./js/ccv.js"></script> <script type="text/jav
WebRTC getUserMedia 簡単Webカメラ - jsdo.it - Share JavaScript, HTML5 and CSS
2013/11/25 taock WebRTCのgetUserMediaを利用して、カメラ、マイクの動画、音声を取得するサンプルです。 canvasに動画キャプチャを表示する機能が付いています。 //APIを格納 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //window.URLのAPIをすべてwindow.URLに統一 window.URL = window.URL || window.webkitURL; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } // 変数 var canvas =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ameblo.jp/linking/entry-10296971396.html
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
RxDB - JavaScript Database | RxDB - JavaScript Database
