uGUIのレイアウトを理解する 〜 多種解像度対応 : Canvas Scaler - いんでぃーづ
1 2 3 4 前回まででRect Transform の数値の見方が分かりました。 が、アンカーの位置は相対値、要素の位置は絶対値で決めているため、画面の大きさが変わった場合に見え方が変わってしまうという問題があります。 実際に見てみましょう。 ※モバイルのほうが分かりやすいのでAndroid端末で例を出します。 前回の配置をUnityのゲームビューで見ると、下図のようになっています。 ゲームビューの解像度は 800 x 1280 です。 これを実機（SHARP SHL25、解像度 1920 x 1080）で実行すると下図のような表示になります。 一目見て分かるとおり 半透明の領域に対する白いボタンが占める領域 各領域の四隅の丸み テキストのサイズ など明らかにズレが生じているのが分かります。 これは、要素の位置関係をピクセル単位の絶対値で表しているため、高解像度の端末では数値が小さくな
MobileHackerz再起動日記: THETAの360度写真を人に渡そう！「人に渡せる」ポータブル・パノラマプレイヤーを作った
2015/05/21 ■ THETAの360度写真を人に渡そう！「人に渡せる」ポータブル・パノラマプレイヤーを作った 「360度写真」が一発で撮れる不思議デジカメRICOH THETA。以前のレビューにも書きましたが、「その場の雰囲気を残す」家族スナップのためのカメラとしてとても優秀で、その後も普通に使っています。 …が、THETAを使っていろいろ写真を撮っていると… 「すごい！この写真私にも送って！」 「印刷したいんだけどどうすればいいの？」 よく言われるんです。そして、そういうときにはたと困ってしまう。 「写真送りますが、まずこのプレイヤーをインストールして…」 いや、そんなことなかなか言えないですよね… というわけで、そんなこと言わずに人に渡せる（そして写真をローカルに保存してもらえる！）ポータブル・パノラマプレイヤーというものをつくってみました。 ポータブル・パノラマプレイヤーとは
React CanvasによるモバイルブラウザのUI改善とそれが起きる必然 - ワザノバ | wazanova
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか？ スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか？いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。 David BellonaがTwitter Universityでの
クッキーより怖いcanvas fingerprintingって何？迂回方法は？
クッキーより怖いcanvas fingerprintingって何？迂回方法は？2014.07.28 16:008,790 satomi 問題：ホワイトハウスとYouPornが共通でもってるもの、なーんだ？ こたえ：canvas fingerprinting ｢canvas fingerprinting（canvasの指紋採取）｣というのは、最近大手サイトで採用が広まってる新手のオンライン追跡ツールのことです。クッキーと違って、ユーザー側からは探知もブロックもできないという、とんでもない野郎です。 まさにユーザーの知らぬ間にウェブの閲覧行動がサイトに筒抜け、というマジックミラー状態。その現状をProPublicaが記事にしていますよ。 ｢canvas fingerprinting｣を最初に発見したのはプリンストン大学と英ルーヴェン大学の研究チームです。ここが発表した｢The Web Neve
faviconの色をcanvasで変える - 0xff.toBlog()
github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。 画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。 元が の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。 var favicon=document.getElementsByTagName('img')[0]; var cv = document.createElement('canvas'); cv.width = 16; cv.height = 16; document.body.appendChild(cv); var c = cv.getContext('2d'); c.drawImage(favicon,
takram laboratory » 1時間で日本縦断してみた
Googleマップをよく使っている方ならピンときたかもしれません。 答えはGoogleマップのストリートビューを利用可能なエリアです。 昔は主要都市だけだったエリアが、今や日本全てをカバーしようとしています。 「それって、もしかしてストリートビューだけで日本縦断旅行できるんじゃね？」 などと思いついてしまったらやらざるを得ないのが人情というもの。 しかしストリートビューをポチポチとクリックしながら進むのは面倒くさすぎてとてもやってられません。 そこで見つけたのがHyperlapseというツール。ブラウザ上でストリートビューをアニメーションに変換してくれるというものです。 「なんだ、これ使えば楽勝楽勝♪」と思ったのも束の間、このHyperlapseを調べてみるとどうやらあまり長いアニメーションはできないということが判明。ストリートビューで使われている大量の写真を全てメモリ上にキャッシュす
【キタ・ミナミ】大阪キャバクラ実習マニュアル＆無料チュートリアル
関西で夜の仕事をしようと思ったら、まず大阪を思い浮かべる方が多いのではないでしょうか。 わたしも、大学進学の時に大阪に引っ越しして、そのまま大阪の周辺のキャバクラでキャバ嬢として働くようになったんです。 それから5年、今では大学進学からの正社員っていうルートは選ばずに卒業後もキャバクラで働いてるんだけど（笑） この選択に後悔は全くないし、今は仕事もすごく楽しいんだけど、キャバクラで働く上でお店選び、街選びはすごく大事なんですよね！ 特にキャバクラは街によって時給相場も雰囲気も全然違う。 だから、まずはこれから大阪でキャバ嬢の仕事を始めようと思ってるなら知っておきたい、大阪の街ごとのキャバクラの特徴についてご紹介します！ 大阪のキャバクラの特徴 大阪でキャバクラが有名な街はって聞かれたら、キタとミナミの2種類ですね。 大阪以外に住んでる方はもしかすると大阪府の北側と南側のエリアっていうイメー
アニメーションする天気アイコン群·Skycons MOONGIFT
SkyconsはCanvasタグで描かれるアニメーションする天気アイコンです。 天気サイトにはつきものの天候を指し示すアイコン。晴れや曇り、雨などが見るだけで簡単に分かります。それをもっと見やすくしてくれたのがSkyconsです。 全アイコンです。Canvasタグで描かれており画像ではありません。 使い方です。とてもシンプルです。 SkyconsはCanvasタグを画像化し、それをさらにアニメーションGIF風にアニメーションさせて表示します。画像と異なりサイズは可変で、速度や色の変更も簡単に行えるでしょう。 SkyconsはJavaScript/HTML5製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 画像の欠点はバイナリであるためにサイズの変更に対して柔軟に対応できないことです。そのため最適化されたサイズを各幅に対して
GraphvizのDOT言語をJavaScriptで実装·canviz MOONGIFT
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。 フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。 例。かなり複雑な関係性を表示しています。 別なグラフ。こちらも関係性が複雑です。 レイアウトを変更するとグラフも全く別物になります。 表示の大きさは自由に変えられます。 こんな図も。 複数線がつながっている、そんな表示も実現します。 色付きの枠。 グルーピング。 グルーピングでさらに色付き。 ノード自体が色付き。 14の頂点で相互につながっています。 同じグラフもレイアウトを変えるとこんな感じに。 Graphvizを使う場合は主に個人用途、もしくは変換後の画像
ブラウザーのCanvas/WebGLのブラックリスト
各ブラウザーのCanvasやWebGLのGPUやドライバーによるブラックリストの具体的な内容がどこかに載っていないかと探したので、忘れないようにメモしておく。各ブラウザーといっても、自由なソフトウェア実装のブラウザーでCanvasやWebGLをサポートしていて主要なものは、FirefoxかChromiumしかないが。 まず、総合的な情報としては、khronosのWikiが便利だ。 BlacklistsAndWhitelists - WebGL Public Wiki Firefoxでは、以下のページで詳細が公開されている。 Blocklisting/Blocked Graphics Drivers - MozillaWiki GNU/Linux環境では、Cairo経由でXRenderを使う（Canvas 2Dはこれにあたるか？）。これにはブラックリストはない。WebGLはデフォルトで有効化
30 Must-See HTML5 Tutorials To Wow Your Audience
30 Must-See HTML5 Tutorials to Help You Impress Your Audience If you want to be a successful web developer or designer, you always have to be a step ahead. Sooner or later, HTML5 is going to strengthen its position even further and you want to be ready when that happens. Mastering the latest technology will allow you to experiment, push things further, and give you a considerable edge in the marke
Inkscape機能拡張。ドローデータをHTML5/Canvasへ出力·Ink2canvas MOONGIFT
Ink2canvasはInkscapeで作成したドローをHTML5/Canvasに保存するソフトウェア。 Ink2canvasはInkscape用、Python製のオープンソース・ソフトウェア。オープンソースのイラストレーションソフトウェアとして有名なInkscape。数年前はまだまだ不安定だったが、最近ではずいぶん実用的になっているようだ。 出力例 描いた図をSVGで出力できるので、Webとの親和性も高い。だがSVGはXMLベースなので修正するのが大変かも知れない。そこでさらに便利にCanvasタグ化してしまうソフトウェア、Ink2canvasを使ってみよう。 Ink2canvasはInkscape用の機能拡張だ。インストールすると、Save asの項目にHTML5が出るようになる。そして保存するとHTMLファイルが生成される。中にはJavaScriptを使ってCanvasタグにレンダリ
PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
SafariのCanvasで小数点を含んだ位置に描画すると処理速度が落ちる(高速化するには整数の位置に描画) - 強火で進め
HTML5 canvas sprite optimisation | Seb Lee-Delisle http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/ こちらのブログで「サブピクセルを含んだ描画だと処理速度が落ちる為、整数に補正して位置指定をすべき」という話を見かけました。 この話を簡単に説明するとcanvasでdrawImageで画像を描画する時、Safariなどでは1.5などの中途半端な位置を指定した時にもその位置で描画された様子を表現する為にサブピクセルの描画が行われ、ぼやけた様な描画になります。 以下の画像は左側がdrawImageで整数の位置に描画したもの、右側は同じ画像を小数点を含んだ位置に描画したものになります。右側がサブピクセルの描画が行われぼやけた様な画像になっているのが確認出来るかと思い
HTML要素の上にWebGLの描画を合成したらどうなるの - 最速チュパカブラ研究会
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Lienzo 1.0：HTML 5 Canvas向けのJavaにおけるScene Graph API
Loading...
html5collect.net