feb192024.12.12(Thu.) USB と HDMI どのケーブル使ったらいいのか困ったので規格整理したよ
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
『javascriptで画像処理してみよう(1)〜OpenCVjs〜』
画像処理だけで飯が食えるかっ！？ 主にコンピュータ関連の話題中心にしていこうかと思ってますがどうなるかは不明です。 写真の加工や顔認識といった画像処理の話題が多くなるかと思います はじめまして。京都の会社で画像処理エンジニアをしてますsakiyamaKです。 いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。 で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。 名づけてOpenCVjs！ 名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVのjavascript移植版です。 せっかく作ったんで誰かに
【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ - nigoblog
前回ざっくりWEBアプリが来る!という記事を書きました。 というわけで今回はWEBアプリの作り方!特にcanvasを利用したアプリの作り方について書いていこうと思います。かなり内容は入門者向けですので、まだプログラミングを知らないという人でも記事を読みながらプログラミングが出来ると思います。 これも連載形式で書いていこうと思います。 連載が終わる頃にはcanvasでWEBアプリを作れるようになっていることでしょう! 第一回目のテーマは色々やってみようということでcanvas関連メソッドのリファレンスを書いていきます。 参考図書 canvasで出来ること canvasを使う準備 canvasで良く使うメソッド まとめ という流れで書いていきます。 参考図書 参考図書にはこちら。 HTML5 Canvas 作者: Steve Fulton,Jeff Fulton,安藤慶一出版社/メーカー: オ
第三回全国統一HTML5実技コンテストで楽しく学んで豪華賞品をゲットしよう！ - Webデザイン初心者向けのあれこれ
皆さんはご存じですか？jsdo.itが行っている 「第三回全国統一HTML5実技コンテスト」 http://jsdo.it/event/html5csc/vol3 お題はHTML５で表情を豊かに表現する「顔文字（・∀・）」です。 エントリーは誰でも簡単にできるみたいです。 また、選ばれると豪華な賞品をゲットできます。 凄いですね。 MacBookProはめっちゃ欲しいです～ スクリプトを勉強中の方や得意な方は挑戦してみて下さい。 応募期間は1/16日までなので気をつけてくださいね。 学生やクリエーターなどたくさんの人がエントリーしてますね。 またjsdo.itは作品のコードも閲覧できるので、気になった動きなどを参考にして みるのもいいかも知れません。 またスクリプトが苦手な方はこちらで勉強してみてください。 とほほのJavaScriptリファレンス http://www.tohoho-we
ネイティブよりも速いと評判のfastbookの裏側を調べてみる - webとかmacとかやってみようか R
本記事は、Sencha Advent Calendar 2012 の23日目の記事です。1日遅れでごめんなさい！あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！ Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。 原文: The Making of Fastbook: An HTML5 Love Story 和訳: HTML5へのラブストーリー: メイキングオブFastbook ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。 ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbo
コンテンツの内容はそのままで外枠だけに傾きを与えるJSライブラリ「Maskew」:phpspot開発日誌
Maskew - a javascript library for skewing the shapes of elements コンテンツの内容はそのままで外枠だけに傾きを与えるJSライブラリ「Maskew」。 次のように、中身はそのままなのに、枠だけ傾かせてちょっとオシャレにするライブラリ。依存ライブラリはなく５KBで手軽に使える 画像の一覧に適用したところ。単に四角形の枠で画像を見せるより新鮮 レイアウトの１つのテクニックとして覚えておいてもよさそう 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 スピード感が凄いプログレスバ
Chrome DevTools.next
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！」での講演資料です。
File API で作成した blob をダウンロードする
この記事は “HTML5 Advent Calendar 2012” の16日目の記事です。他の記事もぜひご覧ください。 HTML5 では BlobBuilder オブジェクトを作成して、ファイルをメモリ上に読み込んだり、あるいはユーザーの入力やサーバーから取得したデータを元にしてメモリ上にファイルの内容を作成することが可能です。また作成した Blob は XML HTTP Request (XHR) の FormData としてサーバーにアップロードすることも可能です。 ではメモリ上の Blob をローカルに保存したい場合、どうすればよいでしょうか。Web ページのスクリプトから直接ローカルのファイル システムを操作する File System API (File API: Directories and System と File API: Writer) の標準化について議論が進めら
『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト用の軽量ライブラリ QUOjs HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。 以下のサイトからダウンロードできます。 QuoJS 英語ですが以下のページに使い方が書いてあり
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
How to Make A Simple HTML5 Game With Enchant.js
Are you curious about developing cross-platform mobile games that work in a web browser? Well, as you probably know, Apple doesn’t allow Flash to run on iOS devices, and Adobe has pulled the plug on Flash for mobile. This makes HTML5 your only solution – but actually a pretty good one! The thing is, while there are many HTML5 game libraries available, only a few of them support mobile browsers. In
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
Minecraft4kJS - jsdo.it - Share JavaScript, HTML5 and CSS
A quick port of Minecraft4k to test what's possible in JS and HTML5. Because of the nature of this project (it was originally meant as an entry for the Java4k competition, which focuses on executable size), the code is HORRIBLE, but fairly small. You may use the code in here for any purpose in any way you want, at your own risk. var ctx; var pixels; var w = 200; var h = 200; var map = new Array(64
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn web development | web.dev
English (US)
何度も読み直したい！はてブ数300以上のWeb制作系スライド2012年版
アプリ開発の
