平成最後の夏と、緑と青のHTML仕様書。 - Qiita
TL;DR HTML4? XHTML1.x? そんなものはもう死んだ。 最初に見るべきは緑のWHATWG HTMLであり、青のW3C HTML 5.xではない。 ただし、W3C HTML 5.xはWHATWG HTMLと食い違いを見せるところは参考にできる。 以下、もう少し詳しいめ説明（忙しくない人用） HTML 5.0とそれ以前のW3Cが発行したHTML仕様について W3Cからまとまったアナウンスというものはありませんでしたが1、W3Cが発行したHTML仕様の勧告――有名どころでは、HTML 3.2、HTML 4.01、XHTML 1.0、XHTML 1.1、HTML 5.0 (正式な名称はHTML5ですが、バズワードのHTML5と紛らわしいので、本稿ではこう呼ぶことにします)――は、2018年3月にすべてSuperseded Recommendationというステータスに変更されました
CLIだけでSlackで使える日本語Reaction emojiをつくる - Qiita
絵文字 / Emoji Advent Calendar 2016 - Qiita 13日目の記事です。 emojiというよりはSlackのReactionにこじ付けたテーマでやらせて貰いました。日本語リアクションなのでemojiですらない可能性もあるのでご了承ください🙇 日本語リアクションで爆速コミュニケーションの実現「コミュ障でも大丈夫👍」 皆さん、Slackのreaction（以下emoji）使っていますか？自分はめっちゃ使ってます。 emojiがあると文字では表現出来ないニュアンスも伝えられます。しかし、使いやすいemojiってなかなかないですよね。 使いやすいemojiはあるにはありますが、emojiを少し工夫すると使いやすく、文字で表現出来るニュアンスも伝えることが出来るんです。 それは日本語emojiです！(下のemojiは oti/slack-reaction-decom
CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita
※will-changeは編集時点(2016/07/27)でCandidate Recommendationの状態です。仕様変更による挙動差異などがあれば適宜コメントを頂けるとありがたいです。 TL;DR 使いどころ JavaScriptでアニメーションを行う際 CSS animation, transitionを:hover等で遅延実行する際 などの、初期値として変形やアニメーションの値を持たない要素を特定の要因で実行する際に効果を発揮する ユースケースによって、常に指定するか、動かす直前から指定して終了時に解除するかを判断する 最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない "おまじない"的な使い方も有りだが、本当にパフォーマンスが必要な場面で有効かどうかはブラウザの実装を調べるのがてっとり早い 前提知識 Webブラウザのレンダリングの仕組み ブ
Slackにスレッド機能を追加する - Qiita
追記 スレッド機能、正式リリースされたようです。この記事の役目も終わり。めでたしめでたし。 Slackにスレッド機能を追加してみました。 レポジトリはGithubに置いているので、cloneしてherokuの環境にpushするだけ(とちょっとした環境変数の設定)で動きます。 https://github.com/KeitaMoromizato/slack-thread Slackにスレッド機能を追加するというよく分からない事を言ってるようですが、結構効果的なので試してみてはどうでしょうか。 Slackの問題点 Slackを使っていると、よく次のような問題にぶち当たります。 確認したいこと・共有したいことがあったのに別のトピックによって埋もれてしまう。逆に、別のトピックが走っていたので埋もれてはいけないと思い投稿を躊躇ってしまう。本当によくあります。 解決方法としてはチャネルを細かくわけてコ
「することができる」は有害と考えられる - Qiita
「することができる」とは 技術文書を読んでいると「することができる」「することが可能である」という表現を目にします。実はこの「することができる」という表現は冗長なため有害、つまり多用すべきでないという考えがあります。 気になって「することができる」についてGoogleで検索してみました。結果、「することができる」という表現について書いたブログ記事をいくつか見つけました。以下、発見したブログ記事の一覧です。 読みやすい文章の極意は「修飾語」にあり 読みやすい文章を書くために心がけたい１０のポイント 感性工学的テキスト商品学～書き言葉のマーケティング 列挙したブログ記事の全てで「することができる」を多用しないように警告しています。 「することができる」を自動で検知 私も「することができる」「することが可能である」のような冗長表現をできるだけ利用しないように気をつけています。「することはできる」
BluemixとGitHubの連動 - Twilioを使ったブラウザ電話アプリをBluemixにデプロイ - Qiita
前回は、「BluemixのGITによるソースコードの管理。」にてソースコードをGITで管理する方法を紹介しました。 今回は、BluemixとGitHubを連動し、GitHubで管理されている「ブラウザ電話アプリ」をBluemix上にデプロイしてみたいと思います。 ご紹介する「ブラウザ電話アプリ」は、Twilioで開発されたウェウアプリで、普通のブラウザ（Chrome）から一般電話（携帯）を含めアプリ間の通話機能を開発できる機能になります。 まず、IBM Bluemix DevOps Serviceにログインします。 ※ ログインIDは、IBMアカウント（Bluemixと同様）でログインできます。 下記は、ログイン後の画面。みなさんのアカウントで管理されているプロジェクトが表示されます。 新規プロジェクトの生成（GitHub） 今回は、GitHubのプロジェクトと連動してみたいと思います。
GitHubに革命が起きる？ZenHubに追加された新機能"エピック"とは - Qiita
本機能のきっかけとなったIssueはこちらです。 A better way to work w Epics Epic機能について良い議論が行われていました。 ZenHubの最新バージョン2.16.11で追加されたEpic機能について説明したいと思います。 ZenHubとは ZenHubって何？という方は@GeckoTangさんのZenHubとはという記事を見てみて下さい。 GitHubを拡張するプロジェクトマネジメントツールです。 エピックとは エピックって何だ？という方はAtlassianの エピック、スト－リー、バージョン、そしてスプリントを読んでみてください。 これらは、アジャイルでスコープとスケジュールを適切に管理し、動くソフトウェアを提供し続けていくエンジンとなります。 ZenHubのEpic（エピック）とは 簡単に言うとGitHubのIssueをまとめられるものです。 この機能
Falcor 概要：もう１つのクエリー言語型 API - Qiita
GraphQLとは別のクエリー言語型の API である Falcor 1について調べました。 Falcor とは Netflix が開発したサーバーとクライアント間のデータのやりとりの仕様です。 Facebook の GraphQL / relay と同じように、RESTful な API の問題を解決するために開発されました。 REST の問題点は Facebook の GraphQL のページにまとめられています。(参考) Falcor でも次のような問題が解決できます。 複雑なデータを取ろうとすると API を何度も呼ばないといけない。 例：一覧を取得後に、各要素の詳細を１つずつ取得する、など 不要なデータフィールドも取得してしまう。 例：name だけ欲しいのに avatar_url とかもついてくる。 準備 Falcor のサンプルの falcor-express-demo を使
kuromoji.jsの辞書に単語を追加する - Qiita
やりたいこと kuromoji.jsを使って、提供されている辞書に単語を追加したい。 環境 OS X Yosemite 10.10.5 手順 mecab, mecab-ipadicをインストール 追加したい単語の辞書用CSVファイルを作る mecab-ipadicのモデルファイルからコストの自動推定をする kuromoji.jsで辞書を作成する 確認 1. mecab, mecab-ipadicをインストール Node.jsでmecab-ipadic-NEologdを使うを参考に、mecabとmecab-ipadicをインストールする。 $ brew install mecab mecab-ipadic xz $ echo '施行期日' | mecab 施行 名詞,サ変接続,*,*,*,*,施行,シコウ,シコー 期日 名詞,一般,*,*,*,*,期日,キジツ,キジツ EOS
無料のサービスを使ってHubotで動的に画像を生成して返す - Qiita
Hubotのことを知って、個人的に衝撃を受けたのが、「GitHub社内のDevOpsを支えるツール「Boxen」と「Hubot」（後編）～DevOps Day Tokyo 2013」という記事のこの画像でした。 botが画像を動的に作って返す…。これはぜひhubot触ってみないといけない、と思ったのでした。 目標 自宅の環境以外で、２４時間サーバが動いていて、いつでもhubotを呼び出せて、画像を生成する、ということが無料で出来る環境を目指します。 前提 いくつかキーワードが出てきますが、以下は知ってる前提で。 node hubot heroku また、冒頭の画像は、campfireというチャットサービス上での表示ですが、それもお金かかるので、hipchatという５人まで無料のチャットサービスを利用します。 探索 hubotはnode上で動いているので、nodeが使えるherokuがまず候
ZenHub2.0について - Qiita
専用の拡張をインストールすると、GitHubそのものが拡張される。 GitHubに足りないアジャイルらしさを組み込むもの。2.0以前の機能は、ZenHubとはを参照してください。 ZenHubが2014年にリリースされてから、フェイスブックやソニー、NBC、マイクロソフトなど大手に取り上げられたZenHubは、2015/6/21にバージョン2.0となり、デザインなどが一新しました。 ZenHubのバージョン2.0とされる機能は以下のとおりです。 Task Board（カンバン）の複数リポジトリ対応 新しいZenHub Boardは、複数のリポジトリのissueを同時に表示する事ができます。 1つのプロジェクトに対して、複数のリポジトリがある場合があります。 例えば、プロジェクト開発用のリポジトリ（A）と、そのプロジェクトについてのウェブサイトを管理するリポジトリ（B）を作ったとします。新し
コマンドライン+VimでArduinoをはじめよう - Qiita
Arduinoには公式の統合開発環境が存在するが，これが痒いところに手が届かず微妙に使いにくい． コード中に謎の h j k l といった文字が紛れ込んだりする（？）． ということで，なるべく公式の開発環境を使わないことを目標に，普段から慣れ親しんでいるVimで楽しくストレスフリーなものづくりをするためのメモ． やることリスト Vimのシンタックスハイライトを有効にする コマンドラインからビルド&転送をできるようにする Vimのシンタックスハイライト有効化 これはプラグインとして提供されているのでインストールする（sudar/vim-arduino-syntax）． プラグイン管理にNeoBundleを使用している場合は~/.vimrcに以下の記述をしてからNeoBundleInstallを実行すればOK． コマンドラインから操作 Inoの導入 Inoという超便利コマンドラインツールを導入
CSSでデジタルっぽい数字の表現をする - Qiita
実際のサンプルとコードはCodepenで確認できる。 （Google Chrome 39.0.2171.71 だけでしかまだ確認していない） よくある<div></div>一個でシリーズとかでもなく、<span></span>でドット部分を用意し、position:absoluteで配置し、点灯箇所を数字ごとに変えているだけ。上下のドットだけで構成しているような場合は、<div></div>一個でもつくれそうな気がしないでもないが、真ん中のタイプはちょっと苦しそうだったので、素直に<span></span>を並べてつくった。 真ん中のやつ 上下は特に難しいことはしていないが、真ん中のやつは、少しばかりどうつくるか悩んだ。コード全体は先ほどのCodepenのCSSペインにある、.counter-digitalのあたりをみると良い。悩んだ割には単純で、擬似要素で配置した上で隣接する部分の隙間を
ブラウザで大きな画像の描画をキャッシュするプリレンダリング - Qiita
巨大な画像をスムーズに表示する素敵なバッドノウハウの共有です。 大きい画像を事前にプリロードしておくことは普通にやっていると思いますが、大きい画像ってのは描画コストも当然に大きいです。DOMに配置してから、ほんのわずかですがタイムラグが発生します。すばやく画像を切り替えるような演出だとチラついたりしちゃって興ざめですね。そういった時に有効なのがプリレンダリングです。 ブラウザにそんなものあるのかっていうと、たぶんないです。勝手にそう呼んでるだけで、ようするに事前に画像を描画させてキャッシュしておこうということです。 体型は変わりません デモ ごく普通にプリロードのみ実装したものから。 プリレンダリングなし さっそうとモデルウォークしてるミクさんがいますね。さすが40コマ、ぬるぬるです。 ちなみに画像サイズは 450×450 なので、高さ 18450px の画像てことになりますね。おそろしい
Cross-OriginでWebフォントを使うとき注意すべきこと - Qiita
皆さん、Webフォント使ってますか？ Qiitaでも有名なアイコンフォントが使われてますね。FontAwesomeです。 今のところStableだとかBetaのChromeでQiitaを見ても何の問題も無いでしょう。(今回の辺りでは。) しかし、うちのChrome(38)ではこのようになってしまいます。 見事に豆腐です。 Why? ここでDevツールを開いてエラーログを見てみましょう。 そう。QiitaのFontAwesomeはcdn.qiita.comと言うCDNを経由して配信されていたんですね。でもChrome38以降のBlinkではフォントに対してもOriginチェックがあるらしい… ちなみに このことはChrome37までで既に予告されてたんですね。(手元にあったのがChromium37だったのでそれ以前のは確認できてませんが。) まとめ CDNとか経由してフォント配信する際はクロ
音声認識とKAKASIでポケットミクにもっとしゃべってもらう - Qiita
概要 学研からでているポケミクの制御アプリは js で作られています。なのでさっそく Chrome の音声認識（speech API）つかってミクさんにしゃべってもらうアプリ作ったのですが、じつはすでに似たようなのありました。 Kodama Application ただこのアプリでミクさんが発話してくれるのはひらがなだけです。もちろんそんなミクさんもかわいいのですが、KAKASI を使ってもう少ししゃべれる単語増やしてみようと思います。 構成 1.【Kodama】Speech API で音声をテキストに変換 2.【新規作成】Node.js 経由で KAKASI を使って漢字カタカナをひらがなに変換 3.【Kodama】nsx39.js 使ってポケミクを制御 てな感じです。 元の Kodama からフォークしたプロジェクトは下記から。 https://github.com/nenjiru/n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitでMerge CommitをRevertする方法 - Qiita
https://qiita.com/ktoshiaki/items/91f81b13b015e6610ff3
iPhone5/iOS8.0 SafariでCSSの不具合 - Qiita
https://qiita.com/watilde/items/094a44072d84e88cb8dc