【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita
実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。 今回は現場でよく使われているBEMの書き方について調べたことのまとめです。 BEMとは BEMはBlock Element Modifierの略で、CSSを設計･命名していく手法です。 Block： 大枠となる独立した要素 Element： Block中の要素 Modifier： BlockやElementのスタイル 保守性の高さから1番多く使われている命名規則だと思います。 BEMを使う目的 BEMは名前の衝突を避けるために考案されたCSS設計です。 保守性の高さを解決するための手法は他にもあり、HTMLはシンプルがな書き方が求められますが、まだまだ決定打に欠けています。 BEMは見た目が汚いですが、シンプルを求めて面倒な目にあうよりは、少々汚くても扱いやすいBEMが多くの現場で採用されてい
動画配信を録画するAppleScript(JXA) - Qiita
QuickTimeの画面収録機能でYoutubeなどの動画配信を自動で保存するAppleScriptを書いてみました。 AppleScriptを書くのはは初めてで、しかもJXA（Javascript）なので間違っている所があったらご指摘いただければ嬉しいです。 ※ちなみにこのスクリプトが有効なのはmacOS HighSierraまでです。 Mojaveからは画面収録の仕様が変わり、動きません。 ※全画面表示のショートカットが「F」キーであることが多いので「F」としましたが、 サイトによって適宜変更してください。 やりたかったこと １．Cromeで動画配信サイトを表示 ２．QTの画面収録で録画 ３．自動で保存 ４．自動でchromeとQTを終了 ５．上記を日時を指定して実行 //chromeで配信動画を全画面再生、QuickTimeで画面収録する var myLink = "https://
AppleScriptプログラムを定時に自動実行する方法[Macのみ] - Qiita
最近Qiitaの記事投稿のやる気が出てきたので投稿。 筆者は現在、AppleScriptとJavaScriptを使って、国内上場企業の株式情報を自動取得する自作プログラムを運用しており、現在は手作業で実行しているのだが、実行まで自動化したいと思い方法を再確認。 手順1 ：AutomatorでAppleScriptファイルを実行出来る状態にする Automatorアプリを開き、"アプリケーション"で新規書類を作成します。 新規書類を作成しますと、以下のような画面になりますので、こちらの"AppleScriptを実行"を選択。 すると下記画面が出てきます。 こちらのボックスの中にある記述を全て削除し、下記のように修正します。 モザイクがかかっている部分は、自分が作成したAppleScriptファイルの絶対パスを入力してください。 ここまで完了しましたら、書類を保存します。 手順2： カレンダー
![AppleScriptプログラムを定時に自動実行する方法[Macのみ] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eeb5ef34826e5cd0b9a8f44106e80735ecc383a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QXBwbGVTY3JpcHQlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjAlRTMlODMlQTklRTMlODMlQTAlRTMlODIlOTIlRTUlQUUlOUElRTYlOTklODIlRTMlODElQUIlRTglODclQUElRTUlOEIlOTUlRTUlQUUlOUYlRTglQTElOEMlRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUlNUJNYWMlRTMlODElQUUlRTMlODElQkYlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTEwY2UwNzY2ZWUzZmY1OWRiNDY2NjY3NTBjMmJmYjQw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaXJybyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDkzOGY1MDFlYzM3MzhhOWJhNjFjMDJlNzRkMDc5ZTM%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D21791e897b49acdbe97aab3ad4937102)
Obsidianが大学生活を変える! 学生必見の活用術 - Qiita
ナレッジベース共有ではなく､自分のためだけのクローズドなローカル環境で動作する点において差別化がされている｡何かを発信するのではなく自分自身のためにテキストをまとめるのです｡ このテキストも外出先で書いています｡ 金欠学生はもちろん格安を売りにしたプロバイダーと契約しているので3GB程度しか余裕がないはずです(私は月の半ばでなくなりました)｡しかしローカルで動作するので速度制限を恐れることなく使うことができるのです｡ Obsidianは単なるノートアプリではなくアイデアを書き溜め､思考をまとめ上げ､一つの思想を創り上げる､最強のセカンド･ブレインである｡ —私 メリット 日常的に使えばマークダウン記法に慣れて､サークルや研究室のesaの記事を書く心理的ハードルが下がる QiitaやZennなどの記事を公開するハードルも下がる 有名な使い方としてはドイツの社会学者が考案したツェッテルカステン
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
機械学習が独学できる日本語Youtube難易度別まとめ - Qiita
こんにちは。 在宅の機会が増えて以来Youtubeを見る機会が増え、機械学習などが勉強できるチャンネルをいくつか探しては見ていました。探した中でよかったと思ったものをメモしていたのですが、せっかくなので公開したいと思います。日本語のソースがあるもののみ対象にしており、『これ無料でいいのか？』と思ったチャンネルを紹介したいと思います。主観で以下のレベルに分けましたがあくまで参考程度にお願いいたします。 基本：Pythonを触ってみた人 Pythonの説明・動かし方などを解説していて、動画によっては踏み込んだ内容になる 応用：アルゴリズムを使いこなしたい人 「model.fit(X, y)して動かしてみた」よりも踏みこみ、Python自体の説明は少ない 発展：研究開発もしたい人 最新の手法の仕組みの理解などが主眼であり、Pythonの解説はほぼ無い もしおすすめのチャンネルございましたらぜひコ
COCOAの開発経緯について調べた - Qiita
(2021/6/17 思った以上に伸びたため、主語がデカイままだと問題かと思いましたので、タイトルを修正しました。失敗、と当初書いたのは調査のモチベーションのためでしたが、現在進行形で運用されているシステムに対して失敗、と書くのは大変失礼な記述でした。関係者の方々、誠に申し訳ありませんでした。この記事のモチベーションは、COCOAの初回リリースまでを主なターゲットにしており、2020年夏以降のことについては、あまり追えてもいなければ、正直、理解もできておりません。) このメモの目的 COCOAアプリの成り立ちを深く知ることで、COCOAアプリの開発経緯を探りたい。 立ち入らないこと セキュリティ周りの話 Exposure Notification APIの挙動 調査のモチベーション 精神的に苦しい思いをした人が居る 何があったか 現場（厚労省結核感染症課）目線 現場目線は「仕方ない」の連鎖
Google Apps Script でよく使うスニペット集 30 選 - Qiita
この記事は DevFest 2020 の Google Apps Script 入門 2020 で紹介しました。 はじめに Google Apps Script では非常に簡単に Google Apps （スプレッドシート、 Google カレンダー、 Gmail、 Google Drive など） 間の連携ができます。例えば Google カレンダーのイベント一覧をスプレッドシートにエクスポートする際には以下のような処理の流れになります。 Google カレンダーからイベント一覧を取得 スプレッドシートに入力する形式にデータ変換 Google スプレッドシートに値を挿入 1, 3 のような Google Apps から取得、挿入する部分はよく使い回す部分となるので、スニペットとして使い回すと便利です。今回は私がよく使うスニペット集を紹介しようと思います。 スプレッドシート スプレッドシー
[サーバレス] Googleスプレッドシートでスクレイピング - Qiita
スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。 やりたいこと 献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。 たとえば 宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。 これ以外の県も、各県の献血センターに掲載されている こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。 ない
![[サーバレス] Googleスプレッドシートでスクレイピング - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/887726243bc177ea271bd5e4156739bf5152ac79/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JTVEJTIwR29vZ2xlJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJTk0JUUzJTgzJUIzJUUzJTgyJUIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jMDMxYmRhZGMzYzgxODQ4YzQ4OWVjOTIzYTk5NjgzNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb2d5YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y1YTI5ZDlmNGVjNjYwMWRkYjAyNjZiM2UyMTMyMDg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D6702fb6f54a8fa3741edd3899a82a324)
「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita
続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ
NURO光はセキュリティ的にやばいって話 (安全に使うための方法) - Qiita
要約 NUROひかりのHGWはデフォルトでIPv6ファイアウオール機能が 無効 または 未搭載 の可能性がある ので、そのまま使うと家庭内LANがインターネットから見えちゃうからちゃんと設定か対策して使おうぜって話。 このドキュメントの対象とする人たち 何も考えずに速度が速いだけでNURO光を使っている、「いんたぁねっとが何かよく分かっていない」人向けです。 ネットワークやセキュリティを理解していて、自分のルータでセキュリティを維持しつつ使える！って人には全く関係ない話なので気にしなくていいです。読まなくていいです。 IPv6 と IPv4 のセキュリティ ここでは IPv6 と IPv4 のアドレスが割り当てられたPCやスマホとかがインターネットからどう見えるのか？について説明します IPv4 の場合 一般的にIPv4アドレスは1契約につき1アドレスが付与され、それをルータ呼ばれる機器を
Google社のテクニカルライティングの基礎教育資料がとても良かったので紹介したい - Qiita
はじめに エンジニアにとって、仕様書などの技術的な文章を書くこと（テクニカルライティングとも言います）は避けて通れません。ただ20年来多くのエンジニアの方々と同僚として接してきて思うことは、エンジニアの方の中には「文章を書く」ということに苦手意識がある方が一定数いるということです。 でもこの「テクニカルライティング」のスキルは、才能というよりは一種の「技能」だと思うんです。ある一定の原理原則を理解して実践を繰り返すことで、必ず一定レベルで習得できるものだと著者は信じています。 もしこのテクニカルライティングの原理原則をまだ体系的に学習したことがない、または過去学習したが改めて再学習したいという方に、お勧めのコンテンツを見つけたのでご紹介します。 https://developers.google.com/tech-writing Every engineer is also a write
VSCodeのマルチカーソル練習帳 - Qiita
VSCodeを使いこなしている人がカーソルを複数置いて手早く作業してて、カッコいいなと思ったことありませんか？こんな感じで。 私はマルチカーソル使います(キャー素敵！)。冗談はさておき、VSCode使ってる人全員がマルチカーソル使ってるわけではなさそうだと最近知ったので、基本をまとめてみました。 なお記事では、以下のテキストをサンプルとして使用しています。お手元にVSCodeを用意できる方は、サンプルを使って同じ操作を試しながら覚えてみてください！ { "id" : "12345678-1234-1234-1234-123456789012", "title" : "myTitle", "content" : "myContent", "createdAt" : "2019-09-01 00:00:00", "createdUser" : "12345678-1234-1234-1234-
Mac を買ったら必ずやっておきたい初期設定 - Qiita
Mac 初期設定 対象読者 知り合いのエンジニアさん向け Mac初めて買った人 Web系エンジニア向け 環境 macOS Catalina 10.15.3 MacBook Pro (13-inch) 前置き 導入ツールについては良く使うものに厳選してます。 CLI ツールや GUI ツールは必要になってから入れた方がいいかも。 zshの設定、tmuxの設定、vimの設定は別記事にする予定です。 古いですがzsh設定の記事です。 https://qiita.com/ucan-lab/items/1794940a64882021dcb1 設定ファイルのインストール自動化は別記事にします。 私とまったく同じ設定にしたい人はいないと思うので今回は個別インストール記事にしてます。 (一通り書き殴っただけなので、追記するかも) 最初にやること ソフトウェア・アップデート (appleマーク) > こ
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
HTML+CSSコーディングの言語化 - Qiita
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
【Python】嵐の歌詞をWordCloudで可視化して、結成20年でファンに伝えたかったことを紐解いてみた - Qiita
【Python】嵐の歌詞をWordCloudで可視化して、結成20年でファンに伝えたかったことを紐解いてみたPythonスクレイピング自然言語処理Python3wordcloud きっかけ 嵐の活動休止まで残り一年ですね。スケスケ衣装の登場からなんともう20年。マルチで活躍する国民的アイドルは結成20年でファンに何を伝えたかったのか？直接お会いして伺いたいとこだが、そんな訳には。ですので、「歌詞を可視化」して、ファンに伝えたいメッセージを6人目のメンバーである私が嵐ファンに伝えることにしました。 環境 ・Python 3.7.3 ・windows10 参考資料 ・Uta-Net ・米津玄師の歌詞をWordCloudで可視化してみた。 大まかな流れ 歌詞の収集(スクレイピング) 歌詞を単語にする(形態素解析) 可視化(WordCloud) 1. 歌詞の収集(スクレイピング) import r
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。 26 Miraculous VS Code Tools for JavaScript Developers in 2019 Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。 VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探している
1時間で出来るWordPress環境構築(※永久無料・・・だった)【※2020/7/1より約300円/月が有料になります】 - Qiita
個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった
データの集計は、ExcelよりPython使ったほうが100倍早い（pandas-profiling, pixiedust） - Qiita
データの集計は、ExcelよりPython使ったほうが100倍早い（pandas-profiling, pixiedust）Pythonpandasデータ分析データ可視化pandas-profiling Pythonのpandas-profilingと、pixiedustの2つのライブラリを使うと、データの集計・グラフの作成が、感動的なほど早く終わることを実感したので共有します。 Excelでデータ集計・グラフ作成した場合と比較すると、体感で100倍くらい早く終わります（誇張ではなく） Pythonで爆速でデータ集計する方法（体感所要時間：5分） 前提： 以下の環境が整備されていることは、前提とします。 Pythonのインストール（約30分） データ分析に必要な各種ライブラリのインストール（約30分） →numpy, matplotlib, pandas, jupyter など →Anac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
