deeplearn.js is an open-source library that brings performant machine learning building blocks to the web, allowing you to train neural networks in a browser or run pre-trained models in inference mode. We provide an API that closely mirrors the TensorFlow eager API. deeplearn.js was originally developed by the Google Brain PAIR team to build powerful interactive machine learning tools for the bro

Welcome to Babylon.js 7.0 Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world, and we are excited to announce the next step forward in that journey: the release of Babylon.js 7.0. This new version brings a smorgasbord of performance improvements, rendering enhancements, and exciting new features that you will NOT want to miss.

Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今ではずいぶん減ったとは思いますがiPhoneをJailbreakする人たちはまだ一定数存在します。通常のiPhoneで提供されない機能が使えるようになることで、アプリを改造するのに使う人たちもいます。 そうしたJailbreakによる思わぬ被害を防ぐために、アプリ開発者はDTTJailbreakDetectionを組み込んでおくと良さそうです。 DTTJailbreakDetectionの使い方 DTTJailbreakDetectionを組み込むと、Jailbreakしている端末かどうか判断できるようになります。下記はiOS8以降での使い方です。 if ([DTTJailbreakDetection isJailbroken]) { UIAlertController *ale

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー

意外と良いかも！ スマートフォンなどでWebサイトを見ていて、画像が後から読み込まれるためにコンテンツの高さが変わって誤ったタップをしてしまうことがあります。多くの場合バナーなどで、とてもイライラします。 そんなサイトに導入して欲しいのがScrollbearです。画像が読み込まれても読んでいるコンテンツの高さが変わらないライブラリです。 Scrollbearの使い方 左がScrollbear導入済み、右は未導入です。画像が読み込まれる度にコンテンツががくがくと動きます。 Scrollbearを導入しておけばコンテンツが動くことはありません。ただし画像の高さを予め定めておけば良いわけで、ユーザがコンテンツを作るような画像の有無が分からないようなサイトに使うのが良さそうです。 ScrollbearはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Scroll

はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上

はじめに こんにちは。加藤 潤です。iOSのアプリを開発していると円グラフや棒グラフなどのチャートを表示したい時ありますよね。 今回はそんな時に使える便利なライブラリ、ios-chartsをご紹介します。 ios-chartsとは Daniel Cohen Gindi氏によるチャート表示ライブラリです。 元々Philipp Jahoda氏によるAndroidのチャートライブラリMPAndroidChartがあり、ios-chartsはそのiOS版となっています。 Swiftで書かれていて、Apache License 2.0で公開されています。 チャートの例 例えば以下のようなチャートを表示することができます。 折れ線グラフ 棒グラフ 円グラフ ローソク足チャート レーダーチャート 他にも積み上げ棒グラフやバブルチャートなども表示することができます。 どんなチャートが表示できるかはデモ用ソ

Googleは、iOSやAndroidのモバイルアプリケーションで、場所や住所の入力を支援するオートコンプリート機能を備えたウィジェットをリリースしました。 アプリケーションにウィジェットを追加することで、場所や住所の入力時のオートコンプリート機能を簡単に組み込むことができます。下記の画面は、入力時にオートコンプリートウィジェットが候補を表示しているところです。 オートコンプリート機能は、Place Pickerにも追加されました。場所の名前や住所の一部を入力することで、目的の場所を素早く選択できるようになっています。

https://creativesdk.adobe.com/ 今まで散々様々なSDKを使ってきましたが、正直感動しました。 こんな簡単に超リッチな画像加工ができるなんて本当にすごいです。 しかも 実装方法が超かんたん。 まずは少しみてください。 一部機能の紹介 画像のフィルター フィルターの種類も豊富で、お手軽にインスタグラムっぽい画像を作れちゃいます 画像の切り抜き 画像の方向変換 文字入力 指定した色だけ色を出したり ほら、やばい 実装方法 swiftで書きますので、objective-cの方は適時読み替えてください。 一応今回のサンプルコードもgithubにアップしておきます。 https://github.com/yamasakitomohiro/AdobeCreativeSample SDKのダウンロード 以下のリンク作からiOS SDKをダウンロードしてください。 https:

Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分

Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに

ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader

コンピュータは実際のものをそのままに表現するのは得意です。3pxの線を引けば3pxになりますし、マウスで辿った通りに正確に線が引けます。逆に人が書いたようにちょっと乱れた感じというのは苦手です。 今回は画像をほんの少し崩した感じ、イラストっぽい雰囲気に仕上げてくれるライブラリcomic.jsを紹介します。 comic.jsの使い方 comic.jsを使った一例です。右側のオブジェクトに対して、左側のは若干崩れた線なのが分かるでしょうか。 他にもこんな感じ。右側は手描きイラストっぽい雰囲気になっています。 正確なのも良いですが、こういう風に仕上がるのも面白いですね。 堅苦しいグラフもファジーに。 ここまで細かくなると線の乱れで見づらくなるでしょうか。 comic.jsは既存の画像を取り込んで自動的にイラスト風（ライブラリ名からいくとコミック風に）してくれます。ほんの少し人の温かさが感じられる

アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです