自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できる・「Theme Studio」
Theme Studioは自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できるWebアプリです。 使い方は簡単で、各所の色を決めていくだけ、というものになりますが、その「各所」の数が非常に大量にあります。全部で240か所くらいだと思います。 全てを1から決めるのではなく、一応ダークとライトの雛型が用意されていますのでどちらかを選んで色を決めていき、終わったらJSONファイルをダウンロードして利用する、という流れの様です。 左カラムで場所を選び、任意の色を決めていく作業になります。 場所は多くに3つに分けられていて、左上のタブで選択できます。「COLORS」ではサイドバーやタイトル、ボタンなど外観メイン、「EDITOR」では名前通りエディタの機能部分の色、「SYNTAX」はコードのカラーになります。 インストール前に確認できるのは良いですよね。僕自身はATOM派でVS
ウェブサイトへの流入を爆増させる可能性を持つ「マイクロブラウザ」について知っておくべきこと
by www_slon_pics チャットやSNSでの「リンクの共有」がウェブサイトが見られるきっかけになることが近年急激に増加しています。アプリを使っていると、URLを貼り付けた時にウェブサイトの中身が「チラ見」できる画像や説明文が表示されるのを目にしますが、作家であり研究者でもあるコリン・ベンデルさんはこれを「マイクロブラウザ」と呼び、その効果を重要視しているとのこと。ウェブサイトへの流入を急増させる可能性を持つマイクロブラウザとはどういったもので、どう扱うべきなのか、ベンデル氏が解説しています。 Microbrowsers are Everywhere ◆ 24 ways https://24ways.org/2019/microbrowsers-are-everywhere/ 一般的にスマートフォンなどの携帯機器向けに開発されたウェブブラウザをマイクロブラウザと呼びますが、ここでベ
Monaka - 添付ファイルも使える汎用メールフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールフォームはWebサイトで最もよく使われる機能ではないでしょうか。お問い合わせであったり、注文フォームなどユーザに入力してもらってサーバで送信を行う機会はとても多いです。毎回プロジェクトで作っているという方も多いでしょう。 今回紹介するMonakaはPHP製の汎用的なメールフォームソフトウェアです。 Monakaの使い方 入力フォームです。 確認画面付きです。 画像の場合はプレビュー付きです。 送信完了時の画面です。 確認メールも送られてきます。 Monakaは設定ファイルをカスタマイズしてフォームを細かく設定できます。デザインについてはスタイルシートを編集して行う形になります。汎用的なフォームなので、様々な場面で使えるのではないでしょうか。 MonakaはPHP製のオープンソ
Uppy - クラウドストレージも使える高機能なファイルアップローダー MOONGIFT
HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。 今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。 Uppyの使い方 利用しているところです。Google DriveやInstagram、Webカメラなどを入力ソースとして指定できます。 画像はプレビューも表示されます。 ファイル名を変更したりすることもできます。 Google Driveの場合は認証を行います。 ディレクトリを辿ってファイルを指定できます。 アップロードを開始しました。順番にファイルがアップロードされていきます。 すべてのファイルがアップロードされました。 UppyはGoogle DriveやDropbox、Instagramをデ
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デモのように<>input type=”file”で画像ファイルを選択すると、その画像がアップロードされる前に表示、ユーザーが確認出来るようにしてくれます。オプションでファイルサイズや拡張子の制限が出来るようです。ライセンスはMIT。 LoadImg
jQueryでファイル選択時にプレビュー表示する方法
jQueryでファイル選択時にプレビュー表示する方法を紹介します。 １．はじめに フォームのファイル選択で画像を選択したときに画像のプレビューを表示したい場合があると思います。 ということで、jQueryを使って画像をプレビュー表示する方法を紹介します。 ２．ファイル選択時にプレビュー表示する まず、下記のファイル選択フォームを用意します。 <form> <input type="file" id="file" /> </form> <div id="result"></div> そして次のjQueryを追加します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#file').change(function(){ $('img').remove()
FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」
TOP > javascript , WebDesign > FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」 動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。 こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。 詳しくは以下 GIFのマークをクリックするとGIFアニメーションがスタートし、再
公開前の記事を共有できるWordPressプラグイン「Public Post Preview」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ひろゆきです。 メディア運営などにWordPressを使われている方も多いのではないでしょうか？ ブログの記事作成に便利なWordPressですが、非公開状態の記事を外部の人に確認してもらいたいときってありますよね。 今日は、公開前の記事を外部の人に共有できるプラグイン「Public Post Preview」をご紹介します。 特徴 Public Post Previewの特徴は下記の通り。 下書き、予約投稿、レビュー待ちの記事に対して、ログインなしでも閲覧できるプレビュー用のリンクを生成できる プレビュー用リンクに有効期限を設定できる カスタム投稿タイプにも対応している 導入方法 プラグインの新規追加から「Public Post Preview」で検索するか、こちらからダウンロードして、プラグインフォルダにアップロードしましょう。 ファイルの設置が完了したら有効にしてください
正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ） | コリス
制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」を公開します。 １．基本 Movable Typeのインデックステンプレートおよびアーカイブテンプレートには、テンプレートをプレビューする機能があります。 インデックステンプレートは、テンプレートで出力されるページが1ページしかないため、プレビューする内容と出力内容が一致しています。 が、アーカイブページは複数のページが存在するにもかかわらず、プレビューでは特定のページ（下記）しかプレビューすることができません。 カテゴリアーカイブ：一番古いカテゴリ 月別アーカイブ：最新の年月 ブログ記事アーカイブ：最新のブログ記事 ウェブページアーカイブ：最新のウェブページ 「TemplatePreviewSelectorプラグイン」を利用すれば、任意の年月・記事・カテゴリ
GIFアニメーションを一覧でプレビューしつつ検索できる「GIPHY」
「GIPHY」はGIFアニメーション専用の検索サイトです。ワード検索やタグ検索によって好みのGIFアニメを簡単に検索できるほか、見つけたGIFアニメはTwitterやFacebookで共有したり、サイトに埋め込んだりすることができます。 Search in a Giphy http://giphy.com/ トップページはこんな感じになっていて、GIFアニメがたくさん表示されています。 個別のGIFアニメにマウスカーソルをのせるとアニメーションの再生が始まります。 画面上には、検索バーと「Browse」ボタン。 Browseボタンを押すと…… 人気カテゴリと、各カテゴリで人気のある検索ワードが表示されるので、ここから好きなGIFアニメを探してもOK。 検索バーから試しに「cat」と検索してみました。 猫のGIFアニメがいっぱい。 GIFアニメをクリックすると、画像サイズが大きくなってアニメ
Movable Typeでプレビューファイルを残すことができる「PreviewFileSaverプラグイン」
Movable Typeでプレビュー時のファイルを残すことができる「PreviewFileSaverプラグイン」を公開します。 １．MTのプレビュー機能について Movable Typeのプレビュー機能では、プレビュー時に mt-preview-382655ae9353f1d6c0ddc3b5e86f25ee21a787b8.html といったファイルを作成し、このファイルを表示することでプレビューを実現しています。 MT5.2.3のソースコードを確認したところ、プレビューファイルを削除する契機は、ブログ記事の場合であれば、 プレビュー画面で「このブログ記事を編集する」をクリックして編集画面に戻るとき プレビュー画面で「このブログ記事を公開する」をクリックして記事を公開するとき などになっているようです。 削除は、プレビューを行ったときに保持しているセッション情報を元にしています。ファイル
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」を公開します。 １．機能 Movable Typeのデフォルト機能では、未公開のブログ記事やウェブページについて、記事編集画面でプレビューを行うことはできますが、テンプレート編集画面で未公開の記事をプレビューすることができません。 「PreviewDraftEntriesプラグイン」を利用すれば、テンプレート編集画面で未公開記事のプレビューを行うことができるようになります。 このプラグインでは以下の2点を考慮しています。 テンプレートに対し、新たにプレビュー用のテンプレートタグなどを設定する必要はありません。 公開記事と混在させてプレビューしたい場合や、プレビューをしたくない未公開の記事を含めたくないケースを考慮し、プレビューする記事IDをテンプレート編集画面で直接指定します。 例え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Griddy - CSS Grid System Education Tool
https://promosis.github.io/
GithubやBitBucketでホストされている任意のHTMLファイルをプレビューするブックマークレット・「HTMLPreview」
これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web Directions
投稿前にスマフォやタブレットでの表示状態もプレビューできるようにするWordPressプラグイン・Responsive Post Preview
