まちみのな::C#で文字認識を行う
Microsoft Office をインストールすると、実は OCR ソフトがついてきます。C# からの利用も簡単です。下記のコードを、Visual C# Express 2005 または 2008 で作成し、参照設定に、 Microsoft Office Document Imaging 11.0 Type Library (MDIVWCTL.DLL) を追加してビルドしてください。 [:ボックス１:] ソースコードのダウンロード (Visual C# Express 2008 用) v1.0 (2008/07/21) using System; using System.Text; /// /// OCR with MicrosoftR Office By Martin Welker (CodeProject) /// に基づく Office 2003 に依存したOCR処理。 ///
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
jsinspect – JavaScriptアプリケーションの類似コードを検索
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードのコピペは絶対に悪であるという訳ではありませんが、そこにはメソッド、関数としてまとめられるかも知れないというリファクタリングの余地があります。なのでリファクタリングを行う際には一度既存のコードについて重複した部分がないかチェックしてみると良いでしょう。 クライアントサイドのJavaScriptやnodeで作ったアプリケーションであればjsinspectを使ってみましょう。 jsinspectの使い方 インストールはnpmで行えます。 $ npm install -g jsinspect インストールが終わったらソースコードのあるディレクトリを指定するだけです。 $ jsinspect ./ Match - 2 instances ./app.js:12,18 ./app.js
Firing Range - Google製のWebセキュリティスキャナテストツール
Webブラウザは基本的に安全に使えるように設計されています。しかし悪意をもった開発者がセキュリティホールをつき、Webアクセスしてきた人から情報を盗み取ったり、Webブラウザをクラッシュさせたりします。 そうした脆弱性を発見するツールを開発している方が、その性能評価として使えるのがFiring Rangeです。Googleが社内で開発しているWeb脆弱性検知ツールのInquisitionをテストする際に使っているそうです。 Firing Rangeの使い方 Firing RangeではよくあるXSSなどを提示しています。 Firing Rangeが提示するスクリプトはセキュリティ上問題のあるコードになります。どういった点が狙われるのか、それを学ぶのに役立つでしょう。ハッシュやCookieを使うなどWeb全般と言うよりはJavaScriptを活用していく中でのセキュリティホール検知ツールをタ
devil – nodeアプリのGUIデバッガー
nodeを使ったアプリケーションが増えてきました。これまでは十分に慣れた人たちが作っていましたが、シェアが広がっていく中でこれからもっと数多くの開発者がnodeを使うようになるでしょう。 そうなると欲しくなるのがデバッガーです。優秀なデバッガーがあれば開発効率が増し、どんどん開発できるようになるでしょう。そこで今回はdevilを紹介します。 devilの使い方 devilは非常に便利なデバッガーに見えます。これでCoffeeScriptにも対応してくれれば言うことなしなのですが、デバッガーということを考えればJavaScriptでも十分でしょう。開発効率が格段にあがるはずです。 devilはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 newton-software/devil
Lining.js·複数行表示に使えるスタイルシートライブラリ MOONGIFT
スタイルシートは便利になっていて、多数の機能を備えるようになっています。CSSセレクタを使って細かく要素を指定できるようになっていますが、それでも足らないものがあります。それが複数行記述した時の、2行目、3行目の指定法です。 そうした指定法はなく、JavaScriptで対応する他なかったのですが、Lining.jsはその行ごとの指定を可能にしてくれるライブラリです。 Lining.jsの使い方 例えばスタイルシートを次のように記述します。 .poem { line-height: 40px; font-size: 32px; font-family: 'Dancing Script' serif; } .poem .line:nth-of-type(-n+2) { font-size: 42px; color: #DA4453; } こちらが結果。3行目からスタイルが変わっています。 次の
Schema UI Frontend Framework·軽量、レスポンシブなUIフロントエンドフレームワーク MOONGIFT
Bootstrapの登場によってフロントエンドの開発がとても簡単にできるようになっています。Bootstrap以外でもたくさんのフレームワークがあります。それらを使いこなすことでUIの組み立てが高速化しています。 Schema UI Frontend Frameworkもその一つです。Webアプリケーションのプロトタイプはもちろん、そのままプロダクションにするまで一気通貫に高速化してくれるUIフレームワークです。 Schema UI Frontend Frameworkの使い方 スクリーンショット多めで紹介します。 グリッド。オフセット対応です。 グリッドのネストも可能。 リンク、水平線、リスト。 ヘッダー。 カラーリング。 ページネーション。 枠のないページネーション。 ナビゲーション。 リストグループ。 ヘッダーつけたり枠線を消したり。 テーブル。 ストライプ。 フォーム。 アラート系
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
Diversity - Bootstrapで作られたシングルページアプリケーションテンプレート MOONGIFT
SPA（シングルページアプリケーション）が流行っています。通常のWebサイトと異なり、ランディングページやプロジェクトのトップページで使われることが多く、様々な情報を見やすく並べて表示する必要があります。 Diversityはそんなシングルページアプリケーションに最適なテンプレートです。しかもBootstrapベースとあってカスタマイズも容易そうです。 Diversityの使い方 こちらはデモページ。 大きな画像を使ったカルーセル。 こういう機能を並べて紹介するのもよくありますよね。 制作例を紹介したりするのに使えそうです。 背景に写真を使ってプロダクトを紹介。 こちらもカルーセル。 プランごとの機能と価格紹介。 プロジェクトメンバーの紹介。 フッター。 DiversityはまさによくあるシングルページアプリケーションをBootstrapで表現しています。ヘッダーの各メニューをクリックする
Material Design Fonticons – GoogleマテリアルアイコンのWeb Font版
マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design
iFrame Resizer – iframeサイズを埋め込まれたコンテンツから変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5からはFlashのようにobjectタグではなく、iframeを使ってコンテンツを埋め込むのが基本になっています。しかしiframeではコンテンツが非同期かつセキュリティ上、そのコンテンツの大きさが分からないのが難点です。 iframeコンテンツの大きさに合わせて自動的にサイズを変更するためには親フレームと子フレーム間でメッセージを飛ばし合う必要があります。Facebookページではこの方法を行っていますが、同様の仕組みを実現するのがiFrame Resizerです。 iFrame Resizerの使い方 子フレームの中にリンクがあります。それをクリックすると親フレーム側のサイズ指定を変更できるようになっています。ウィンドウ間でメッセージを飛ばすことでコンテンツのサイズを
Evil Icons – すっきりしたデザインのSVGアイコン集
Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons
HTML5 Push Notifications - HTML5×Pusherで通知を表示 MOONGIFT
チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。 そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。 HTML5 Push Notificationsの使い方 送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。 文字を変えれば通知も変更できます。 HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。 $app_key = 'YOUR_APP_KEY'; $app_secret = 'YOUR_APP_SECRET'; $a
ＩＴ活用に悩む企業の声から選んだ課題はこれだ――2015年に注目すべき10の戦略テーマ（前編）
うちやま・さとし／大手外資系企業の情報システム部門などを経て、1989年からデータクエスト・ジャパンでIT分野のシニア・アナリストととして国内外の主要ベンダーの戦略策定に参画。1994年に情報技術研究所（現アイ・ティ・アール）を設立し、代表取締役に就任。2019年2月より現職。 経営のためのＩＴ 日々進化するIT技術をどうやって経営にいかしていくか。この課題を、独立系ITアナリストが事例を交えて再検証する。クラウド、セキュリティ、仮想化、ビッグデータ、デジタルマーケティング、グローバル業務基盤…。毎回テーマを決め、技術視点でなく経営者の視点で解き明かす。 バックナンバー一覧 ＩＴＲでは、毎年行っているＩＴ投資動向調査の結果、クライアント企業から受ける質問や依頼されるブリーフィングの内容、およびクライアント企業へのヒアリングを加味し、多くの大手企業にとって重要と考えるＩＴ戦略テーマを選定して
Web・アプリ開発に使える無料のワイヤーフレームツールまとめ
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
無料で使える CI サービス 8 個まとめ - 永遠に未完成
CI サービスをいくつか触ってみたのでまとめ。 今回の目的は、テストを実行すること。なので、ビルドやデプロイ辺りはちゃんとは見ていない。 ドキュメントで確認しただけの項目などもあったりするので、間違っていたらごめんなさい。教えてもらえると助かります。 ただ、これは記事を書いた時点での比較で、今後のサービスの変更に対応する予定はないです。 触ってみたサービス一覧 アルファベット順。 AppVeyor CircleCI Drone IO Magnum CI semaphore shippable Travis CI wercker codeship ってのもあったけど、無料プランは月100ビルドまでとかで常用には耐えないと感じたので中身見てない。 機能比較 機能比較は全て無料プランでのもの。有料だと対応している場合でもここでは x にしている。 比較項目は私の独断と偏見で適当に選出した。 項目
Meteorが見せるIsomorphicなDBとリアクティブな開発モデル - ブログなんだよもん
最近、Meteorを試して見てます。これはちょっとスゴイ。正直、当時Railsに受けたのと同じ興奮がある。 Meteorの説明は「リアルタイムWebアプリケーションフレームワークMeteorについて」あたりが分かりやすいので、こちら参照。 実は、2012年の公開時から存在は知ってたんだけど、チュートリアル見たくらいで特に興味はありませんでした。 しかし、今は違います。それは主にスマホアプリの開発にかなりの威力を発揮しそうだと気づいたからです。 まず、なんで公開時にあまり興味がなかったかですが、そもそもRailsなど同レイヤーのWebアプリケーションの開発FWとして考えていました。 その場合 SPA リアクティブな開発モデル クライアントとサーバを同一コード(JS)で書ける サーバサイドのDBをクライアントから透過的に呼び出せる(IsomorphicなDBモデル) という特徴はせいぜいリアク
Ciじゃない方のJenkins
July Tech Festa 2013 http://www.techfesta.jp/ の講演資料です。 http://www.techfesta.jp/p/program-2.html#A10 ビジネスの変化するスピードが早い昨今、ビジネスのニーズにマッチしたサービスをより迅速に提供するために、アジャイル開発などと共に継続的デリバリーが注目を集めています。 本セッションでは継続的デリバリーにより届けることのできる価値、及びその技術要素について解説します。 また、継続的デリバリーを実践する上で、Jenkinsは中心となり、エンジンとなります。 Jenkinsで継続的デリバリーを実践するときのポイントを事例ベースで紹介します。 事例はNTTデータならではの超大規模プロジェクトでのJenkinsによる頻繁なデプロイを中心とした事例と、小規模ながら自動テスト、マルチ構成プロジェクトを実践した
10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書 | niwatako$
JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
Mac Eclipse 4.2 (Juno) でリドゥのショートカットが効かない件について « Hello My World
小さい問題でも放置することは、生産性を非常に低下させます。それが頻繁に使う事であれば、何をおいても優先的に解決させるべきです。例えば、件名に在るような、しょーもない事ものもその一つかもしれません。 先日、PDTのコードフォーマッターを採用するために、古いEclipseでは導入に何かと問題が有り、最新版に移行することにしました。今のところこれといった不具合もなく順調でした。が、プログラムを書いていて、エディタのリドゥのショートカットが有効でないことがわかりました。原因は、他のショートカットキーと競合していることに有りました。 Mac Eclipse の環境設定 ( Cmd + , ) を開き、General > Keys > で ショートカットキーの設定を確認します。 [type file text] に redo と検索します。すると、リドゥ が コンフリクト（競合、衝突）していることがわ
CSSで会話形式のフキダシデザインを作ってみる - AIUEO Lab2
CSSで対話形式のフキダシデザイン 今日はフキダシデザインの作り方を書きます あ。前にも使っておきながら説明しなかったやつですね？ あ、覚えてたか（笑）前に記事の中で使ったことあるね。 →みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2 ケチだなーと思いました（笑） 今日説明するから許して…。以下がCSSとHTMLです。 スポンサーリンク CSSとHTML CSS /*============================================================ フキダシデザイン ============================================================*/ .arrow_answer, .arrow_question { position: r
(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト
以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・） CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
多分モダンなWebアプリ開発
情報共有サービス「knowledge」のスクリーンショットと説明 - Knowledge
android-best-practices/translations/Japanese/README.ja.md at master · futurice/android-best-practices
機械学習チュートリアル@Jubatus Casual Talks
Fontello - icon fonts generator