iOS 11.3 SafariとmacOS Safari 11.1の空<input type="file">をAjaxで送信できない問題への対応 - Qiita
iOS 11.3 SafariとmacOS Safari 11.1の空<input type="file">をAjaxで送信できない問題への対応RailsiOSSafarimacOS 「特定のiOS端末だけ投稿時に400 Bad Requestが返ってくる」・・・突然のバグ報告をもらい、同僚の @elim さんと一緒に四苦八苦しながら調査した結果、最新のSafariのバグであることを突き止めた話です。 SafariのXHRバグの概要 iOS 11.3とmacOS向けのSafari 11.1が2018/03/29にリリースされました。 https://jp.techcrunch.com/2018/03/30/2018-03-29-apple-releases-ios-11-3-with-new-animojis/ これらのバージョンでは、ファイルが選択されていない<input type="f
相性抜群なVueとSVGでオンラインマインドマップ - Qiita
SVGの熱 最近Vueが熱いですよね！Reactに迫る勢いで激熱ですね！！そしてみなさんご存知のようにSVGも激熱々真っ盛りですね！！！ ご存じない？ という雰囲気にいてもたってもいられないSVG芸人の端くれとして、相性抜群(と勝手に結論付けている)Vueと組み合わせてさくっとマインドマップを作れるwebサービスを緩やかな速度で立ち上げてみました。 https://mind-xx-acpr.firebaseapp.com/ なにこれ？ かの有名なマインドマップツールXMindがクラウド路線から撤退するというニュースを見てやけになって自分用に作ったweb100%なマインドマップツールです。当初はMindXにしようと思いましたが、流石に怒られる気がしたので色々付け足しました。 メインとなるマインドマップ部分はSVG、編集用ボタンなど周辺のものはHTMLと両者を組み合わせて作っています。 完全に
東大を出てゼロからプログラミングを学び、1年後にWebサービスを作ってみた話 - Qiita
自己紹介 こんにちは。 tetsuo akaneyaといいます。 僕は去年、東京大学を卒業しました。 生物の勉強・研究をしていたのですが、自分の中で「違和感」が大きくなって、生物に対する熱意が冷めてしまいました。 どういう違和感かというと、生物の研究はどうしても研究が製品になるまでに時間がかかります。10年以上かかることもよくあり、これは本当に誰かの役に立つのか？ほとんどの人にとっては役に立たないんじゃないのか？という自問です。 スキルなんて全くないものの、卒業後はITで自分のサービスを持ちたいと思うようになりました。 そこで、みんなが社会人として巣立っていく中、僕は卒業翌月の4月から東京を離れて田舎の家に引きこもり、すがるような気持ちでLaunch School（ローンチスクール）（https://launchschool.com/ ）というオンラインのプログラミングスクールに通いました
システムで「性別」の情報を扱う前に知っておくべきこと - Qiita
0は性別に関する情報が得られない場合に使います。性別に関する情報はあるのだけど1とも2とも言えない場合は9を使います。要は「0でもなくて1でも2でもなければ9」です。 これを知っていればMだとかFだとかを議論をせずに済みますね。 国際規格に従うべき理由 国際規格に従うことは色々と利点があります。まず、どうしてそういうコード体系にしたのかを説明しやすいです。また多言語対応する際も規格通りに書けば伝わるはずなので迷わずに済みます。別システムへのデータの移行や、異なるシステム間でのデータの統合もコード体系が同じならラクラクです。もしかしたら別のプロジェクトで書いたコードをそのまま使いまわせるかもしれません。技術者に対するトレーニングも不要です。 対して、わざわざ国際規格に反する実装をする場合は上記のメリットがそのままひっくり返ってデメリットになりはしますが、もちろん、それなりの理由があれば規格と
2018年の最先端フロントエンドエンジニアになろう - Qiita
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて
とある JavaScript 知らないマンの ES5 奮闘記 - Qiita
初めて JavaScript(ES5) を業務で使ったので、備忘録がてらまとめてみました。 Web 屋の皆さんからすればポンコツだと思いますが、非 Web 屋で生きる Javasript 知らないマンの一視点として参考になれば(?)と思います。間違いやオススメなどもありましたらぜひご教授ください 最初に結論 今回の開発で得た知見やら結論やら所感やらを、端的にまとめておきます。 一行で: Q: なぜ ES5？ A1: JavaScript 全然知らないし、規模も 2-3KL だから、まずは ES5 から押さえるべきだと思った 三行で: 規模は 2-3KL だったけど ES5 直書きキツイ、もうやりたくない 臆せず最初からフレームワークやライブラリにもっと頼るべきだった（後になればなるほど移行コストがでかくて詰む） 調べ物してたら技術的好奇心で時間食われるので自制が必要 Q&A形式でもう少し詳
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
MVC、本当にわかってますか？ - Qiita
ウェブアプリケーションフレームワークのMVCは、大きく分けてプッシュ型、プル型があります。 -- こんにちは、タイトルはいつも通り釣りです！ 今、ウェブアプリケーションフレームワークを物色中です。 そのいろいろ見ているうちに、頭のなかにごにょごにょあったことを吐き出すのを目的にしています。 他の視点でまだ続くかもです。 例のごとく間違ってたらまさかりよろしくです！！ -- MVCとは？ 表示が伴うフレームワークの基礎、MVCを、なぜこれが必要になったのか、順を追っておさらいしたいと思います。 最初は一つ V 一般的に、分割すると複雑になります。複雑は悪です。なので最初はすべて一つに詰め込む、と考えてみましょう。 HTMLにJavaScriptを直書きしてる状況を思い浮かべてください。最初は上手く行くかもしれませんが、比較的早い段階で大変なことになります。なぜなら…… プログラマは必ずしもデ
【jQuery】よく見るおまじない的なアレについて - Qiita
<body> <script> // (3) (function($){ console.log($('#sample').text()); })(jQuery); </script> <div id="sample">foo</div> </body> ##これらは動作的に異なるものなのか？ 結論から言えば、(1)と(2)は動作的に同じものであるが、(3)は違う。 (1)ではDOMがロードされ、操作可能になったタイミングでコールバック関数を実行する。そのためconsole.logで'foo'が正しく出力される。 また、(2)は(1)の$(document).ready()と同様に振る舞う関数jQuery(callback)であるため、こちらも'foo'が正常に出力されることになる。 一方で、(3)はjQueryオブジェクトを引数として渡している単なる即時関数である。 この記述は、「$とい
hyperHTMLやlit-htmlが効率的に再描画を行う仕組み - Qiita
昨今のJavaScriptのViewライブラリは以下の特徴を備えています。 DOM構造を宣言的に記述できる 動的な値のマッピングを宣言的に記述できる 再描画の際、DOM構造の変異を最小限に留める 例えば、ReactであればJSXと仮想DOMによるdiff/patch処理によってこれらを実現しています。 一方、hyperHTML（およびlit-html）はECMAScriptの構文であるTagged Template Literalを使ってこれらの機能を実現するライブラリです。 import hyper from 'hyperhtml/esm'; const render = () => { hyper(document.getElementById('container'))` <h1>Hello</h1> <p>It is ${new Date().toLocaleString()}</
vue.jsで上手く出来なかったポイント・便利な使い方など - Qiita
プロジェクトの始め方 vue cliで始める 画像素材などが少なく、載せる情報はDB上に格納する。 とにかく早く始めたい vue.jsの使い方を覚えたい vue-cli https://www.npmjs.com/package/vue-cli gulp・webpackで始める サイトに少し取り入れたい。 画像やCSSをwebpackに含めたくない。 構成を自由に変えたい webpackとvueのサンプル https://github.com/psc-kamei/webpack_vue コンポーネント間で共通なグローバルな変数や関数を定義したい。 変数 // 座標を取得 var windowStatePlugin = { install: function (Vue) { var state = { scrollX: 0, scrollY: 0, width: 0, height: 0 }
Enzyme 3.x で `create-react-app` で作成した React コンポーネントのユニットテスト - Qiita
create-react-appでReactのアプリを作り始めた場合、src/App.test.jpというファイル名で以下のようなテストが自動的に生成されます。 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); ReactDOM.unmountComponentAtNode(div); }); 素晴らしいことに create-react-app コマンドでは package.json もいい感じに作ってくれるので、このテストを実行するにはいきなり
エンジニアなら知っておきたい、絵で見てわかるセキュア通信の基本 - Qiita
TLS 1.3は現在策定中ですが、 前方秘匿性 の問題から RSAのみ を用いた鍵委共有が禁止になる見込みです。(詳細は後述します) HTTPSとは 次に、HTTPSです。 HTTPS - Wikipedia HTTPS（Hypertext Transfer Protocol Secure）は、HTTPによる通信を安全に（セキュアに）行うためのプロトコルおよびURIスキームである。 厳密に言えば、HTTPS自体はプロトコルではなく、SSL/TLSプロトコルによって提供される セキュアな接続の上でHTTP通信を行うこと をHTTPSと呼んでいる。 とのことです。 HTTPの説明を割愛するとすれば、「SSL/TLSでセキュアにHTTPをやる」というだけの説明で済んでしまいます。 最近では個人情報等の観点から全てのサイトをHTTPSにするような動きが見られますが、元々HTTPSが使われやすかった
GitコミットメッセージにMarkdownを使えるようにする - Qiita
要約 Markdownの#がGitコミットメッセージではコメントと解釈される。 Gitの設定を変えてコメントを#以外の文字にする。やり方 Markdownが問題なくコミットログに入るようになる。 GitとMarkdownで#の役割が異なる Gitのコミットメッセージはコメント行 (つまりコミットログに残らない) Markdownで見出し つまり、下のMarkdown風コミットメッセージは見出し行がコメントとして解釈される。 バグ修正 ## 再現手順 あれしてこれしてこうする ## 期待の振る舞い こうなる ## 実際の振る舞い そうならない # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the
「することができる」は有害と考えられる - Qiita
「することができる」とは 技術文書を読んでいると「することができる」「することが可能である」という表現を目にします。実はこの「することができる」という表現は冗長なため有害、つまり多用すべきでないという考えがあります。 気になって「することができる」についてGoogleで検索してみました。結果、「することができる」という表現について書いたブログ記事をいくつか見つけました。以下、発見したブログ記事の一覧です。 読みやすい文章の極意は「修飾語」にあり 読みやすい文章を書くために心がけたい１０のポイント 感性工学的テキスト商品学～書き言葉のマーケティング 列挙したブログ記事の全てで「することができる」を多用しないように警告しています。 「することができる」を自動で検知 私も「することができる」「することが可能である」のような冗長表現をできるだけ利用しないように気をつけています。「することはできる」
図で理解するJavaScriptのプロトタイプチェーン - Qiita
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか？ 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
AMP letter を読み解く - Qiita
日本語訳があるので面倒臭がらずに読んだほうがいいです。 要約 AMPは無意識にユーザーがGoogleエコシステムに留まるようになっており、また検索結果に対してプレミアムな演出や優先順位を与えており、Webの中立性を破壊している、という指摘。 Googleが言うように、Webの速さが懸念ならば、AMPという技術の有無に関わらず特定の速度を満たせば今のAMPと同じような特典を与える、また明示的にGoogleのエコシステム内にいるという演出(おそらくヘッダーを付与するなど)を行う、といった提案。 私見 GoogleのWebの速さに対する懸念も、AMPの実装の邪悪さも、自分は両方よく分かる。 AMPは自分の仕事のドメインとしてチェックしているが、プラグインがGoogleのホワイトリストとして管理されていて、実際には政治力を使って、プラグインを登録させるといったアクションが必要になり、日本のような狭
YouTube Live コメントビューアーを作ってみた - Qiita
経緯 以前、YouTube Live Player「Madoka」を作った時に、コメビュの部分がAPIの都合上、ポーリングでしか取得できず、なかなか厳しいものがあったので、リアルタイムで取得できないかと考えていました。 よくよく考えて見たら、WebViewで乗っけちゃえばよくね？って思ったのでやってみました。 ソースコード及びダウンロード ソースコード： https://github.com/minakawa-daiki/YLCV ダウンロード： https://github.com/minakawa-daiki/YLCV/releases/tag/v0.1.0 ※動作は Mac/Windows で確認しています。 YLCV -YouTube Live Comment Viewer- できたコメビュはこんな感じです。 使い方 設定画面の開き方 アプリケーションにマウスカーソルを乗っけると右
週末在宅ワークの生産性を上げる5つの視点と32の工夫 - Qiita
こんにちは。10分で生産的なミーティングができるWeb会議ツール「minmeeting」を開発している伊勢川です。 minmeetingはすべて在宅ワークで開発を進めてきました。その開発の中で、いろいろ試行錯誤をしながら、在宅でもそれなりの生産性が維持できるようになってきました。 そこで、今回はITエンジニアが週末在宅ワークをする際に、生産性を上げるための工夫を、5つの観点から整理してそれぞれ紹介していきます。 時間の使い方をコントロールする 週末在宅ワークの鍵となるのが、いかに時間を確保するのかということです。ここでは、その時間の確保のための工夫を紹介します。 週に20時間以上を確保する 少し古いITエンジニアの勉強時間の時間の調査1によると、大半が週に3時間未満というデータがありますが、プログラミング能力を競うサイトの調査2では、11%の人が週20時間以上勉強や個人の開発に費やしている
コードレビューで気をつけていること - Qiita
Chromium Code Review Advent Calendar 2017の25日目の記事です。参入障壁が低かったのでなんとなく書いてみました。興味のある方は充実の本家Chromium Browser Advent Calendar 2017も参照下さい はじめに オープンソースのウェブブラウザ Chromiumでそこそこ長く開発をしてるので、自分や周りの人がコードレビューで心がけていることを書いてみました。良いコードとは何かという話はまた別の長い議論になるのでここではとりあげません。 基本的に、コードレビューはコミュニケーションと思っており、うまくやることで開発効率をあげたりコードベースをより良くしたりできる可能性があると思ってるので、そんなことを書こうかと思います。なお、目指しているだけで、必ずしもいつもできているわけではないです 以下、唐突にである調で。 レビューレイテンシを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
