ブックマーク / www.moongift.jp (10)
-
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere︵一度覚えればどこでも動く︶が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows10でも使えます。 フォームもまさにWindows10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
-
先日紹介した電子書籍作成環境GitBookですが、基本はコマンドラインを使ってGruntで自動生成するのが基本になります。しかしGUIのエディタを使って作成したいと思う方は大勢いるでしょう。 そんな方に使ってみて欲しいのがGitBook Editorです。GitBookに対応したマルチプラットフォームで動作するエディタです。GitBook Editorの使い方 メイン画面です。左がMarkdownファイルの一覧で、見出しが並びます。中央がエディタ、右がプレビューになります。 ツールバーを使って自動入力でどんどん書いていけます。 HTMLでプレビューもできます。 メニューを表示したり隠したりできます。GitBook EditorはGitBookをラッピングしてnode-webkitでGUIアプリケーションにしたものと思われます。GitBook自体がnodeなのでラッピングは難しくなさそう
-
ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自
-
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア︵MIT Lic
-
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク﹁ChocolateChip﹂ モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
-
おお、これは企業で使えそうですよ! 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。Gitonomyの使い方GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。GitonomyはPHP
-
これで十分でしょ! Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも! アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
-
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CMSというと最近ではWordPressが有名ですが、各プログラミング言語、各フレームワークごとに分かれてソフトウェアが存在します。それぞれ用途や環境に合わせて選択すべきです。 もしあなたがRubyonRailsを得意としているならば知っておきたいのがSkylineです。RailsをベースにしたCMSなのでカスタマイズも容易そうです。 まずはユーザ向けの画面から見ていきます。 続いて管理画面を見てみます。 Skylineの特徴として、管理画面がツリー構造で管理されているというのがあります。中央にあるWYSIWYGエディタを使ってコンテンツを編集できます。 Skylineはどのカテゴリ、どのページでもツリー構造の中で管理しているので汎用的な仕組みを使っているのが分かります。ニーズ
-
これは知っておいて損はないでしょう! Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで︵Bootstrap本来の機能も使いつつ︶リッチな
-
※ 画面は公式サイトデモより ああ、これは個人的にとても嬉しい。Railsはとても優秀なフレームワークだが、これで敢えてブログを運用しようとも、開発しようとも思わない。既にWordPressという優秀なブログエンジンが存在するからだ。車輪の再開発は個人的にはしても良いと思うのだが、もっと別なことにエネルギーを向けられるならそれがベストだ。 デモ。ユーザを選んでログインを実行する また、WordPressには既に多数のプラグインが存在し、それらを使えばできることはたくさんある。それの足りない部分をRailsで補うというのはどうだろう。 今回紹介するオープンソース・ソフトウェアはRails Integration API、Railsを使ってWordPressにシングルサインオンするプラグインだ。 Rails Integration APIはRailsだけで成り立つものではない。WordPres
-
1