サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
qiita.com/tonkotsuboy_com
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
gapプロパティ（旧名grid-gap）を用いると、CSS Gridにおける列と行の間隔を設定できます。 ▼ MDNの「grid-gap」のデモより。 便利なプロパティですが、IE 11には対応しておらず、CSS Gridにおける苦労点の一つでした。 しかし、6/2にリリースされたAutoprefixer v8.6を用いると、IE 11向けにもgapを用いたレイアウトを実現できます。 どのように変換されるか？ gapを使ったCSSコードがどのように変換されるかを確認してみましょう。次のようなコードを例に紹介します。 grid-templateプロパティの書き方は見慣れないかもしれませんが、グリッドのエリア名、列幅、行幅をまとめて指定する手法です。grid-template-areasで定義したエリア名に加えて、行幅がそれぞれ50px、1fr、50px、列幅が200px、1frであることを示
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
2017年11月28日、Adobeが新フォント「貂明朝（てんみんちょう）」を発表し、その可愛らしいフォントが話題になっています。 ※ 「貂」とはイタチ科の動物のこと また、可愛らしいイラスト文字も楽しめます。 貂明朝はAdobeが提供しているサービス「Typekit」に含まれているため、Creative Cloudユーザーであればウェブページ上のフォントとして表示することが可能です。本エントリーでは、貂明朝とそのイラスト文字をウェブページで表示する方法について紹介します。 貂明朝をウェブフォントとして使う Web サイトへのフォントの追加の手順に従って、貂明朝をウェブフォントとして追加します。これを行わないと貂明朝は使えないのでご注意ください。 設定後、HTMLの<head>タグに次のように記述します。 <script src="https://use.typekit.net/fya1sw
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav
今年10月に発売が予定されているiPhone Xは、その独特なディスプレイの為にセーフエリアを意識したウェブデザインが必須です。iPhone Xで意図せぬ表示にならないように実機の購入が必要だと考えるかもしれませんが、実はmacOSユーザーであれば、iPhone Xを購入せず無料でウェブページの表示確認を行えます。このエントリーでは、iPhone Xでの表示確認方法について紹介します。 ▲ iPhone Xでの表示確認をしている様子 iPhone Xで起こりうる意図せぬ表示 たとえば、画面最下部にコピーライトを固定表示しているサイトをよく見かけますが、iPhone XのSafariではメニューバーを表示する為のボタンで隠れる可能性があります。また、横持ちでコンテンツの左右が途切れてしまう可能性もあります。 ▲ 「iOS Human Interface Guidelines」より これらの表
npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ
SNSやブログ、プレゼン資料に画面キャプチャを載せるケースはよくあります。 macOSの標準機能を使えば、全画面のキャプチャ、部分キャプチャ、クリップボードへのコピーなどが可能です（参考記事：「macOSでの便利な画面キャプチャテクニック」。 しかし、「キャプチャに図形や文字を書き込みたい」「ある一部分だけは見せたくない」といった加工をする場合、プレビュー.appの画像編集機能を使ったり、Photoshop等の画像編集ツールを使用し加工する必要がありました。 「Skitch」を使えば、これらの問題が解決され、キャプチャから画像加工までが手軽になります。 インストール方法 公式ページ「Skitchよりアプリをダウンロードし、[アプリケーション]フォルダに移動後、起動します。一度起動すると、それ以後はバックグラウンドで動作するようになるため、アプリは閉じて構いません。 なお、Skitchはma
複数人でコードを書いている場合、スペースにするか・タブにするか、スペースなら何個にするか（インデント論争）、改行コードはどうするのかなど、各々のエディター設定によって出力されるコードスタイルに違いが出ます。コードスタイルの違いは変更履歴をわかりづらくし、バグの原因の一つとなります。 この問題を解決するためエディターやIDE(統合開発環境)の違いによらず、コードスタイルを統一するためのツールとして「EditorConfig」が有名です。本エントリーでは、EditorConfigの基本的な設定方法を紹介します。 EditorConfigの設定 EditorConfigにおける設定は、.editorconfigというファイルに記述します。次のように、コードスタイルを記述します。 一つ一つの意味を見ていきましょう。 root = trueを記述すると、EditorConfigの影響範囲が.edit
2020/01/28 追記 macOS Catalinaでの設定に対応しました。 macOSのターミナルでは、$マークの前にコンピューター名やユーザー名が表示されます。 狭いディスプレイで少しでも広い領域でコマンドラインを使いたい 人前でコマンドラインの操作をするとき、コンピューター名やユーザー名を見られたくない コンピューター名を日本語にしていたら、変なローマ字が表示されるのが嫌だ といった場合、この部分はカスタマイズして短くできます。 ▲ 現在ディレクトリと$のみ ▲ 絵文字の表示 設定方法（macOS Catalina以降） /Users/(ユーザー名)/に、.zshrcがあるかどうかをチェックします。もし.zshrcが存在しない場合は、新規テキストファイルとして作成します。/Users/(ユーザー名)に移動し、コマンドラインより下記を実行します。
サーバーサイドで動作するJavaScriptNode.jsはSassのコンパイル、webpackの使用等、今やフロントエンド開発に欠かせないものです。**Node.jsを使う場合、バージョンを自動で切り替えられる nodenvというツールがお薦めです。**本エントリーではnodenvのメリットと、基本的な使い方について解説します。 Node.jsのバージョン管理 プロジェクトによっては古いNode.jsのバージョンで動作が安定し、違うNode.jsにしてしまうと動作しなくなる、といったケースは現場でよくあります。しかし、プロジェクトを切り替える度、現在のNode.jsをアンイストールして目的のバージョンのNode.jsをインストールする、というのは時間がかかります。 このようなNode.jsのバージョン問題を解決するため、Node.jsのバージョン管理をするツールとしてmacOSの「Nod
(2017/06/02) package-lock.jsonについて追記しました。 昨今のweb開発では、プロジェクト直下に多くのファイルが配置されます。 本エントリーでは、1つ1つのファイルがどんな意味を持つのか、どんな技術で使われているのかをまとめました。ピックアップしたのはGoogleのWeb Starter Kitの一部と、筆者がよく使う技術です。 次のファイルについて紹介します(随時更新中)。 package.json .gitignore webpack.config.js gulpfile.js .eslintrc tsconfig.json tslint.json yarn.lock package.json npmの設定ファイルです。 npmとは、Node.jsのパッケージを管理するためのツール。Node.jsのパッケージとは、Sassを使うためのnode-sassパッケ
Adobe Photoshop CC、 Adobe Illustrator CC(共にCC 2017)で新規ドキュメントを作成すると、最近使用したファイルやテンプレート・プリセットが表示されるため、表示はあまり早くありません。 渋谷Stocker.jp / Spaceで開催された「スマートフォン時代のWebデザインスクール」の体験レッスンに参加した際、この新規ドキュメント作成を高速化する設定を教えていただき、ストレスフリーなドキュメント作成ができるようになりました。主催者様より許可をいただきましたので、シェアします。 従来のドキュメント作成インターフェースで起動を高速に CC 2017の新しいドキュメント作成機能では、豊富なテンプレートやプリセットを選択してドキュメントを選択できるようになりました。しかし、案件によってはテンプレートやプリセットが不要な場合も多いことでしょう。この新機能を使
プログラミングには、アプリケーションでインスタンスを一つだけ生成することを保証する「シングルトン（Singleton）パターン」という手法（デザインパターン）があります。例えばゲームのアプリを作るとき、ゲームのデータを管理するクラスのインスタンスは1度生成して使い回したい場合もあるでしょう。 TypeScript 1系では記事「TypeScriptでシングルトン(Singleton)パターンを使おう」で示すような冗長な書き方が必要でしたが、TypeScriptの2系では短かく書けるようになりました。 TypeScript 2+でシングルトンパターンを使う方法 TypeScript 2+ではコンストラクターにアクセス修飾子private(クラス内でのみアクセス可能)を設定できます。Hogeクラスをシングルトンパターンで実装します。 /** * シングルトンパターンで実装されたHogeクラス
JavaScriptやC等の言語の経験があれば、変数の値を1増やすインクリメント(++)、1減らすデクリメント(--)を使ったことがあるでしょう。しかし、macOSやiOS用アプリ開発言語Swiftのバージョン3からはこの2つの演算子は削除されました。 本エントリーでは、Swift 3からインクリメントとデクリメントが削除された理由を人気のスクリプトJavaScriptと比較しつつ紹介します。 インクリメントとデクリメントは紛らわしい ++と--は、似たような紛らわしい使い方があります。JavaScriptを例にして考えてみましょう。 次の処理においてconsole.log(a)部分では何が出力されるでしょうか？
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> doctype、html、meta:charset、meta:viewportの他、IEのレンダリングモードを最新にする<meta http-equiv="X-UA-Compatible" conten
本日(2016/12/08)のアップデートにより、GitHubでコードレビューの為の機能が実装されました。本エントリーでは、レビュー機能の機能と使い方について紹介します。 レビューを依頼する側 ① プルリクエストを作成します。 ② 画面右側「Reviewers」という箇所をクリックします。 ③ コードレビューして欲しい人を選択します。 以上でレビューの依頼ができました。 レビュー依頼を受けた側 ① メールやGitHub上から、レビュー依頼を受けた旨の通知が来ますので、「Add your review」をクリックします。 ② レビューします。 ③ レビューが反映されます。 レビューの種類について 下記のレビュー画面では、3つの種類のレビューができます。 レビューの種類は次の3つより選択できます。 Comment コメントを残します。 Approve プルリクエストの承認をしつつ、コメントを残
次のページ
このページを最初にブックマークしてみませんか？
『@tonkotsuboy_comのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
