emacs使っていてemacs上から、find-grepすることは結構多いですよね。そのあと、検索した結果からnext-errorで検索結果を移動するじゃないですか。 ただまぁfind-grepって遅いんですよね。こればかりは仕方ない。 そんな中、最近ちょいちょい言われ始めているsilver_searcherを使ってみたらこれが激速。更にはag.elなんてものもすでにありこれを組み合わせるととにかく高速にemacs上からgrepできて快適という話です。 The Silver Searcherインストール Macな方はhomebrewで一発です。簡単。 brew isntall ag GitHub - ggreer/the_silver_searcher: A code-searching tool similar to ack, but faster. ag.elインストール 私はemac

Webベースでプランニングポーカーとなると、本当に顔色も分からない状態で楽しめますね。 アジャイル開発の一つにプランニングポーカーというのがあります。簡単にいえば複数人で同じ機能について見積もることで見積もり精度を上げていこうという考えです。 そしてそのプランニングポーカーをWeb上で実現するソフトウェアがFirepokerになります。 では実際に試してみましょう。 トップページです。Start playingを押します。 最初にゲームを作成します。これは題名を決めて、ユーザストーリーは一行一つずつ作成できます。同時にプランニングポーカーで使うカードの単位も選びます。 ゲーム作成画面 登録したらゲームの開始です。各ユーザストーリーについて見積もりを行っていきます。ここのURLをチームメンバーに伝えましょう。 別なブラウザから。同じように自分の見積もりを入力します。 人の見積もりは最初は見ら

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました この書き心地は良いぞ！ Apple Storeでクレジットカードで購入した人は知っていると思いますが、iPhoneに指先を使ってサインを行うと思います。慣れない書き心地で線が歪んだり、変な文字になってしまってがっかりするのではないでしょうか（筆者はいつもそうですが）。 しかしAppleもSmooth Online Signaturesを導入すればそんなことがなくなるので良いのではないかと思います。というかぜひこの技術を取り入れて欲しい。 Smooth Online Signaturesはアルゴリズムに従って線を滑らかに変換しています。その結果、みすぼらしいカクカクした線ではなく滑らかなサインが可能になっています。 これだけスムーズに書けるとマウスやスマートフォンでの署名がしやすくな

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="

これはこれで使い道がありそう。 BootstrapでWebサイトを組む機会が増えているのですが、バージョン3になってから徐々に作法が増えてきたように感じます。機能が増えるということはそれだけ覚えるべきことが増えるということです。 そうなるとシンプルに作れるという利点からはちょっと外れてくるかも知れません。そこでほぼ素のタグのままデザインができてしまうデザインテンプレートxchemaを紹介します。 各コンポーネントごとにたくさんのスクリーンショットでお届けします。 フォントの装飾。特にクラス指定がない所が特徴です。 段落。行間が良いですね。 頭だけ大きく。英語では良くある表現ですね。 引用。カラーリングに対応しているのが新しいかも。 リスト。様々な形式が用意されています。 定義リストに対応しているのが嬉しい。 アドレス。こちらもシンプルです。 アラート。alertというタグを作っています。

RecDB An Open Source Recommendation Engine Built Entirely Inside PostgreSQL 9.2. RecDB allows application developers to build recommendation applications in a heartbeat through a wide variety of built-in recommendation algorithms like user-user collaborative filtering, item-item collaborative filtering, singular value decomposition. Applications powered by RecDB can produce online and flexible per

ハイブリッドアプリをさくさくっと作りましょう！ ここ1年くらいWebとネイティブの技術を組み合わせたハイブリッドアプリに対する注目が急激に高まっています。Mobile Safariのパフォーマンス向上、HTML5への期待の現れと言えるでしょう。 今回はそんなHTML5を利用したWebアプリケーション開発に使えるフレームワークIonicを紹介します。この手のフレームワークはたくさんありますので、より先進的なものを選ぶと最新の機能が使えるのではないでしょうか。 タスク一覧のデモ。ヘッダー、フッターは常時張り付きます。 タブバーをクリックして画面の切り替えもできます。 スライドメニュー。画面をスワイプまたは左上のメニューアイコンをタップします。 メニューが左からスライドしてきました。 画面を切り替えた後の戻る機能もあります。 フォーム。 サンプルの天気アプリ。 地図アプリ。 プロフィールアプリ。

フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IDEでは当たり前の入力補完をテキストエリアで実現します。 スマートフォンやフューチャーフォンでは当たり前になっているのが自動入力補完です。キーボードで全ての単語を入力するというのは煩わしいもので、入力補完機能があればスムーズに入力が続けられます。 そんな機能をWebアプリケーションでも使えるようにするのがAutoJSです。テキストエリアでの入力を自動的に補完してくれます。 AutoJSの面白いところとしては入力補完部分は選択状態になっているので、そのまま別な文字を入力すると別な単語に切り替わるということでしょう。単語リストを持っているので、その単語数次第で便利に使えるようになります。 なお日本語では平仮名からの変換が必要になるので同様の仕組みで行うのはちょっと難しいかもしれません

nodeアプリケーションがWebブラウザ上で開発、実行できます！ JSFiddleやjsdo.itなどWebブラウザ上でHTML/JavaScript/スタイルシートを記述して実行できるというサービスは幾つかある訳ですが、あくまでもクライアントサイドに寄ったものになっています。 もっと本格的なWebアプリケーションを作るためにはサーバサイドも欲しいと思うでしょう。そこで使ってみたいのがNudgePadです。 NudgePadはWebブラウザ上のIDEと銘打っています。何ができるのか見てみましょう。 プロジェクトを作成するとファイル一覧画面になります。 index.htmlを表示してみました。普通にURLアクセスが可能です。 そしてIDEのIDEたるゆえんである、ファイル編集に入ります。 行番号も表示されていて分かりやすい編集画面です。 編集した後に再表示をすると確かに変更されています。 サ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 可視化すると色々な情報が見えてくるかもしれませんね。 ソーシャルでの活動を可視化することで自分のオンラインアイデンティティを確立しようとするサービスがかつて幾つか存在しました。いわゆるライフストリーム的なサービスですが、一般化せずに終わってしまった感があります（最も先行していたFriendFeedはFacebookにチームごと買収されましたね）。 ああいったサービスは公開前提のサービスだったために失敗したのかもしれません。あくまでも個人のソーシャルダッシュボードとして使うなら良いのかも、そう思わせてくれるのがReportrです。 Reportrはソーシャルアクティビティを一覧するのではなく、可視化が主な目的になります。接続できるサービスは、 Google Chromeの閲覧履歴 F

HiveMind is a project management and ERP application for services organizations. It features project/task management, request tracking, time tracking, expenses, invoices/payments, general ledger, and content management (wiki). HiveMind is based on Moqui Framework, Mantle Business Artifacts, and Simple Screens. License

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レコメンドはWebサイトの流動性を高めるのに重要な仕組みですよね！ 数年前に一気に花開いて話題にあがったのがレコメンデーションエンジンです。コマースやゲーム、メディアなど様々な分野でレコメンドする機能が追加されました（MOONGIFTにもあります）。 やり方は幾つかありますが、そのエンジンの性能次第でユーザのサービス利用度合いを高めたり、平均購入単価を高めることが可能です。 そんなレコメンデーションエンジンとしてnodeを使ったのがrecommendationRaccoonです。 recommendationRaccoonでサポートされているのは、好きまたは嫌いです。 // 好き raccoon.liked('userId', 'itemId', callback); // 嫌い

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はHTMLをオーサリングツールではなくタグを手入力して構築することのが多くなっています。デザインフレームワークも数多く登場し、そういったフレームワークを使う上でも手でタグを打ってしまった方が早いケースもあるでしょう。 そこで今回は新参のタグエディター、Hyroを紹介します。2ペイン構成で左側にタグ、右側がリアルタイムのプレビューになっているのが特徴です。 正直まだまだこれからといった感じのエディタではありますが、2ペインでリアルタイムプレビューという点は最近のMarkdownエディタっぽくて好感が持てます。nodeアプリケーションをラッピングしてマルチプラットフォーム対応させている点も技術的に興味深いです。 今後、UIライブラリやフレームワークが広がっていくのにつれてオーサリン

レスポンシブなサイトを作る際のベースに使うと良さそうです。 シンプルなUIでさくさくとWebサイトを作っていきたいならば何らかのデザインフレームワークを使うのが良いと思います。シンプルなものを使えば後々のカスタマイズ性も良いでしょう。 今回は軽量なフロントエンドフレームワーク、Kickoffを紹介します。ベースにSassを使っており、さらにGruntと組み合わせることでどんどん作っていけるというのが売りになっています。 そこでデザインサンプルを見ていきたいと思います。スクリーンショット多めで紹介します。 まずはタイポグラフィ系。 見出しです。 引用、リスト。 定義リスト。 次はフォーム系。 通常の表示。 ラベルが横に表示される形式。 インラインフォーム。 検索フォーム。 エラー表示にも対応しています。 次はグリッド。 基本的なグリッド。高さが自動で揃います。 グリッドを消すとよりすっきりと

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今回はちょっと変わったマインドマップソフトウェアの紹介です。 マインドマップというとキーボード主体で構造的にどんどん書き進めていくというイメージがありますが、中にはちょっとしたイメージを載せたいと思うことがあるかも知れません。 そこで使ってみたいのがLabyrinthです。画像追加やドロー機能がある、変わったマインドマップが描けるソフトウェアです。 Windows版は0.3ですが、0.4ではズームやスクロール、テキストノードの追加、SVG/PDFエクスポートといった機能が追加されています。テキストだけでは表現しきれないようなイメージをドローで描いておくと言ったやり方が面白そうです。 LabyrinthはWindows/Linux用のオープンソース・ソフトウェア（GPL）です。 La

TOP  >  WebDesign  >  40種の美しいランディングページテンプレート「40 Beautiful Landing Page Templates」 日本のWebサイトでランディングページは訴求ありきで、広告的な表現が強いものが多いのですが、今回紹介するのはシンプルで洗練されたランディングページテンプレート集「40 Beautiful Landing Page Templates」です。 Marketing – SNIPPER Landing page Powered with Rich Snippets | ThemeForest プロモーションや、コーポレートサイトに活用出来そうなレイアウトなど、さまざまなシーンを想定したものが紹介されています。中でも気になったものをピックアップしましたので下記よりご覧ください。 Marketing – Sytic – One-Page

Windows / OS X: プロジェクタを使ったプレゼンテーションなど、雑然とした自分のデスクトップを大きな画面に映し出すのは、ちょっと恥ずかしいものです。 使っているPC画面を他の人と一緒に見ることが多い方で、そうはいってもデスクトップのファイルやフォルダを不特定多数に向けて公開するのはちょっと恥ずかしいという方には、『Pinstriped』がオススメです。 Pinstripedはデスクトップ上の全てをクリーンで整理された状態に保ってくれるカスタマイズ可能なインターフェースです。しかも作業をする際にはちゃんと非表示になってくれます。 使い方や説明はこちらの動画にとてもよくまとめられています 特定の企業向けの画面にカスタマイズするといった設定が可能です パソコンを使うのは自分ひとりで、デスクトップの状態がどうあれあまり構わないのであれば、このツールは不要かもしれません。ただ、頻繁にプレ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンパイルしてJavaScriptに変換する系統の言語としてはDartやCoffeeScriptなどが知られています。同様にスタイルシートについてもSassやScss、LESSといった代替記法が存在します。 今回紹介するMythもその一つで、スタイルシートの代替記法なのですが、多数の機能がある訳ではなく最も必要とされるであろう機能だけを提供しているのが特徴です。 まずインストールから。npmを使ってできるのですぐに導入できます。 $ npm install -g myth 続いて対応している記法を紹介します。まず変数。 :rootで変数を定義し、それをvar(aaa)といった形で使っています。数字や色の定義が使えます。 変数をさらにcalcという関数に渡すことで計算処理を実現してい

お、かなりパフォーマンスが高い！ サイト内検索を作る際にまず思いつくのがサーバサイド内での検索です。また公開情報であればGoogleの検索エンジンを使う手もあります。今回はそのどちらでもない第三の選択肢、JavaScriptによるクライアントサイドの検索エンジンです。 検索の難しさは何と言ってもインデックスの生成部分になるかと思います。良くあるのは分かち書きとn-gramだと思いますが、JavaScriptベースの検索エンジンではどちらも不向きです。そこでOktaviaではFM-Indexと言うアルゴリズムを使ってインデックスを生成しています。 何はともあれまずは体験してみましょう。 JSXのプロジェクトページにて使われています。右上にある検索ボックスに単語を入れてエンターキーを押しましょう。 クライアントサイドだけあって高速にレスポンスが返ってきます。一致した部分がハイライトされているの

TOP  >  WebService  >  【商用可】デザインのベースに使える紙のテクスチャパック「Free Paper Texture Pack: 64 Card Stock Photos」 日常には色々な種類の紙製品が溢れていますが、その表情は紙によってさまざま。例えば光沢感のあるコーティングが施されていたり、素朴で落ち着いた印象を受けるマット紙など、用途によって色々な紙が存在しています。今回紹介するのはそんな日常に溢れる紙のテクスチャを集めたテクスチャパック「Free Paper Texture Pack: 64 Card Stock Photos」です。 段階的に明るさが揃えられた白紙や、リサイクルされたクラフト紙、繊維感のある紙など、さまざまな紙が64種まとめられています。 提供されるデータは2100x1500pxと、どれも高解像度なので画像が荒れるといった心配は少なそうです。

デバッグに良いかも？ JavaScriptでアニメーションやイフェクトを実行したり、何らかの処理を行うといったことは良くあるのですが、ほんの一瞬で終わってしまう処理の場合確認がとてもしづらいことがあります。 そこでJavaScriptの実行時間を遅らせられるslow.jsを使ってみましょう。CSSによるイフェクト処理をゆっくり実行してくれるようになります。 例えばこういったモーダルを表示する処理に使います。 使い方は簡単で、 slow.listen({ keyCode: 16, multiplier: 2 }); のようなコードを記述します。keyCodeで何かのキーを指定し、そのキーが押されている状態だとイフェクト処理をmultiplierで指定した数字倍遅らせます。この場合、速度は1/2になるといった具合です。 あるキーを押した時だけ実行速度が変えられるのでデバッグとして使ってみるのも

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

@JUNP_Nです。毎年恒例の画像素材サービスのまとめ記事。昨年は34サイトでしたが、今年は14サイト増えて48サイトです。利用規約等については各サイトを確認のしてから、ご利用ください。

いいねやツイート、はてブボタンなどはユーザビリティはもちろんのこと、そのシェア数が表示されることで他の閲覧者に誇示できるサービスとなっています。少し前であればGoogleのページランクもその一つと言えました。 今回はその開発者版とも言えるShields.ioを紹介します。自分の開発しているプロジェクトがどれだけ品質的に優れているものか誇示できる、素晴らしいソフトウェアです。 トップページです。幾つかのバッチが表示されているのが分かるかと思います。 こちらが全種類。バージョン番号なども表示できます。 対応しているサービスは以下の通りです。 Code Climate（自動コードレビュー） Coveralls（テストカバレッジ履歴） Gemfury/RubyGems（ライブラリ） Gemnasium（gemの更新管理） Travis CI（オープンソースのためのCI） Scrutinizer C

コードレビューしてますか？ チームのコード品質を向上し、ひいてはシステム品質の向上を目指すためにはコードレビューが欠かせません。工業製品のように一定の品質を担保する技術がない以上、チーム全体でコード品質をあげていくのが最もいい方法ではないでしょうか。 単純に書いたコードを見せるだけでなく、Web上で確認、コメントできるようにすればより優れたコードレビューができるようになると思います。そこで使ってみたいのがCodebragです。 ログインします。 ログイン後。左にレビュー待ち一覧が並んでいます。 項目を選択すると差分が表示されます。 コード中にコメントできます。この辺りはGitHub風ですね。 ハートマークでいいねもできます。 Codebragの特徴としてはGIt/Subversionをサポートしているということがあります。バージョン管理システムの問題なので、GitHubやBitBucket

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

アジャイル開発を学ぶ上でプロジェクト管理システムを導入してそれに合わせて学んでいくというやり方は十分ありだと思います。理屈から学んでも良いのですが、形からそれに合わせる方が早いケースも多いです。 という訳でこれからアジャイル開発を取り入れていこうというスモールチームまたはフリーランスの方に使ってみて欲しいプロジェクト管理Agilefantを紹介します。システムを通じてエッセンスを学び取ってみてください。 トップページ。プロダクトがプロジェクトに分かれ、さらにそれがイテレーションによって管理されるのが分かります。 Agilefantではバックログの管理に重点を置いているようです。確かにバックログを適切に管理していくことで見積もり精度を上げたり、工程がスムーズになっていくことでしょう。 プロダクトの説明。プロジェクトプラン、ストーリなどが項目にあります。 こちらはドリルダウンしたプロジェクトの

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

HTML5によってJavaScriptからWebカムにアクセスできるようになりました。さらにJavaScriptの処理速度は向上しており、それによって画像をリアルタイムに処理することも問題なくできるようになっています。 この二つによってWebカムから取り込んだ映像をリアルタイム処理するソフトウェアが多数出てきています。今回はその一つ、JavaScriptでAR（拡張現実）を実現するjs-arucoを紹介します。 一例。マーカー部分を認識しています。 デバッグ。様々なフィルタを繰り返すことで必要な情報だけを取り出しています。 実演のデモです。 ARを行う上ではまずマーカーの認識と識別、そしてその後にマーカーの上にオブジェクトを描画する段階になります。現時点でjs-arucoは地球のような簡単なオブジェクトであればマーカーの上に描画できます。 Webベースであればサーバ上のデータと連携させるの

Your HPE MyAccount provides you with: Single sign-on to the HPE ecosystem Personalized recommendations Test drives and other trials And many more exclusive benefits

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

GitHubは各自がリポジトリを持つ分散型ソースコード管理システムになっています。そして各自が差分を受け取ることでコラボレーションを実現しています。 同じような仕組みをデータについても行おうとしているのがDatです。まだはじまったばかりのプロジェクトではありますが非常に興味深いソフトウェアになります。 インストールはnpmを使って行いますので簡単に完了します。 $ npm install dat -g インストールが完了したら、最も基本的な使い方を試してみます。 $ mkdir foo $ cd foo $ dat init これで初期化が終わります。Gitに似ていますね。次にデータを追加します。 # 一例 $ echo '{"hello": "world"}' | dat --json # CSVからも可能 $ cat some_csv.csv | dat --csv データの読み込みは

これはWebベース、HTML5製の業務システムを後押ししそうです！ HTML5のWebアプリケーションが増えています。今のところWebサービスとして提供されるSaaS系のシステムが多いですが、今後は基幹システムにおいてもWebベース、さらにはHTML5ベースで構築するケースが増えていくでしょう。 そんな時にはこれまでの業務アプリケーションと同じような感じで使えるUIコンポーネントが欲しくなるはずです。そこで紹介したいのがOpenUI5です。SAPからリリースされたエンタープライズレベルのUIコンポーネント集です。 実に数多くのコンポーネントが用意されています。 カルーセルコンポーネント。 ロードマップ。こういうUIも使いそうですね。 コンポーネントの他、デモのWebアプリケーションも多数公開されています。 サンプルのアプリケーション。メール風のUIに使えそうです。 タブレットフレンドリーな

Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =

新年早々から面白いソフトウェアが出てきましたよ！ 2013年にはビッグデータに注目が集まりましたが、鍵になるのはその膨大なデータをいかに扱い、価値あるデータを引き出すかにかかっています。ただ蓄積するだけ、見ているだけではまったく意味がありません。 テキストであればまだしも画像や音声などではそれが何であるか判断する技術は単純ではありません。そこで2012年頃から注目を浴び始めたのがディープラーニングと呼ばれる技術であり、それをJavaScriptで体感できるのがConvNetJSになります。 ディープラーニングとは 筆者もはっきりと分かっている訳ではないのですが、これまでの機械的学習では特徴点を予め人間の手で設計する必要がありました。それに対してディープラーニングでは設計過程も含めて機会学習に含められるようです。 また、特徴点の組み合わせだけでなく、それらの特徴となる部品の組み合わせまで含め

ここまでシンプルなら崩れることもなく使えそうですね。 スマートフォンやWebメーラーの流行にのって、HTMLメールが使われるようになってきています。海外サービスではもはや当たり前で、日本でも使われることが多くなっています。やはり多彩な表現ができるメリットは大きいです。 そんな中、逆に問題になっているのがHTMLメールのレイアウトです。様々なメーラーがある中で適切に情報を表示するのは相当大変なことです。そこでベースに使ってみたいのがHTMLメールのテンプレートです。今回はレスポンシブに対応したシンプルなHTMLメールテンプレート、Really Simple Responsive HTML Email Templateを紹介します。 こちらがそのテンプレートです。確かにシンプルですね。 スマートフォンで見た場合もきちんと表示されます。メールで送った場合も問題はないようです。 iPhoneのメー

The world needs more inclusive, Jesus-following, antiracist, love- and justice-generating communities.

PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました とてもシンプルなWYSIWYGエディタですよ！ Web上でテキストを入力する際に何らかのWYSIWYGエディタを備えているケースは多いです。しかし難点はそういったエディタの機能が多く、使いこなせないということです。その際にサイズが大きいので動作が重くなります。 そこで使ってみたいのがwysiwygetizeです。ぱっと見は単なるテキストエリアに見えますが、シンプルなWYSIWYG機能を提供します。 使い方 使う際のコードは以下のようになります。 $('textarea').wysiwygetize({ buttons: { // values = the menu buttons labels. You can also specify which buttons you want

これは使い勝手良さそう！ 2014年は電子書籍が大いに羽ばたく年になるかも知れません。デバイスは各種揃い、そのためのハードウェア的土壌は整ってきました。サービスも数多く存在し、足りないのはコンテンツです。もっと誰でも簡単に電子書籍を作れる仕組みが必要でしょう。 特にePubを作るのは面倒なイメージがあります。そこで使ってみて欲しいのがbookShop、電子書籍作成フレームワークです。 bookShopはこれ一つでHTML/PDF/ePub/Mobiファイルの作成ができます。基本はHTML5で、PDFの場合はPrinceXMLを使って生成します。 インストールと準備 インストールは簡単でRubygemsを使って行えます。 $ gem install bookshop インストールが終わったら電子書籍プロジェクトを作成します。 $ bookshop new my_new_book そうすると以

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

TOP  >  Design  >  抽象的な表現が特徴の高解像度テクスチャ20種「20 High Resolution Abstract Textures」 非常に多彩なデザインが存在するテクスチャ。特にデザイナーの方で素材としてたくさんストックされている方も多いのではないかと思います。今回はそんなテクスチャ素材の中で抽象的な表現が特徴の「20 High Resolution Abstract Textures」を紹介したいと思います。 （Texture 445 by Sirius-sdz on deviantART） 高解像度が嬉しい、いろんな質感のテクスチャが20種まとめられています。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Acrylic painted texture – Green Circles by flordeneu on devian

HTML5によってローカルストレージが使えるようになり、キャッシュ以上に速いデータの読み書きが実現できるようになっています。しかし大きな欠点があります。それはストレージが1ドメイン5MBまでに限定されることです。 もっと大きなサイズで保存したい、そう思うこともあるかと思います。テキストデータであれば検討して欲しいのがlz-stringです。テキストデータを圧縮できるJavaScriptライブラリです。利点は圧縮率よりも処理の高速さにあります。 デモです。lz-stringの場合、1msで60 byte（48%）まで軽減しています。対するLZMAは36msで78 byteとなっています。 コンソールで試しています。 ちゃんとデコンパイルすると元の文字列が得られているのが分かります。 日本語でのテスト。696 byteが605 byte になっています。 試した限りでは、短い文字に対して使うと

プロジェクトの規模を問わずプロジェクト管理は必須です。規模に応じて利用する機能は選択すべきですが、プロジェクト管理がなければやるべき作業が分からず右往左往してプロジェクトが全く進まなくなってしまうでしょう。 Ganibはスモールチームにはちょっと規模が大きいと感じられますが、社内で複数のプロジェクトが同時に動いているようなケースで使うと良いのではないかと思います。Java製ということもあって、よりエンタープライズ向けかも知れません。 最初にメンバーを登録します。 メンバーの権限はメンバー、リーダー、マネージャの3パターンとなっています。 次にプロジェクトを登録します。 プロジェクトダッシュボードです。 タスク管理。 ブログ。 カレンダー。 リソース。 タイムシート。 レポート。一覧でほぼ見られるのは便利です。 gTrackというフロントエンドアプリが提供されています。 Ganibはイテレー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ※ オープンソースからオープンAPIに変わっています。ソースコードは公開されていませんのでご注意ください。 最近二段階認証が流行です。通常使っているパスワードに加えてスマートフォンを使ったワンタイムパスワードを生成することでセキュリティを担保する仕組みです。確かにセキュアだと思いますが、スマートフォンを持っていないと使えないのが難点です。 さらにセキュアな仕組みとしてワンタイムパスワードがあります。通常、専用デバイスを使って行われますがスマートフォンを使って行おうというのがmOTPになります。 仕組み mOTPは最初に携帯電話番号を登録します。この部分はデモでは自由入力になっていますが実際にはアプリなどで取得する形になるかと思います。 そしてサーバにアクセスするとSidが生成されま

高品質で実用性の高い レスポンシブルHTML5フリーテンプレート「High Quality Yet Free Responsive HTML5 Templates」 webデザインを1から制作し完成までたどり着くには、かなりの時間と労力を必要とします。さらに、今ではスマートフォンからタブレットまで、ありとあらゆる端末への対応が求められることも多いのではないでしょうか？今回はそんなシーンに活用できる、レスポンシブルHTML5フリーテンプレート「High Quality Yet Free Responsive HTML5 Templates」を紹介したいと思います。 （Royale – Free html5 Template | html5mania.com） HTML5形式の、高品質で実用性の高いフリーテンプレートが紹介されています。 詳しくは以下 Agency is a responsiv

TOP  >  Design  >  リアルからフラットまで クリエイティブなアイコン35種まとめ「35 Fresh Icon Designs for Inspiration」 webデザインに使用されることの多いアイコン素材。シンプルな描写のものは使いやすく重宝しますが、時には凝ったデザインのタイプが必要になる時もあるのではないでしょうか？今回はそんな時に利用できる、クリエイティブなアイコン35種まとめ「35 Fresh Icon Designs for Inspiration」を紹介したいと思います。 （Dribbble – Backpack Icon by Maria Isaeva） 立体感のあるリアルさを追求したものから、今主流のフラットタイプまで、いろいろな種類のアイコンがセットになっています。 詳しくは以下 Dribbble – Volume by Andrew Baygulo

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの負荷テストを行う際によく使われるツールがApache Bench（通称ab）ですが、その代替になるかも知れないソフトウェアがBoom!です。 インストールはpipだけでできます。ただし他にlibeventも必要です。 $ pip install boom 使い方としてはabと殆ど変わらないように見えます。基本的には以下のようなコマンドです。 $ boom http://localhost:80 -c 10 -n 100 例えばMOONGIFTを実行すると次のようになります。 その他のオプションは次のようになっています。 $ boom --help usage: boom [-h] [--version] [-m {GET,POST,DELETE,PUT,HEAD,OP

Secure devices and computers in business & organizational networks Premier IT Cybersecurity solutions by Endian for business & organizational networks. Ensure robust protection for devices, computers, and digital infrastructure.

ブログや記事でコンソール操作のログを公開することがありますが、あれは意外と大変です。打ったコマンドだけであればまだしも、その結果まで保存しておくとなると面倒です。つい保存し忘れてしまったりすると途端に価値がなくなってしまいます。 そこで使ってみたいのがAsciinemaです。ターミナルでの入力内容をすべてそのまま記録してくれるソフトウェアで、さらにWeb上に公開もできます。 早速使ってみましょう。インストールはpipを使ってできます。 $ pip install --upgrade asciinema ： Cleaning up... これで準備は完了です。後は asciinemaコマンドを実行後、自由にコマンドを打っていきます。 例えばこんな感じ。ls打って、wgetでコンテンツをゲットして…といった具合です。 完了したらctrl+dまたはexitを実行します。そうするとアップロードする

Facebookからまた面白そうなソフトウェアが出てきましたよ！ JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。 ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。 一番シンプルな実装例。左側がコード、右側が実行結果になります。 Reactは必須ではないのですがJSXというXMLライクな記法を使っています。 <hellomessage name="John" />のように定義するとthis.props.nameで値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。 こちらはタイマーを使った例。コードが見やす