以外としょうもない理由で表示されないんですよね〜 最近PWAが徐々に浸透してきましたね。 PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ？」となります。 ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。 しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。 今回はその原因を少しだけまとめてみようと思います。 manifest.jsonがhtmlソース内に定義されていない ServiceWorkerが登録されていない サイトがTLSに対応していない サイト訪問回数が2回ではない サイトの訪問間隔が5分以上ではない manifest.json内のアイコン画像が404である ブラウザやcurlコマンド等でアイコン画像のURLを

ごきげんよう、読者諸賢。ボクはらーめ人間Ｚ。ラ王真贋の使い手にしてラーメーン視点からでないとブログが書けないまともない人間だ。 ラーメーンを愛し健康を愛し、そして何よりも平和を愛するボクは、ラーメーンと睡運瞑菜350g、そして核廃絶運動のアウフヘーベンの途中のエラーで世界週末時計の時計の針が過去最大にもどるまで、つまりは世界が平和になったと断言できるまで、外でラーメンを食わない超ラーメンハンガーストライキ２と言うナンだかよくわからんラーメン断食を超えたラーメン断食をさらに超えたラーメン断食の人造人間、つまりはホムンクルスとして異世界転生していた。早くラーメーン食べたい（関連記事：参照*1、参照*2）。 外でラーメン食うに食えない誓約と制約をもって異世界転生したボクは丸１年を超えて現在進行形でラーメン断食続ける底抜けの阿呆、つまりはプロのラーメン断食家、二つ名は「戦えラーメンマン」である。

Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。 普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。 そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。 Webアクセシビリティにおけるコントラストとは？ イメージ画像 / Unsplash *コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率の

自分のデジタルプロダクトデザイナーとしてのアメリカでのポートフォリオが必要になったため、海外のUX・プロダクトデザイナーのサイトを50個くらい見て回った。 決定的に日本の個人のポートフォリオと違うなと思ったのは、プロジェクトのケーススタディを紹介をしている人が多いこと。デザイナーの数（＝競合の数）など背景も違うのかもしれないけど、デザイナーの面接もしたことがあるので、採用視点で見ても仕事のプロセスが載っているのは良いなと思う。 何故UX・プロダクトデザイナーに限定しているかと言うと、デザイナーと言ってもさまざまで、例えばグラフィックデザイナーとUXデザイナーではプロセスも勝負する土俵もまったく異なるから。 目次： 1. 採用する人に考えさせない 2. プロジェクトのプロセスを見せる 3. ポートフォリオの構成 4. 自分がやったことを掘り下げる 5. ポートフォリオも作品のひとつ1. 採用

2017.04.04 ZeplinとSlackで、ディレクターの方とのデザインに関するやりとりがスピードアップした 私はデザイナー兼フロントエンジニアです。 ZeplinとSlackを使って、ディレクターの方とのデザインに関するやりとりのスピードがとても上がったので、 どのようにやり取りをしているか紹介したいと思います。 Zeplinとは Sketch3やPhotoshopのアートボードから、レイアウト指示書を作成してデザインを確認できるツールです。 公式サイト https://zeplin.io/ Sketch3やPhotoshopから、プラグインでZeplinにデザインをアップロードして利用できます。 アップロードすると、Zeplinでは次のような画面にSketch3やPhotoshopのデザイン(アートボード)が表示されます。 オブジェクト間の距離やCSSなどが表示されます。テキスト

window.addEventListener("resize", function() { alert("ウインドウがリサイズしました。"); }) Mobile Safari (iPhone 6s、iOS 9.1.2)で最初のスクロールをしてみると、縦持ち・横持ちを切り替えていないのにリサイズした旨のアラートが表示されます。 何故こんなことが起こるのか？ iOS 8からスクロール時にアドレスバーが自動で小さくなる仕様となりました。これにより、アドレスバーが小さくなった分だけウインドウサイズが大きくなったと見なされ、リサイズイベントが発生するようになったのです。ウインドウサイズのことを考えれば当然の挙動なのですが、「スクロールしただけでリサイズイベントが発生する」というのはデスクトップでのブラウザに慣れている人であれば違和感を感じるのではないでしょうか。 意図したとおりにリサイズイベント

Visual Studio Codeは0.5.0のときにインストールして使ってみてしばらく様子見だなあって思ってあまりまじめに使っていなかったのですが、オープンソース化されたので一念発起してv0.10.1までアップグレードしてまじめに使うことにしました。 その際にショートカット一覧の日本語翻訳とかないかな？ってふと疑問に思ったらQiita上にありました。 VS Code キーボードショートカット一覧 （オススメ付き） ただ、Windows版(Linux版)とMac版の違いが割とかなりあるのでMac版まとめました。 ちなみにidには当然ながら違いはありませんでした。 eluestkさんの日本語訳を参考にさせていただいたので感謝です。 ほぼまるパクりです。ありがとうございました。 2つ以上のOSで使う人が両方参考した人が混乱しないようにというのもあります。 めんどくさいとかではないです また、

新しいJavaScriptフレームワーク、ライブラリー、ツールが次々と登場しています。2017年時点で人気の高い22種類を一挙まとめて紹介。選定の参考にどうぞ。 GitHubのクイックリサーチによれば、JavaScriptプロジェクトは2017年5月時点で110万以上存在しています。npmjs.orgには利用可能なパッケージが50万個あり、ダウンロード数は毎月約100億回にのぼります。開発者の数よりもJavaScriptフレームワーク、ライブラリー、ツールの数のほうが多いかもしれません。 本記事では、クライアントサイドで特に人気の高いJavaScriptフレームワーク、ライブラリー、ツールの基礎や主な違いを紹介します。選んで、使ってみて「ベスト」を見つけてください。ただし、いつかは「より良い」フレームワーク、ライブラリー、ツールが登場すると覚えておいてください。 以下の条件に同意の上してか

デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や

はじめに この記事では、npm及びgulpのインストールが完了していない、もしくは昔チャレンジしたけれど、完了しているかわからない人向けの解説を行います。 GIFアニメで動きを解説しておりますので、参考にしていただければと思います。 gulpを使用するにあたり、ローカルとは別に、global環境にもgulpをインストールする必要があります。 （厳密にはなくても動かす方法がありますが、あくまで公式の推奨事項に則って説明します。） 以下の記述にしたがって環境構築を行いましょう。（Mac向けの解説です） 流れ 1.npmのインストール2.gulpのインストール npmのインストール 1.ターミナルを開く 「command」キーと「space」キーを同時に押すとSpotlight検索が画面に現れます。検索フォームに「Ter」のように入力していくと、Terminal.appがサジェストされます。 �

www.youtube.com ちょっと時間が経ってしまったのですが、2月にアムステルダムで行われたVue conf AmsterdamとFrontend Developer Love conferenceに参加してきました。 初めての技術カンファレンス&海外でのイベントということで学ぶことばかりの数日間だったのですが、今回はその中でも特に印象に残ったセッションをご紹介します。この記事を読んで「CodeSandboxおもしろそう！」「使ってみたい！！」という方が1人でも増えると嬉しいです。 CodeSandboxとは CodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。 codesandbox.io GitHubでオープンに開発が行われているのですが、なにより驚いたのがプロジェ

2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸

納豆が大嫌いな kouraku です、おはこんばんちわ。 そんな kouraku が、先日、あの『美味しんぼ』でも取り上げられていた水戸の『天狗納豆』にチャレンジしてみました！結果は・・・後ほど。 さてさて今回は、隣の ishida が Vue.js を使っている姿を見ていて、「なんか便利そうだな・・・」と思い、今更ですが自分もちょっと触ってみることにしました。 ※ここでは、Vue.js に関する基本的な内容には一切触れません。公式サイトを御覧ください。 Vue.js 日本公式サイト とにかく公式の説明が丁寧 Vue.js の公式サイトは、とにかく説明が丁寧でわかりやすい！というのが第一印象です。 更に、環境を色々と用意する必要もないので、その辺りもとっつきやすさを感じました。 とりあえず、公式の最初のサンプルを書いてみると、こんな感じになります。 {{ style }} には、scrip

チャート/グラフ作成のJavaScriptライブラリおすすめ5選 以下の観点でオススメの5つとして絞り込みをしました。 GithubのStar数が多い 有名企業が携わっている たくさんの人に利用されている 無料かつ商用利用可 個人的にオススメのものから紹介していきます。 １：Chart.js 概要 Chart.jsはシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能とするJavaScriptライブラリです。 Chart.jsではHTML5のCanvas要素にチャート/グラフが動的に作成されます。 グラフのデータ描画にはデフォルトで簡単なアニメーションがついているので、見た目がオシャレになります。 基本的な8つの種類のグラフ/チャートを作成することができるので、Chart.jsさえあればほとんどのケースで事足りるはずです。 描けるグラフ/チャートの種類は以下の8つです。 線グ

.button01{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button01:hover{ background-color: #f9c500; /*ボタン色*/ }

立教と聞いてどんなイメージを持ちますか？ハリーポッターみたいな食堂、つたが絡まる赤レンガの建物などがあると思います。でも、立教はそれだけじゃないんです！立教の知られざる魅力を、愛校心あふれる現役立教生の筆者が余すとこなくご紹介します！ 情報は記事掲載時点のものです。施設によって営業時間の変更や休業などの可能性があります。おでかけの際には公式HP等で事前にご確認ください。また、当サイトではアフィリエイトプログラムを利用しており、ご紹介するお出かけスポットや商品に、アフィリエイトリンクを設置している場合があります。RETRIPでは引き続き、行き先探しに役立つおでかけ情報を提供していきます。

最近観た映画の一言レビューです。たまたまですが、マイノリティの話か戦争映画ばかりでした。今回は「一言読後感」を書いてみました。どんな気分になりたいか、で選べるかも？？たまたま名作ばかりだったので、そもそももう観たことあるかも。画像はアフィリエイトリンクです。 ネタバレはありませんが、何だかやたらと長くなってしまった～ わたしはロランス 一言読後感：ハイテンションな映像美。そして覚悟と勇気がむくむく湧いてくる。 「トム・アット・ザ・ファーム」のグザヴィエ・ドラン監督の過去作を探している中で見つけた作品です。（というか、これを含めてまだ4作しかない。）美しく、読後感のとてもいい映画でした。 主人公は、アラフォーになるまで男性のヘテロセクシャルとして生きてきた、性同一性障害で本人の主観的にはレズビアンの「ロランス」。どうやっても複雑な人生にならざるを得なさそうな状況です。しかし、マイノリティの話