WEB制作

1/4ページ

「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に最小個数のアイコン画像のサイズについて考えました。 […]

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-5ba5029a3ffb9899460399/] setting.py setting.pyにimport_exportを追加します。 [crayon-5ba50 […]

Font Awesome v5の使い方

  • 2018.08.31

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

ampについて Part.2

どうも中野です。 前回ampについて書きましたが、なぜ今ampを聞かないのか? メリットがある分、デメリットもあると書きましたが、どんなデメリットがあるのか?詳しく見ていきましょう。 1.サイトのデザインが崩れる可能性がある 禁止されているタグやJavaScript(AMP JS以外)があるため、サイトのデザインが大きく変わる可能性があります。 2.AMP対応に手間がかかる サイトの構成によって様 […]

ampについて

どうも中野です。 先日お客様と電話でデザインの話をしている際に「ブログページはアンプにしますか?」と聞かれまして、アンプが何かわからず、とても困ったので、もしわからないという方は読んで下さい。 ampとは ひとことで言うならば「モバイルページを高速に表示させるための手法」のことです。AMPを実装すると、モバイル ページの表示速度が約4倍、データ量が約1/10になると言われていて、ユーザーはストレス […]

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

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

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

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

jsでpull to refreshを実装する

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

1 4