タグ

ブックマーク / www.moongift.jp (12)

  • VUESTIC - Vue.jsを使ったシステム管理画面テンプレート MOONGIFT

    Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。 今回はVue.jsを使った管理画面、VUESTICを紹介します。 VUESTICの使い方 トップページです。アイコンが大きめで分かりやすい表示です。 画面上部のアイコンをクリックするとメッセージが表示されます。 グラフです。 進捗。プログレスバーです。 入力系です。 テーブル表示も複数パターンで表示されています。 タイポグラフィ。 ボタン。 アイコンは様々なアイコン集に対応しています。 グリッド。 確認用のダイアログ。 アラート。 ログイン用のUI。 地図。 グローバルな地図。 拡大表示。ノードはアニメーションしています。 VUESTICには一般的な管理画面で必要な画面の構成要素を網羅しています。

    VUESTIC - Vue.jsを使ったシステム管理画面テンプレート MOONGIFT
  • diff-so-fancy - 差分をより見やすく加工

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマであればDiffを使うことがしょっちゅうあるはずです。そのため、Diffの使い勝手の良さ/悪さが開発効率に直結しているとも言えます。git diffなど、標準のままに使っていないでしょうか。 git diffは色分けされて見やすくなっていますが、さらに整形して可読性を上げてくれるのがdiff-so-fancyです。 diff-so-fancyの使い方 diff-so-fancyのインストールはnpmで行います。 npm install -g diff-so-fancy 実際に使い方は次のようになります。–colorはデフォルトになっている環境もあるでしょう。 git diff --color | diff-so-fancy 標準のdiff。色分けされているので見づらいわけ

    diff-so-fancy - 差分をより見やすく加工
  • Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT

    Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル

    Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
  • RedPen – 文章全体のエラーチェッカー

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くのが苦手という方は多いのではないでしょうか。個人的にはさすがに毎日のように文章を書いていて苦手意識はないのですが、堅苦しく書くなど文体によっては苦手な形式もあります。何より英文は苦手です。 通常、文章に対するスペルチェッカーはありますが、RedPenは自然言語で入力された文章全体のチェックをしてくれるソフトウェアです。 RedPenの使い方 RedPenのデモです。同じ単語が使われている場合、スペルミスなど様々な観点からチェックを行ってくれます。 RedPenは設定ファイルを使ってエラーチェックを行います。さらに言語非依存で、英語はもちろん日語やドイツ語中国語などでも利用が可能です。面白いのはプレインテキストだけでなく、MarkdownTextileでもそのまま記述

    RedPen – 文章全体のエラーチェッカー
  • Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート

    これは知っておいて損はないでしょう! Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで(Bootstrap来の機能も使いつつ)リッチな

    Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
  • ownCloud·クラウドが使えない職場、なら自前で立てるのはいかが? MOONGIFT

    うお、もの凄い勢いで進化しています! 今はクラウド全盛の時代です。Dropboxでローカルデータをクラウド上に保存し、Google Appsでメールやスケジュールを管理し、さらにiCloudでスマートフォンやタブレットのデータをバックアップする。そんな中心配になるのは自分のデータがちゃんとセキュアに保存されているのかということでしょう。 企業においてはセキュリティ基準からクラウドサービスを安易に導入できないケースもあります。そこで使ってみたいのが自前で立てられるクラウドサーバ、ownCloudです。 元々ファイルストレージがメイン機能だった覚えがあるのですがバージョン6になって実に多彩な機能を備えるようになっています。順番に見ていきましょう。 ファイル管理 まずはファイル管理。ここではローカルのファイルを同期してクラウド上からの閲覧、ダウンロードできるようになっています。 写真はownCl

    ownCloud·クラウドが使えない職場、なら自前で立てるのはいかが? MOONGIFT
  • 要注目!高機能なjQuery製のCalDAVクライアント·CalDavZAP MOONGIFT

    CalDavZAPはjQuery/JavaScriptで構築されたCalDAV対応のフロントエンドです。 CalDAVというのはGoogleカレンダーやiCloudのカレンダーでも実装されているカレンダー用のプロトコルです。そんなCalDAVをWebベースで扱うソフトウェアがCalDavZAPです。 ログインします。 最初の表示は今日の予定表示になっています。 カレンダーを選択すると予定が表示されました。 月表示です。 予定の詳細です。 編集モードです。 検索すると対象外の予定が薄くなります。 新規予定の作成です。 カレンダーで期間を選択して予定作成も可能です。 ドラッグで予定を移動させられます。 Todoも登録できます。 CalDavZAPはjQuery/JavaScriptで作られており、サーバサイドを必要としていません。バックグラウンドでデータ同期を行う仕組みであったり、イベントやT

    要注目!高機能なjQuery製のCalDAVクライアント·CalDavZAP MOONGIFT
  • Rubyで書いてJavaScriptに変換·Opal MOONGIFT

    OpalはRubyのコードをJavaScriptに変換するソフトウェアです。 JavaScriptはWebブラウザ上で実行できる唯一のプログラミング言語です(プラグインを使わなかった場合)。しかしJavaScriptを書きたくない、そう考える人も多いです。もしあなたがRubyプログラマであればOpalを使ってみましょう。 テストできるページです。左がRuby、右がその変換したJavaScript。そして下に実行結果が表示されます。 timesも使えます。 こんな感じでifを使った出し分けもできます。 OpalはRubyのコードをJavaScriptに変換できるコンパイラーです。構文はRubyのまま、JavaScriptに変換して実行されます。Ruby on RailsやjQueryに組み込んで使うこともできるようになっており、実用的と言えるのではないでしょうか。Rubyの全てが実現できる訳

    Rubyで書いてJavaScriptに変換·Opal MOONGIFT
  • HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT

    HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手

    HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
    yuggrdrasill
    yuggrdrasill 2013/01/04
    Twitter Bootstrapとの違いは ・レスポンシブが無い ・Twitter Bootstrapには無い機能ついている ・スライドショー ・LightBox ・地図 ・アイコンがフォント ってことかな?
  • MOONGIFT: » Webアプリケーションをローカルで「WApache」:オープンソースを毎日紹介

    Webアプリケーションが増えており、その操作性もGUIアプリケーションと違わぬ所まで進歩している。その内、Webアプリケーションをローカルで動作させるために配布するようになるかも知れない。 そうなった時に便利そうなのがこれだ。ローカルアプリケーションのように、Webアプリケーションを扱えるようになる。 今回紹介するオープンソース・ソフトウェアはWApache、ローカルで動作するWebアプリケーション実行環境だ。 WApacheには、起動すると即座に実行するApacheサーバが組み込まれている。これで、htdocs以下が実行できる。IEコンポーネントを使っているが、アドレスバー等はないので専用のWebアプリケーションができあがる。 言わばWebRunner(今はPrismと改名)のIEローカル版という感じだ。他の言語でIEコンポーネントを使って…という手間を考えるとこちらのが簡単だ。ウィンド

    MOONGIFT: » Webアプリケーションをローカルで「WApache」:オープンソースを毎日紹介
    yuggrdrasill
    yuggrdrasill 2010/06/02
    スタンドアローンにする
  • MOONGIFT: 高性能なマインドマップ「View Your Mind」:オープンソースを毎日紹介

    マインドマップはただアイディアを出すためだけのソフトウェアではない。他にも様々な機会で利用できる。例えば資料をまとめたりや、タスク管理、新しい情報を収集し、それをリストアップする際にも利用できる。 色々な情報を集めて自由に体系化し、物事の整理に役立てよう。 今回紹介するオープンソース・ソフトウェアはView Your Mind、高性能なマインドマップソフトウェアだ。 View Your Mindは配置も自由に移動できるマインドマップで、中心から太い線で出てくるのが格好いい。途中で枝を作ることや、文字色の変更、アイコン追加にも対応している。 HTMLエクスポートも可能で(Linux版のみ)、マップファイルとして出力できる。他にも画像としての出力や、XMLでの出力も可能だ。他にも画像の貼り付け、タブ機能など便利な機能がたくさんある。LinuxMac OSX版ではHTML保存やOpenOffi

    MOONGIFT: 高性能なマインドマップ「View Your Mind」:オープンソースを毎日紹介
  • MOONGIFT: » 要導入!Python向け統合開発環境「PyScripter」:オープンソースを毎日紹介

    ではまだまだ開発者人口の少ないPython。しかし海外に目を転じれば、Googleのメイン開発言語になっていたり、オープンソースのプロジェクトも意外と多い。RubyにおけるRailsのような起爆剤が現れたら、シェアが一気に変わる可能性すら秘めている。 また、普段仕事で使っている言語を使ってみると、開発の楽しさが思い出されてくるものだ。いつもJavaPHP、.NETを増えている方であればなお更Pythonの魅力を体験してみてはいかだろうか。 その時に便利なのがこの統合開発環境(以下IDE)だろう。 今回紹介するオープンソース・ソフトウェアはPyScripter、Python向けのIDEだ。 さすがにIDEというだけあって、便利な機能が数多く実装されている。importモジュールの上にマウスを持ってくると、対象のモジュール名とリンクが表示される。このリンクをクリックすれば、該当モジュール

  • 1