Cacoo、FlashからHTML5に完全移行が完了。より快適な作図が可能に-将来的な機能拡張も視野- | Cacooブログ
報道者各位 2017年8月28日 株式会社ヌーラボ ビジュアルコラボレーションツール「 Cacoo 」 Flash から HTML5 に完全移行が完了、 より快適な作図が可能に 2020年の Flash サポート終了を受け、将来的な機能拡張も視野に 株式会社ヌーラボ（本社：福岡県福岡市、代表取締役：橋本 正徳、以下 ヌーラボ）は、自社が開発・提供するビジュアルコラボレーションツール「 Cacoo （カクー）」の基盤技術をFlashからHTML5に移行しました。 ■「 Cacoo 」基盤技術変更の背景 ビジュアルコラボレーションツールの「 Cacoo 」は、2009年のリリース以降、 Flash という技術を採用してきました。しかし、昨今ではFlashの抱える脆弱性によるセキュリティ面での懸念が指摘されることも多く、2020年には製品サポートが終了するという発表も受け、基盤技術を Flash
意外と知らないHTML5 API | 第1回 Drag & Drop APIとは
これらのイベントを使用してドラッグ＆ドロップを実装していきます。まずは最低限の機能を備えたサンプルを見てみます。 実装の最小構成 赤いボックスを下のエリアにドラッグ＆ドロップしてみてください。ドラッグしている要素がエリアに入ると、テキストがonDragOverとなり、ドロップされるとonDropになるのが確認できます。 ソースコード*は次のようになっています。 *注：JavaScriptのソースコード ソースコードの見通しをよくするためにjQueryを使用しています。 ... <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> ... ... $('#box').on('dragstart', onDragStart); $('#dropzone').on('dragover
Setting a custom ghost image when using HTML5 drag and drop
In the HTML5 spec it's possible to make elements drag-and-drop-able. This is not new news: the excellent HTML5 Rocks and HTML5 Doctor articles cover it well. However. When you drag a thing, what gets dragged is a "ghost image" of it. See for yourself: drag the green box below, and what you see when you're dragging is a green copy of it. What if you want the "ghost image" to be something other than
D3.jsで作成したグラフ(SVG)を画像として保存する - Tech-Sketch
先日公開した D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう の記事ではD3.jsをつかってグラフを作成しました。本記事ではD3.jsで作成したSVG形式のグラフをPNG形式の画像として保存する方法をご紹介します。 D3.jsにはCSVやJSONなど 様々なデータ形式を扱う為の便利なメソッド が用意されており、アプリケーションへの組み込みが容易です。しかしアプリケーションへの組み込みとなると、「X月X日の状態のグラフを保存しておきたい」、「グラフを資料に添付したい」といった要望も出てくるのではないでしょうか。 単純に画面のスクリーンショットを取得する以外では Phantom.js を利用してキャプチャを取得する方法や Apache Batik を利用してSVGを変換する方法などが考えられましたが、クライアントサイドだけで完結しない上、実装が少々手間です。
MdN Design｜総合情報サイト
※前編はこちら ふぉくすけの壁紙メーカー http://wallpapers.foxkeh.com/ja/ ふぉくすけ壁紙メーカー【1】は、Mozilla Japanが提供しているWebアプリケーションだ。これはまるでFlashのような操作感で壁紙を作成できるWebアプリケーションで、「SVG」という技術で作られている。SVG というのはScalable Vector Graphicsの略で、ベクターデータを描画するマークアップ言語だ。HTML5 よりも前から存在している仕様だが、ブラウザの対応が進んだことや、HTML5 からSVG がHTML の中にインラインで記述できるようになったことをきっかけに最近注目を集め、HTML5の周辺技術として扱われることも多い。 SVGの最大の特徴はベクターデータなので、拡大しても劣化しないということだ。通常Web で使用するPNG やGIF、JPEGとい
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」にて発表したCordovaに関する紹介です。 http://atnd.org/events/51539
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの？
27. CSSの中身を覗いてみる .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
フロントエンドエンジニアなら知っておきたい「HTML5のセキュリティ問題と対策技術」第44回HTML5とか勉強会レポート #html5j #HTML5｜CodeIQ MAGAZINE
Web技術者コミュニティ「html5j」が主催する最新技術トレンドや業界動向を学ぶ勉強会「HTML5とか勉強会」が六本木ヒルズのGoogleで開催された。第44回となる今回のテーマは「HTML5とセキュリティ」。 セキュリティのエキスパートたちが語る、HTML5および関連する周辺技術のセキュリティ対策に役立つ情報とヒントをレポートする。 by 馬場美由紀 （CodeIQ中の人） 今から始めるHTML5セキュリティ トップバッターで登壇したのは、一般社団法人JPCERTコーディネーションセンターの松本悦宜氏。JPCERT/CCが2013年10月に公開した「HTML5を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」をもとに、Webアプリケーション開発者が 知っておきたいHTML5および関連する周辺技術のセキュリティ対策について解説した。 便利さの一方で、脆弱性も広がるHT
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
良いエンジニアの育て方 - ひがやすを技術ブログ
人を育てるというのは、とても難しい。 なぜなら、育てる方も未完成な人間だから。 ちょっと経験値のある未完成な人が、経験値の少ない未完成な人と、ともに冒険をし、ともにレベルをあげていくことが、人を育てるってことだと思う。 人を育てようと思うと、どうしても上から目線になってしまう。上から目線だと気持ちも相手に伝わりにくい。気持ちが伝わらないと相手もうまく成長してくれない。 だから、人を育てる機会があったら、ともに冒険をする仲間を持ったと考えよう。きっとその方がうまくいく。 それでは、自分の話をしよう。自分というよりは自分たちの話かな。 2010年、自分は、昼間、ブラ三をやりながら、新規ビジネスの企画を考えたり、プロトタイプを作っていたりしていた。ブラ三をやっていたのは、当然ソーシャルアプリというものを学ぶためだ。ブラ三の能力はかなり向上したけど、仕事ではたいした結果が出せなかった。特に企画考え
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
第1回Git勉強会
VCS - Version Control System at Security and Programming camp 2011 Hiro Yoshioka
Roundup of HTML-Based Slide Deck Toolkits
I recently looked into some options for building a slideshow presentation for display in the browser. While there are options like SlideShare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations. Us
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
HTML5で使えるスマートフォンの機能 | DevelopersIO
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
背景をCanvasにする - Qiita
背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
CSS Hat translates layer styles to CSS3 code
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
スマホアプリ開発はHTML5／jQuery Mobileとネイティブどっちがいいの？～第2回テックヒルズまとめレポート（1/2） - ＠IT
スマホアプリ開発は HTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 iPhoneやAndroid端末の急速な普及を受け、多くの開発者が近年関心を寄せているのが「HTML5で実現できるWebアプリと、各プラットフォーム向けに特化したネイティブアプリ。開発するならどちらがトク？」というテーマだ。 2012年4月13日に、このテーマについて実際にスマホやWeb向けのアプリ開発を手掛けている技術者たちが意見を戦わせる「第2回テックヒルズ『ネイティブアプリ』vs『Webアプリ』～これからのアプリ開発のトレンド～」と題したディスカッションイベントが、六本木アカデミーヒルズで開催された。 司会進行を務めたのは、同イベントを企画、運営するインターネットサービス企業「CROOZ」の技術統括本部取締役の小俣泰明氏だ。 小俣氏
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
