Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
Bowlcu - SVGテキストを自在に変化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。 今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。 Bowlcutの使い方 例です。人の顔の部分は画像です。JavaScriptで文字を動かしています。 こんな感じで曲線に沿った表示もできます。 ほとんどロゴのように使えます。 そしてパスをカスタマイズできます。 複数のエフェクトを組み合わせられます。 Bowlcutを使えば単なるテキストがあっと驚くくらい印象的になります。うまく使うためにはコツも必要そうですが、アニメーションGIFで作るよりも軽く、
jQuery.ajaxにCacheが残って困ったら設定 - Qiita
概要 よく使っている🔗jQuery.ajax()のCacheのため、 いつ困るかと対応する方法に対して説明を差し上げます。 ※ ajaxとはAsynchronous Javascript And Xml(非同期方式のJavascriptとxml)でブラウザーXMLHttpRequestのオブジェクトを利用して画面のリロードせずに内部(外部はjsonp方式)で通信する方法 ちなみに、jQuery.ajaxには色々設定が出来ますので、 以下のリンクを参考して合わせましょう。 🔗jQuery.ajax() 🔗[JavaScript]知っておいたら良いjQuery.ajaxの有用な設定項目（準備中） いつ困るか 例で、ざっくりテストしました。（Request Type : GET） ・サーバ側に存在しているjsonファイルtest_1,2,3を呼んでいます。 ・サーバ側に存在していないjso
JavaScriptでセキュアなコーディングをするために気をつけること – cybozu developer network
（著者：サイボウズ kintone開発チーム 天野 祐介） kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
GoMocha - テイクアウトの予約システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スターバックスや多くのカフェやレストランでオンラインによる注文受け付けシステムが出始めています。オンラインで注文し、指定時間になったら引き取りに行くだけです。とても手軽で効率的なシステムです。 自分のお店でもそんなシステムを導入したいという方はGoMochaを使ってみましょう。 GoMochaの使い方 注文開始です。まず名前を入れます。名前があるのが何となく海外っぽいですね。 開始です。 お店を選択します。 商品を選びます。デカフェオプションが良い感じです。 商品を追加しました。 商品を取りに来る時間を選びます。また、交通手段も選びます。 注文の確認です。 注文が完了しました。 注文の履歴も確認できます。 GoMochaはお店側の管理画面もあり、注文内容を一覧して完了したらステータ
Gokotta - Electron製のミュージックプレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ストリーミング配信が増え、iTunesやAmazon Musicなどのクラウドベースの音楽販売サービスが流行っていくと、MP3で楽曲ファイルを持っているのは貴重になるかも知れません。しかしCDからリッピングして楽曲を持っている方も多いことでしょう。 そうした方に使ってみて欲しいのがGokottaです。Electron製の、マルチプラットフォームで動作する音楽プレイヤーです。 Gokottaの使い方 すっきりしたUIです。メタデータが含まれる場合にはアートワークも表示されます（筆者がもうMP3を持っていないため、Unknownばかりになっています）。 Gokottaはシンプルな音楽プレイヤーで、フォルダを登録して、その中にあるMP3やAAC、WAVファイルを再生できます。技術的にはE
Nuage - 各種ストレージサービスを共通のUIで操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クラウドにデータを保存できるサービス、技術が増えています。一つのストレージに頼らず、様々なサービスを使いこなしているのではないでしょうか。しかし、その結果としてUIがバラバラになってしまって、管理が煩雑になります。 Nuageは多数のクラウドストレージに対応し、共通したインタフェースで使えるようにするソフトウェアです。 Nuageの使い方 Nuageの画面です。対応しているのはWebDAV、FTP、SFTP、Git、S3、Dropbox、Google Driveとなっています。 Dropboxにつなぎました。インタフェースはDropbox風とのことです。 Markdownファイルなどテキストファイルはプレビューできます。 XMLもプレビューできます。 画像はモーダルで表示されます。
2018年の最先端フロントエンドエンジニアになろう - Qiita
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて
TensorFlow.js - Webでも機械学習。JavaScript版TensorFlow MOONGIFT
TensorFlowと言えば機械学習を行うソフトウェアで、多くのサービスやソフトウェアの基盤に使われています。環境を整えるのは若干大変ですが、Dockerイメージもあります。GPUなどのハードウェアさえ用意できれば、利用するまでの敷居はずいぶん低くなっています。 そんなTensorFlowをWebブラウザベース、WebGLで使えるようにしたのがTensorFlow.jsです。 TensorFlow.jsの使い方 こちらはデモです。絵文字に合ったものを見つけてカメラに写すというゲームです。 例えばキーボードの絵文字の場合。認識精度は高いです。 トレーニング機能付きのパックマン。そもそも操作が難しかったりします。 3つのポージングに合わせて出力が変わるものです。サンプルはカメラから一気に取得します。 それぞれの状態に応じて認識率が変わっていくのが分かります。 できあがったモデルを使って動画を作
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート MOONGIFT
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。 Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるならばBootstrap4対応版を使うのが良いでしょう。 Sufee Adminの使い方 ダッシュボードです。数値をリアルタイムに更新できます。 テーブル。 ボタン。 バッジ。 タブ。 カード。 ダッシュボードの表現も様々です。 グラフはChart.js/Flow Chart/Peity Cartに対応しています。 地図表示。 ログインページ。 Sufee Adminを使うことで、サイドメニューがあるタイプの管理画面が簡単に構築できます。多くのシステムでは管理画面のデザインまで
hello.js·各種ソーシャルプロバイダの認証をまとめるJavaScriptライブラリ MOONGIFT
今はソーシャルサービス全盛とあって、FacebookやTwitterなどと連携してサービスを提供するのが一般的です。しかし各プロバイダーの接続を一元化したりするのはちょっと面倒に感じていることでしょう。 そこで使ってみたいのがhello.jsです。多数のソーシャルプロバイダーをひとまとめにしてくれるJavaScriptライブラリです。 hello.jsの使い方 hello.jsの良いところはJavaScriptベースということでしょう。 こんなに多くのソーシャルプロバイダーに対応しています。 例えばFacebookでログインした場合。 アイコンや名前が取得できています。 他のサービスでも同様です。 Facebookの場合はJavaScript向けのAPIが公開されていますので、それを使っています。対してTwitterなどの場合はプロキシサーバを立てて、そこでキーを生成するようになっています
CodePenだけじゃない！ブラウザー上でサクッとコードを書けるプレイグラウンド7選
コードの動きをすぐに確かめたいときに便利なのが、Webブラウザーで使えるプレイグラウンドサービス。主要な7つのサービスを紹介します。 フロントエンドのコードを試せるサービスは数多くあります。多くはクイック＆ダーティ（汚くても良いから手早く）で、クライアント側のコードをほかの人と共有します。 主な機能は、 色分けされたHTML、CSS、JavaScriptのエディター プレビューウィンドウで更新せずに変更が確認できる HTMLプリプロセッサー、たとえばHAMLなどに対応 CSSプリプロセッサー、LESS、SASS、Stylusなどに対応 人気のJavaScriptライブラリーが使える 開発者用コンソールと検査ツール ショートURLによる共有 別ページへの埋め込みによるデモ コードのフォーク 基本は無料（プレミアム機能のみ有料） 世の中にあなたの腕前を見せつける です。 面倒なファイル作成やI
コード共有サイト Codepen で2015年に話題となった投稿ベスト100
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2015年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2015 が発表されていたので、今回はその中でも特に印象的だった、クリエイティブな作品をいくつかピックアップしてご紹介します。 やはり話題性の高い、最先端テクニックを駆使した投稿が中心にまとめられています。HTML/CSSやJSなどのコードを確認することができるので、今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 コード共有サイト Codepen で2015年に話題となった投稿ベスト100 ページの読み込みに時間がかかる恐れがあります。しばらくしてからスクロールすることをオススメします。 100位 Calendar Widget HTML/CSSのみで作成された、
eCards - 送ろう！Web上でeカード作成 MOONGIFT
誕生日やクリスマスなどに、西洋ではグリーティングカードを送ります。日本でも売られてはいますが、年賀状ほど有名ではないでしょう。そして、最近ではもっと手軽にeカードが使われるようになっています。 今回紹介するeCardsはWeb上でeカードを作成できるソフトウェアになります。 eCardsの使い方 メイン画面です。テーマから選んだり、自分で好きな画像を指定できます。 テーマを選んでみたところです。 日本語も使えますが、フォントが指定できません。 文字を傾けることもできます。 文字の縁取りなど、細かいカスタマイズもできます。 背景画像も変えてみました。 できあがった画像です。テキストに意味はありません。 eCardsを使うとプレゼンテーションのスライドを作るような感覚でeカードを作成できます。すべてWeb上で完結していて、画像の生成までWeb上でできています。Webブラウザさえあれば使えるのが
Konva - Canvas上で2Dを描くのに便利なライブラリ
HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。 今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。 Konvaの使い方 デモです。ルーレットが回転します。 回転している様子。 手書きができるデモ。 画像のサイズ変更。 ベジェ曲線。 絵合わせゲーム。 Konvaは描画するだけでなく、インタラクティブな操作にも対応しています。デスクトップはもちろん、モバイルブラウザにも使えます。レイヤーをサポートし、様々なシェイプをサポートしています。Canvasを使う際にはぜひKonvaと組み合わせてみてください。 KonvaはJavaScript製のオープンソース・ソフトウェア（MIT License）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - atashbahar/ecardcanvas: HTML5 Canvas eCard Editor
GitHub - Netflix/falcor: A JavaScript library for efficient data fetching
Apple like slide show