水澤 一貴

1/5ページ

「This site can’t load Google Maps correctly. Do you own this website? g.co/staticmaperror/key」と表示される場合

Google MapのMaps Static APIがリンク切れになって、画像のURLを開くとグレーの背景に「This site can’t load Google Maps correctly. Do you own this website? g.co/staticmaperror/key」と表示される場合、それは、APIキーが設定されていないためにエラーになってしまっている合図で […]

PWAに必要な最小個数のアイコンサイズについて

  • 2018.09.13

WEBをPWA対応させるには、様々なアイコンが必要になります。 そして、以下のツール類を用いれば簡単に色んなファイルサイズの画像を生成してくれますが… Favicon Generator. For real. 様々なファビコンを一括生成。favicon generator App Manifest Generator 今回は、逆の切り口でPWAに最小個数のアイコン画像のサイズについて考えました。 […]

出退社管理システムをDon’t Starveのスキンにした話

今月から、出退社の管理システムが僕が開発したSQコードを用いたものに変更になりました。 最小工数でテキトーに作成したので、トップ画面だけは、ヒーロー画像にグラデーション付きのフィルターをかけて、なんかそれっぽい感じにしていたのですが… 他のページ、特にリザルト画面は、白背景の中央に「おはようございます。〇〇さん」と表示されるだけの超絶手抜き画面でした。   この超手抜きツールを毎日使って […]

slider.jsでサムネ付きスライダーを作る

今回は、slider.jsでECサイトなどでよく見かける小さい画像をクリックしたら、大きな画像が表示され、さらに大きい画像をクリックするとポップアップで画像が表示される機能を実装したいと思います。 サムネ生成 sliderには、customPagingというオプションがあり$(slider.$slides[i])で各スライダーのjqueryオブジェクトを取得できるようです。 [crayon-5ba […]

django-import-exportの使い方

DjangoのモデルをCSVしてインポート・エクスポートできるライブラリ「django-import-export」の紹介です。 インストール pipを用いてdjango-import-exportをインストールします。 [crayon-5ba818bf1bba1796034415/] setting.py setting.pyにimport_exportを追加します。 [crayon-5ba81 […]

Font Awesome v5の使い方

  • 2018.08.31

様々なアイコンがcssだけで使えるようになるFont Awesomeがバージョン5にアップデートして少し使い方が変わっていたのでメモ 導入方法 CDNで公開されているcssファイルを読み込むだけです。 [crayon-5ba818bf1bfd9702144320/] 最新版はこちらから 使い方 使いたいアイコンをこちらのページで調べてタグをコピペするだけです。 [crayon-5ba818bf1b […]

JSON-LDで構造化データマークアップ

JSON-LDとは、検索エンジンでパンくずリストや評価などのリッチスニペットを表示させるために必要な構造化データマークアップです。 JSON-LD 基本構文 基本的にjsonと同じですが、"@context": "http://schema.org/"が最初必要な点やオブジェクトの役割を"@type": "",で指定する点が少し変わっていると思えます。 [crayon-5ba818bf1c4392 […]

Djangoのモデルにcreated_at,updated_atを実装する

Djangoのモデルによくある作成日(created_at),更新日(updated_at)を追加する方法です。 基本的にモデルに各項目を設定するだけで実装できます。 各項目の追加、更新も自動で行ってくれるので、脳死でとりあえず追加しておくのもありだと思います。 設定方法 models.pyのモデルに2行追加するだけです。 polls/models.py [crayon-5ba818bf1c92c […]

jsでpull to refreshを実装する

Twitterなどで採用されているスマホを下に引っ張ったときに更新する機能「pull to refresh」をjsを使って実装する方法です。 let _startY; const inbox = document.querySelector(‘#inbox’); [crayon-5ba818bf1cd04684099873/] 実装方法は、いたって簡単です。 まず、タッチ開 […]

Win10でiOS Safariのconsoleを確認する方法

Win10でiOS safariのconsoleを確認する方法です。 先日、ローカル環境で構築したサイトのService Workerが上手く動かった問題もiOSのconsoleのログをこの方法で確認することができたので原因究明することができました。 PCで発生せず、スマホやiOS端末のみで発生するバグなどの解決に際にsafariのconsoleを確認できることはかなり早く問題を解決へ導いてくれる […]

1 5