Espruino Web IDE - Google Chromeの上でIoTデバイスを開発
JavaScriptの利用幅が広がっています。元々Webブラウザくらいだったのがサーバサイドで動き、スマートフォンでも動き、さらに小さなIoTデバイスでも動くようになっています。 今回紹介するEspruino Web IDEはEspruinoというIoTデバイスに対応したコードを書くためのWeb IDEになります。 Espruino Web IDEの使い方 メイン画面です。右側にJavaScriptのコードがありますが、LED1とあるのが特徴的です。コード的に500msごとにLDEのオン/オフを繰り返すようです。 コードをデプロイするポートを選択できます。 ブロックを使ったビジュアルプログラミング環境も用意されています。 ブロックは多数用意されているので、それらをつないで処理を書いていきます。 Espruino Web IDEはEspruinoとのことですが、ライブラリや実行環境さえあれば
NativeScript - 夢再び。JavaScriptでiOS/Androidアプリを開発 MOONGIFT
ワンソース、マルチプラットフォームは甘美な響きであり、誰もが夢見る存在です。ずっと昔から言われており、アプリ開発において最も望まれている存在かも知れません。 かつてはTitaniumが有力候補が出てきたのですが、最近ではあまり聞かれません。そこで登場したのがNativeScriptです。 NativeScriptの使い方 NativeScriptはCLIで操作します。node/Homebrew/mono/JDK/ant/Android SDKなどが必要です。準備が終わったら、 $ npm i -g nativescript にてインストールができます。 コマンドは次のようになります。 // 対応プラットフォームを追加 tns platform add android tns platform add ios // デバイスで実行 tns run android tns run ios //
TTlogger - 何をしたかを記録しておく時間管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Todo（これからやること）も大事ですが、ToDid（何をやったか）を管理するのも大切です。日報もやったことリストですし、個人が成長していく上でも何をやったかを蓄積するのは大事なことだと思います。 そんなやったことリストを管理できるツールがTTloggerです。node-webkit（現NW.js）で作られたツールです。 TTloggerの使い方 TTloggerはTTloggerを起動した時間に何をやったか、それを記録するだけのソフトウェアです。とてもシンプルなので定期的に起動するようにしてそれまでにやったことを記録しても良さそうです。何も考えていないとどんどん過ぎ去ってしまう時間を切り取って記録できる、便利なソフトウェアです。 TTloggerはHTML5/JavaScript
range.css - レンジ入力をレンジ入力を使ってカスタマイズ MOONGIFT
HTML5で追加されたフォーム入力の一つにレンジがあります。一定の決められた範囲について値を自由に選べるコンポーネントです。便利ではありますが、まだ利用されているケースは多くないように思います。 そんなレンジ入力を格好良くアレンジしてくれるスタイルシート設定ツールがrange.cssです。 range.cssの使い方 カスタマイズもまたレンジでできる点が面白いです。 大きさ、丸みなどを変更した例。 色の変更もできます。CSSもダイナミックに書き換わります。 range.cssではレンジ入力を使ってスタイルシートを変更します。その結果生成されたスタイルシートを使えば、自分のサイトにあった格好良いレンジ入力が使えるようになるでしょう。 range.cssはJavaScript/スタイルシート製、2-clause BSD lisenceのオープンソース・ソフトウェアです。 danielstern
Time-Moment さまざまなコーディングスタイルを意識した日付と時間を得るモジュール MOONGIFT
Time-Moment はC言語で記述されたPerl用モジュールです。Perlには日付と時間を得る方法がいくつもあります。しかし、ソフトウェアエンジニアは使い勝手やさまざまな事情から、日付と時間を得る関数やモジュールを改めて定義することがあるのではないでしょうか。Time-Moment を選択肢に加えることで、開発の手間が減るかも知れませんよ。 Time-Moment の主な特徴について 1) 現在の日時や指定日時を得るために、いくつかのコンストラクタがあります。 現在の日時や別のオブジェクトから日時を得たり、指定日時を文字列で指定することができます。 new now now_utc from_epoch from_object from_string 2) さまざまなコーディング・スタイルに合わせて選択ができます。 例えば、日時の比較をメソッドと比較演算子のどちらでも行えるようにメソッド
xlwings·さよならVBA。PythonとExcelの相互コミュニケーションライブラリ MOONGIFT
Webアプリ全盛の現在とあっても、業務では未だにExcelが多く使われています。その結果としてVBAが活躍しており、メンテナンスが難しかったり、コピペされるコードが量産されていたりします。VBAがダメという訳ではないのですが、触りたくないと考えるプログラマは多いのではないでしょうか。 もっと自分が使い慣れたプログラミング言語でExcelを扱いたいと考える人に使ってみていただきたいのがxlwingsです。PythonとExcelで双方向の操作が可能になります。 xlwingsの使い方 デモ。ExcelからPythonを呼び出します。 xlwingsはPythonからExcelのデータを読み込んだり、ExcelからPythonをコールできます。その結果、PythonからExcelにデータを追加したり、検索結果を表示させることも可能です。VBAの代わりに使うことが可能です。 Pythonであれば
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
Web Starter Kit - Googleが提案するWebアプリケーション高速開発環境
Webアプリケーションを開発しようと思ったら、まず何をするでしょう。HTTPサーバを立てるでしょうか、Bootstrapのダウンロードを行うかも知れません。さらにjQueryやBackbone.jsやAngularjsなどを設定するかも知れません。 しかし今後はそんな面倒ごとをせず、Web Starter Kitをセットアップしましょう。これだけですぐにWebアプリケーションの開発がスタートできます。 Web Starter Kitの使い方 実行は gulp コマンドで行います。ビルドを実行します。 ここからUIを見ていきます。 Web Starter Kitの主な特徴はレスポンシブ、クロスデバイス同期、ライブブラウザリロード、パフォーマンス最適化、ビルトインHTTPサーバ、Sassサポートなどとなっています。 Web Starter KitはRuby/node製のオープンソース・ソフトウ
JavaScriptでExcelの関数をほぼ実装 MOONGIFT
世の中で最も食されているものが最も美味しいと定義するならば、マックのハンバーガーとコーラは世界で最も美味しいということになるというのは有名です。そんな原理でいくとExcelは世界最高のツールになるのかも知れません。 つまり他の言語でもExcelの関数を実装すれば、誰でもプログラミングができてしまう…そんな世の中になるのかも知れませんね！ということで第一弾としてJavaScriptでExcelの関数を実装したFormulaJSを紹介します。 FormulaJSの使い方 例えば配列系の関数。 テキスト系。 演算系。 例えばASINのような関数はこのようにラッピングで実現しています。 Formula.ASIN = function (number) { return Math.asin(number); }; 全ての関数を実装し直しという訳ではなく、ラッピングで実装しているものも数多くあります。
Webサイトの説明をまとめて表示してくれるヘルプライブラリ·Chardin.js MOONGIFT
Chardin.jsはWebサイトの画面上に項目の説明を表示するJavaScriptライブラリです。 スマートフォンアプリをはじめ、Webアプリケーションで最初に表示した時に説明を表示するタイプのWebサイトが増えてきました。凝ったものもありますが、もっとシンプルに実装したい時に使えそうなのがChardin.jsです。 最初の表示です。ボタンを押します。 各DOMごとに説明が表示されます。 ソースを見ると分かりますが、data-*で表示する内容を指定しています。 Chardin.jsは説明用のテキストとその表示位置（上下左右）、さらに一度表示した後ボタンを非表示にしたり、逆に別な要素を表示したりすることもできます。汎用的ではないかも知れませんが、手軽にチュートリアルやヘルプ画面を実現するのに便利そうです。 Chardin.jsはJavaScript製、Apache License 2.0の
Twitter、Facebook、Google、GitHub…多数のプロバイダに対応した認証ライブラリ·HybridAuth MOONGIFT
HybridAuthはFacebookやTwitterをはじめ多数のプロバイダに対応した認証統合ライブラリです。 Webサービスを作っていてたびたび発生するのが認証システムです。ID/PWの他、最近では外部のソーシャルサービスを使うケースも多々あります。そこで多数の認証システム対応を一手に引き受けてくれるHybridAuthを使ってみましょう。 サインインします。多数のプロバイダーに対応しています。 権限の承認が出ます。 Googleアカウントの情報が無事取得できました。 こんな感じにフローティングのウィジェットもあります。 HybridAuthはTwitterやFacebook、Google、Yahoo、MySpace、Windows Live、Foursquare、AOLなどが基本的に対応し、さらにGitHubやVimeo、Tumblrなども追加で対応します。CodeIgniter、C
unDonutの復活か。unDonut + WebKit·unChromium MOONGIFT
unChromiumはunDonutのレンダリングエンジンをChromiumに変更したWebブラウザです。 2001年くらいはIEコンポーネントを使ったタブブラウザが隆盛でした。そんな時、個人的に使っていたのがunDonutです。そして年月は流れ…unDonutに新しい魅力を追加してかえってきたのがunChromiumです。名前の通り、unDonutのレンダリングエンジンをChromiumにしたWebブラウザです。 起動！このキャラは…安堂なつさんとでもおっしゃるんでしょうか？6年4組なので推定11歳？ おお、ちゃんと見られるぞ！（失礼） HTML5も動くぞ！ Chrome 18相当だそうです。 オプションが豊富なのはunDonutの証（どこまで使えるか分かりませんが）。 WebKitベースのレンダリングエンジンが使いたいと思いつつも、Safari for Windowsの酷さに辟易してい
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
Bootstrapを使おう！様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。 次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
ここまでやるか。SQLiteをJavaScriptに変換·SQL.js MOONGIFT
SQL.jsはSQLiteをEmscriptenを使ってJavaScript化したソフトウェアです。 SQL.jsはWebブラウザ上で使えるデータベースです。Emscriptenを使ってSQLiteをJavaScriptに変換した面白いソフトウェアです。 デモです。テキストエリアに書かれたSQLを実行できます。 実行した結果です。最終的な結果だけが出力されています。SELECTの結果はJSONデータとして取得されています。 もちろん普通にSQLが使えます。 日本語は出力時は化けてしまいましたがデータ上は問題ないと思われます。 SQL.jsはSQLiteがそのままJavaScriptになってしまったようなソフトウェアです。慣れた使い勝手でSQLを実行したり、データを取得できてしまうのは面白そうです。なお現状Google ChromeやFirefoxにしか最適化されていません。 SQL.jsは
どのフレームワークが最適か。多彩なJavaScriptフレームワークで実現したTodoアプリ·TodoMVC MOONGIFT
TodoMVCはTodoアプリを多様なJavaScriptフレームワークで実現、比較できるソフトウェア。 TodoMVCはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。今はJavaScriptが隆盛とあって、Webサイト開発において大抵利用される。そんな中、どのJavaScriptフレームワークを使うべきか適切に検討しているだろうか。慣れだけ考えてjQueryに落ち着いてしまったりしていないだろうか。 色々なフレームワークが試せる もちろん慣れはとても大事な要素ではある。だが全ての開発が一つのJavaScriptフレームワークでまかなえる訳ではない。もっと様々なフレームワークを検討すべきだ。そんな時の目安になり得る、とても面白いプロジェクトがTodoMVCだ。 TodoMVCはTodoアプリで、Web上でタスクを入力して登録し、チェックボックスを付けて消化
凄いん…だよな？デザインの自由度を最大化したCMS·Berta MOONGIFT
Bertaはデザインの自由度が高いCMSです。データベースを使わないCMSになっています。 なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。 まずログインします。 サイトをセットアップします。 セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。 セクションを作ったら、その内容を編集します。 これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。 配置する場所はX/Y軸ともに自由です。 ファイルを貼付けたりテキストを入れたりできます。 例えばこんな画像を。場所は自由に設定できます。 実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。 こういった写真系のサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
