GitHubをむっちゃ多機能にするためのChrome拡張を紹介するぜ - Qiita
概要 GitHub上で動作するChrome拡張についてざっくばらんに紹介 検証をChromeで行っただけで、他ブラウザでも使えるものも含む ご注意 紹介してるもの同士の互換性は考慮していません。組み合わせによって動作しなくなる拡張もあります 拡張機能は本家GitHubの変更を強く受けるため、突如使えなくなるリスクがあることをご認識ください プライベートリポジトリでは使用できない、あるいはAPIトークンを渡したり認可する必要があるものを含みます 本記事で紹介している拡張はいずれも2020/05/03時点の最新版をChrome81系で動作確認済み Refined GitHub 説明不要なレベルで、これを入れておけばまず外れないので迷ったらコレ 詳細は別途紹介記事を書いてます GitHubを圧倒的に便利にするRefined GitHub のTips集 Octotree サイドバーにディレクトリツ
Linuxのかな漢字変換の興亡 - Qiita
タイトルは「Linuxの「かな漢字変換」」です。ひらがなの文字列を普通の漢字かな混じり文にするソフトウェアの話です。 はじめに この記事ではLinuxの日本語入力を歴史の中で特にかな漢字変換の部分の歴史についての概要です。その時代に広く使われていたと筆者が独断で思う物のみに触れます(触れてない物の中には筆者の友人知人の作品も含まれていて心苦しい点もありますが…)。 Linux以前 - 国産ワークステーションの時代 80年代後半から90年代前半にかけて国内の複数の会社がワークステーションを製造販売していました。各社ではそれぞれのアーキテクチャにUnix系OSを移植し、何社かはそこに搭載する日本語入力のシステムを自社で開発し、さらに素晴らしい事にほぼオープンソースな条件でソースコードを公開していました(NECのCanna, オムロンのWnn, SONYのSj3)。 その中ではCannaやWnn
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
スナック「jQuery」 - Qiita
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
Let's Encryptを使用しているウェブページをブロックするプロキシサーバー - Qiita
Let's Encryptはドメイン認証証明書を無料で発行してくれるたいへん素晴らしいサービスです。ウェブサイトをHTTPSで提供するためには証明書が必要ですが、Let's Encryptの登場以前は認証局から有料で証明書を発行してもらうのが主流でした。それを無料で発行してもらえるのは大変ありがたいことです。また、発行プロセスは自動化されておりとても簡単です。筆者も個人のウェブサイトは全てLet's Encryptで証明書を取得しています。 ところが、Let's Encryptが発行する無料の証明書なんて信頼できないという教義を信奉するタイプの人々も存在するようです。筆者は最近Twitterで見かけました。ということで、そのような思想を持つ方も安心してインターネットを利用できるように、Let's Encryptによって発行された証明書を使用しているウェブサイトのみブロックするプロキシサーバ
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
2020年はsystemd-homedの登場でLinuxのユーザー管理が大きく変わるぞ - Qiita
これまでのLinuxでは、ユーザーの追加はuseraddで行われ、ホームディレクトリは/home以下にディレクトリとして作られ、ユーザーのアカウントは/etc/passwd、/etc/group、/etc/shadowで管理されていました。 これからは、systemd-homedがその全ての仕事を置換することになります。 ※タイトル詐欺感がありますが、従来の方式も並行して使えます。安心してください。 systemd-homedとは？ systemd バージョン245で追加された、ユーザー管理デーモン。実体はsystemdのサービスユニットファイルで、systemd-homed.serviceとして起動されます。 今後、ユーザーの管理や認証はsystemd-homed（以下、 homed ）によって行われることになるようですね。 出典が無く間違いだったため、訂正しました。systemd-ho
ReactはウェブやHTMLとは特に関係のないライブラリです - Qiita
みなさんReactやってますか。やってますよね。最近React Native流行ってるし。 んでいきなりなんですが、あのReactとかいうやつ、実は 特にウェブとは関係ないライブラリ なんですよね。ええぇ……。なのでこの記事ではそれについてだらだらと説明したいと思います。 この記事の背景 最近のReact Nativeブームで「React is 何」「React Nativeについて3行で教えてくれ」みたいなアレコレがよく発生するんですが、その際に「Reactはウェブ向けライブラリである」という先入観がだいぶ素直な理解を阻害しているなーと感じました。 「Reactはウェブ向け」って登場初期は全然間違ってなかったんですけど、厳密には2015年には全く違う状況になって、2019年とか2020年になると完全に間違ってると言える状況が発生し出したので、改めて説明させていただこうと思いました。 別に
FlutterとFirebaseで開発した 英語の瞬間翻訳トレーニングアプリ Lala の技術 - Qiita
どうも、shoheiです。 株式会社Neverの代表です。 今回はFlutterとFirebaseで開発した英語の瞬間翻訳トレーニングアプリ Lala の技術を紹介します。 アプリはこちらからダウンロードできます（無料でご利用できます）。 ・iOS https://apps.apple.com/jp/app/id1493691416 ・Android https://play.google.com/store/apps/details?id=com.gmail.hukusuke1007.lala 目次 概要 開発期間 設計 主な機能 UI/UXデザイン ユーザーレビュー マーケティング その他 終わりに 概要 まずはLalaの概要を紹介します。アプリストアの情報をそのまま掲載します。 Lalaは英語の会話力向上を目的とした瞬間翻訳トレーニングアプリです。 次々と出題される文章を瞬間的に翻訳
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
Excel設計書を抹殺したくて4年前にWiki設計書を導入したら、意外とちゃんと開発回ってた話。 - Qiita
初めましてこんにちは。 最近コードレビューの記事書いたら、Excelベースだったことを理由に Qiitaコメントとはてブで徹底的に燃やされたおじさんです。 いやね、僕だって使いたくて使ってるわけではなくてね、 できることなら使いたくないんですよ。 というわけで名誉挽回のために脱Excelできた話、 それも日本の三大悪三大風習に数えられるExcel設計書を抹殺した話を書きます。 (2/25修正：悪は言いすぎました。訂正します。） Growi 最高。 またの名をExcel方眼紙。 エクセルのセルの縦横を同じくらいの大きさに調整し方眼紙のようにして、 そこに設計書として文字と図と表を記載する方式。 メリット 一つのファイルに文字と図と表がまとめて記載できる テキストでは文字は書けても図と表が書けない Wordでは、文字と図表エリアとを2列表示するのが難しい できなくはないが面倒くさい UMLモデ
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
JavaScriptのキーボードイベント、キー判定にどれつかう？ - Qiita
概要 ブラウザｘJavaScriptで扱うキーボードイベント、キー判定にどのプロパティを使うかのまとめ です ざっくりいうと event.key または event.code のどちらかを使うべし 「●●が押されたら」のような判定をしたいときは event.key または event.code のどちらかで判定する。 キー判定には、いろんなプロパティがあって、どれ使ったらいいの？と悩むことがある 以前ふつうにつかっていた event.keyCode等はdeprecatedになっている
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
【PWA】YouTubeをみんなでワイワイ見るためのサービス、DJ7をローンチしました！ - Qiita
みなさんこんにちは！ 今回はYouTubeの動画を複数人で同時視聴できるサービスを作りましたので紹介したいと思います。 ブラウザを開くだけで、友達や恋人と同じ動画を見ることができます！ 複数人で同じ動画を見て、あーでもないこーでもないと意見を交わすのはめちゃめちゃ楽しいです。 これはぜひ皆さんにも体験してもらいたいです！ YouTube同時再生サービス DJ7 https://dj7.io 初回のアクセスは音がならないように設定してありますのでご安心ください。 できること 同期再生 サービスの要です。複数のデバイス間で再生の状態が同期され、離れている場所でも同じタイミングで同じ動画を視聴できます。 右下をクリックすると動画を画面に大きく表示します。これによって複数人で同じ動画を見ることができます😋 シークバー共有 DJ7ではシークバーの状態もユーザ間で共有されます。これはYouTube
HTML+CSSコーディングの言語化 - Qiita
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4歳娘「パパ、懐かしいJavaScript書いてるね！」 - Qiita
