JS-XLSX - JavaScriptでExcelファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebフォームでCSVファイルをアップロードしてください、というのはよくある機能です。しかしCSV自体解析するのが大変だったり、ユーザが作成するのも一手間かかるのであまり効率的とは言えません。 そこで、ユーザにはExcelファイルをそのままアップロードしてもらいましょう。その際使うのはJS-XLSX、JavaScriptによるExcelファイルパーサーです。 JS-XLSXの使い方 JS-XLSXのデモです。ドロップしたExcelファイルを解析して、CSVにしています。 さらにJSONにもできます。 JS-XLSXを使えば、Webブラウザ上でExcelファイル（ODSも可）を解析してAjaxでJSONだけを送ると言ったこともできます。これならシステムで扱うのも簡単そうです。さらにJ
highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
お絵描きアプリと画像の保存処理の実装
こんにちは。内藤です。 HTML5でアプリを作成する場合、画像は予め用意されたpngファイルをそのまま表示することが普通で、アプリ側でエフェクトをかけたりすることはあまりありません。けれども、HTML5のCanvasを使うことでアプリ内で画像を作成する機能は作れるので、ここでは作った画像を画像ファイルとして扱い、保存する部分までの実装方法について説明します。 これを応用すれば、アプリで作成した画像をメールで転送したり、サーバーにアップロードしたり、といったことも可能です。 内部的には、JavaScriptでバイナリを扱うArrayBufferオブジェクトが登場しますので、これの使い方も参考にして下さい。 お絵描きの基本機能 まずは、Monacaから最小限のアプリを作り、JS/CSSコンポーネントよりjQuery(Monaca version)を入れておきます。 次のリストによりお絵描き機能
hello.js·各種ソーシャルプロバイダの認証をまとめるJavaScriptライブラリ MOONGIFT
今はソーシャルサービス全盛とあって、FacebookやTwitterなどと連携してサービスを提供するのが一般的です。しかし各プロバイダーの接続を一元化したりするのはちょっと面倒に感じていることでしょう。 そこで使ってみたいのがhello.jsです。多数のソーシャルプロバイダーをひとまとめにしてくれるJavaScriptライブラリです。 hello.jsの使い方 hello.jsの良いところはJavaScriptベースということでしょう。 こんなに多くのソーシャルプロバイダーに対応しています。 例えばFacebookでログインした場合。 アイコンや名前が取得できています。 他のサービスでも同様です。 Facebookの場合はJavaScript向けのAPIが公開されていますので、それを使っています。対してTwitterなどの場合はプロキシサーバを立てて、そこでキーを生成するようになっています
offline-todo - ネットがなくても使えるWebベースのTodoアプリ
HTML5の新しいAPIの一つにアプリケーションキャッシュがあります。アプリケーションキャッシュを使えばオフライン時であってもWebアプリケーションが使えるようになります。もちろんサーバ上のデータはとれませんので、データをストアする仕組みが別途必要です。 新しい技術が組み合わさって提供されるだけになかなか手出ししづらいイメージがあります。そこで参考になるソフトウェア、offline-todoを紹介します。 offline-todoの使い方 offline-todoではデータの保存にIndexedDBとWebSQLを使っています。IndexedDBはiOSでも使えるようになりますし、この技術の組み合わせであればオフラインでも動作するWebアプリケーションが実現できるようになりそうですね。 offline-todoはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていま
web audio api使って声の高低に合わせてオブジェクトを上下させるアプリつくりました - TechTalkManiacs
13日に開催されたweb music ハッカソンで声の高低に合わせてオブジェクトを上下させるアプリ作ってきました マイクを許可して、声か楽器の音程を上下させると丸い球が上下に動きますので、横から飛んでくる棒を避けてください。 仕組み web audio apiには波形をフーリエ解析するAPIがあり、音にどの周波数がどれくらいの音量で含まれているのかを2行ほどで解析してくれます。(サンプル)。 これを使うことでボコーダーやコード進行の検出のような踏み込んだ音のハックができるわけです。 このアプリではanimationframeごとにもっとも音量の大きい周波数を取得し、それを音の高低としています。ただし実際には最大の周波数はかなり揺れるので50フレーム分の平均を取って平滑化し、滑らかにみせています。慣性のような挙動をするのはそのせいですね これから 当たった時の演出を乗せて、教育用のゲームとし
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？ 松田光秀（jThree合同会社） この記事では、HTML5 Japan Cup 2014で優秀賞を頂いた「YouTubeみたいなWebGLプレーヤー」で利用されている技術を解説します。 はじめに 「YouTubeみたいなWebGLプレーヤー」はコンテンツそのものとは分離された、オープンソースJavaScriptライブラリ「jThree」のプラグインです。オープンソースとして公開していますので、誰でも自身の作品に差し替えてブログなどに掲載することができます。WebGLの描画部分は全てjThreeで管理しています。この記事では、プレーヤーで採用している2つのHTML5 APIとjThreeの概要をご紹介します。 プレーヤーの機能 このプレーヤーは、まるで動画のごとくWebGLコンテンツを楽曲付きで再生できます。動
iPadだけでアプリ開発！アプリ&環境まとめ | BACKEND AS A SERVICE mbaas BLOG
アプリの開発と言えばデスクトップやノートPCを用意して、Xcode/Eclipseをインストールする必要があります。しかし最近ではiPadだけで開発できてしまう環境が整いつつあります。アプリやWebサービスで開発できる、そんなアプリ開発環境をまとめて紹介します。アプリの開発と言えばデスクトップやノートPCを用意して、Xcode/Eclipseをインストールする必要があります。しかし最近ではiPadだけで開発できてしまう環境が整いつつあります。アプリやWebサービスで開発できる、そんなアプリ開発環境をまとめて紹介します。 Jasic JavaScriptを使って実際に利用可能なアプリを作成できます。個人的なちょっとしたユーティリティであればJasicで作れてしまいそうです。 Jasic – JavaScript for the iPad | By Anui Jasic on the App
HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。ゲームエンジンは多数存在しますが、今回は特に2Dをサポートしたソフトウェアを紹介します。mBaaSお役立ちブログ トップ> ブログ> Tips> HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。 ゲームエンジンは多数
Bosonic – 再利用性の高いWebコンポーネント集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLは自由度が高く、何でも描ける割に標準で用意されているコンポーネントはとても貧弱です。フォームのエレメントなどもあれしかないのかとがっくりするほどです。HTML5で多少リッチになってきましたが、それでも物足りなく感じるのではないでしょうか。 そこでBosonicでは再利用可能なWebコンポーネントを作成、公開しています。さっそく見てみましょう。 Bosonicの使い方 様々なコンポーネントを見ていきましょう。 BosonicではこうしたWebコンポーネントを公開し、Webアプリケーションで使えるようにしています。単純にHTMLを埋め込むのではなく、専用のタグを使って記述することでJavaScriptとの連携も容易にできるようになっています。 BosonicはJavaScrip
強力なCSVパース用JSライブラリ「Papa Parse」:phpspot開発日誌
Papa Parse - Powerful CSV parser for Javascript 強力なCSVパース用JSライブラリ「Papa Parse」。 CSV→JSON、JSON→CSVの変換ができる他、ローカルファイルから比較的大きなCSVをUPし、ブラウザとは別スレッドでパースし、直接JSONで値を受け取れる等便利そう 関連エントリ JavaScriptでのCSVの扱いを簡単にできる「CSV.js」
gifken – Web上でアニメーションGIFの解析&生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって俄然面白くなってきたのがアニメーションGIFではないかと思います。バイナリとして読み込むことで、単純な再生だけでなく再生を変化させたり、動画から新しいアニメーションGIFを作ってしまったりできます。 そのベースとして使えそうなライブラリがgifkenです。アニメーションGIFの解析はもちろん、作成までサポートしたライブラリです。 gifkenの使い方 また、コードで新しいアニメーションGIFの作成ができます。 <div id="content"></div> <script type="text/javascript"> window.onload = function () { var newgif = new gifken.Gif(); newgif.widt
hifive - HTML5で作るWeb業務システムフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Webフロントエンドフレームワークが増えています。jQueryもそうですし、Backbone.jsやAngularJSもあります。MVCフレームワークが多く、より効率的に大型なWebアプリケーション開発が行えるようになっています。 今回はその一つ、hifiveを紹介したいと思います。特徴としては企業でWebシステム開発するのに向いた機能を多数備えている点です。 hifiveの使い方 hifiveはWebフロントエンドとして使える一方、Eclipse向けにプラグインも提供されておりまさに企業ユースを想定した作りになっています。フレームワークとしてはMVCが基本で、さらにロジックと呼ぶ計算処理だけを担う部分と、モデルをまとめたモデルマネージャ（DBで言う所のテーブルのような存在）
PDFy - PDFをホストしてPDF.jsで表示するWebサービス MOONGIFT
PDFはビジネスでよく使われるフォーマットになっています。そのためインターネット上にもコンテンツが無数にありますが、閲覧する際にはプラグインの仕組みを使っていたり、ダウンロードしたりしなければならないのが手間です。 そこでプラグインフリーで使えるPDF.jsを使ってみましょう。単純にビューワーとしてだけでなく、PDFyみたいなサービスだって作れちゃいますよ。 PDFyの使い方 Webブラウザ上でPDFが表示できます。これはプラグインフリーです。 ページ送りもあって再現性はかなり高いです。 日本語も表示可能です。 文字の選択もできます。画像の埋め込み場所も適切に再現されています。 PDFyは埋め込み表示もサポートされていて、PDFをより他のコンテンツと同じように扱えるようになります。アップロードすると、すぐにクライアントサイドで表示ができます（クライアントサイドでJavaScriptの解析を
HTML5なら3日でクソゲーが作れる【実践編1】 | 株式会社NEXT
NEXTの骨無しポークです。 HTML5+javascirptでクソゲーを作ってみたわけですが、 今回からあのゲームの作成過程を書いていこうと思います。 まずは1日目です。 企画 ネタがないなぁ。 そうだ、ゲーム作ろう。簡単そうなシューティングにしよう。 決定。 必要な環境をそろえよう すべて自分でやるのであれば、 HTMLやjavascriptを編集するためのテキストエディタ(メモ帳とか) 画像を編集するためのペイントツール(ペイントとか) 音声編集の出来るソフト(フリーソフトを探すなり、何か製品を買うなり) が必要です。 私はテキストエディタはサクラエディタ、画像編集ソフトはペイント、音声編集はFLStudio+Synth1でやりました。 サクラエディタはMS Windows上で動作する日本語テキストエディタです． http://sakura-editor.sourceforg
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
全世界ユーザが使える電話番号入力欄実装jQueryプラグイン「International Telephone Input」:phpspot開発日誌
全世界ユーザが使える電話番号入力欄実装jQueryプラグイン「International Telephone Input」 2014年06月16日- International Telephone Input 全世界ユーザが使える電話番号入力欄実装jQueryプラグイン「International Telephone Input」 日本などでは+81などのコードが付きますが、他の国にも対応し、以下のようにクールなinputを提供してくれます。 バリデーションやIPアドレスベースで国を自動判別したり、なかなか便利そうです。 世界展開を予定しているサービス関連の方はしっておくとよいかも 関連エントリ 通貨フォーマット変換ができてサイトの国際化に使える「accounting.js」
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでのCSVの扱いを簡単にできる「CSV.js」:phpspot開発日誌