ブラウザからの音声入力を認識してテキスト化する (Web Speech API) - Qiita
Chromeすごいわ。ブラウザだけでここまでできるとは。 こんな簡単なHTMLだけで音声認識→ テキスト化ができます。 日本語もOK。 デモをこちらに起きました。 http://inouet.github.io/sample_html/001.speech_recognition.html コード <html> <head> <meta charset="UTF-8" /> <title>Web Speech API</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; var recognition = new we
Office UI Fabric - Office 365で使われているフロントエンドフレームワーク MOONGIFT
実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。 今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークになります。 Office UI Fabricの使い方 Office UI Fabricのデモです。よくありそうな動画一覧画面です。 メニュー表示。 アイコン。 フォーム。 トグル。 テキストフィールド。 テーブル。 パーソナルカード。 写真付きのリスト。 パネル。 より詳細な設定ができるリスト。 カレンダーピッカー。 コマンドバー。 Office UI Fabricはフラットかつ落ち着いた色合いがちょっとだけ使われているといった白い部分がより強調されているフレームワークとなっ
Summernote - シンプルなUIのBootstrap用WYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ユーザにコンテンツを作ってもらう上で欠かせないのがWYSIWYGエディタです。HTMLでの記述に慣れた人にとっては邪魔くさいかも知れませんが、そうでない人のがたくさんいます。そうした人が自由に思い通りにコンテンツが作れるWYSIWYGエディタはとても大事です。 今回紹介するSummernoteもそんなWYSIWYGエディタの一つですが、Bootstrap向けという点がポイントになっています。 Summernoteの使い方 こちらがSummernoteです。シンプルなUIなのが特徴です。 ツールバーを消すモードもあります。 テーブルも追加できます。 生成されるHTMLも綺麗です。Bootstrapに対応したクラスが割り当てられているのもポイントです。 SummernoteはDjang
Dropify - ファイルアップロードを格好良く！ MOONGIFT
HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif
Substance - Webページをそのまま編集できるWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。 そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceはとても便利そうです。 Substanceの使い方 Substanceを適用しているページです。普通のWebページのように見えますが編集できます。 選択して見出しにしました。 太字にすることもできます。 リンクを追加する場合。 メニューを使って文字の種類を変更できます。 Substanceの特徴としてはHTMLやXMLのインポートができること、サーバ/クライアントサイ
Googleのマテリアルデザインを使ったウェブサイトが作れる公式CSS/JS/HTMLコンポーネント「Material Design Lite」
Googleがモバイル向けOSの「Android 5.0 Lollipop」で採用し、同社の他の製品やサービスでも導入されている「Material Design(マテリアルデザイン)」は、見た目だけではなく使い勝手までも意識してデザインされたUXです。そのマテリアルデザインを使ったウェブサイトを作れるCSS/Javascript/HTMLコンポーネント「Material Design Lite」を、Googleが公開しています。 Material Design Lite http://www.getmdl.io/ Introducing Material Design Lite — Google Developers — Medium https://medium.com/google-developers/introducing-material-design-lite-3ce67098
Webでもサーバでも使えるJavaScriptテンプレートエンジン·doT.js MOONGIFT
doT.jsはWebブラウザ、node.jsの両方で使えるJavaScriptテンプレートエンジンです。 Webアプリケーションを開発していると必ずJavaScriptでHTMLを出力する必要性が出てきます。そのような時に使いたいのがテンプレートエンジンです。今回はWebブラウザ、node.jsの両方で使えるdoT.jsを紹介します。 テンプレートとJSONデータを組み合わせてHTMLを出力します。 繰り返しも対応。 パーシャルも使えます。 条件分け。 配列。 エンコード表示も可能です。 特徴としては外部ライブラリの依存性がないこと、高速であること、パーシャルサポート、イテレータなどがあります。ストリーミングのようにデータが随時追加されていく場合も想定されています。ifではなく、?を使うのがユニークです。 doT.jsはnode.js/JavaScript製のオープンソース・ソフトウェア（
HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク·Ratchet MOONGIFT
RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。 iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。 デモサイトです。 ヘッダー、フッターは動かないでスクロールします。 チケットページに遷移しました。 フォームです。奇麗です。 設定ページ。ボタンの色も指定できます。 こちらはキッチンシンク。 タイトルだけでもこんなにパターンが。 タブバーも色々。 ボタンも大きさ、バッジ付きなど色々。 リスト。 リストにバッジをつけられます。 ボタン付きバッジ。 フォーム。 Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿っ
TechCrunch | Startup and Technology News
Unlike Light’s older phones, the Light III sports a larger OLED display and an NFC chip to make way for future payment tools, as well as a camera.
アドビが同社のHTML5関連技術を紹介するWebサイト「Adobe & HTML」を公開 － Publickey Topics
With so many exciting things happening at all levels of the web “stack”, we wanted to create a single place where we can share everything we are working on with the community to improve what is possible on the web and simplify how you work with HTML, CSS, SVG and JavaScript. アドビのHTML5関連の新技術として、いま策定中のCSS Regions、CSS Shards、CSS Shadersや、そしてアドビが支援しているオープンソースのCordva（PhoneGap）、jQuery Mobile、WebKit、そしてD
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
印刷ボタン