WEB制作

1/10ページ

Github Markdown CSSを使用する方法

  • 2019.08.16

個人的にGithubのREADEME.mdは、非常にシンプルで読み易くて好きです。 このスタイルをgithubからぶっこ抜かれたリポジトリがGithub上に公開されています。 自分で作成するサイトなどの簡単なドキュメントは、githubのスタイルを当ることで簡単に読みやすいドキュメントページができて亨保しています。 github-markdown-css DEMO Github 導入方法 npmを […]

知っておくべきLaravelのベストプラクティス TOP10

1. 最新バージョンを使用する 最新の安定バージョンを使用している場合、安全で高性能なWebソリューションを利用できます。最新のLaravelのバージョンで作業することをお勧めします。 2. Bladeの中にクエリーを含めない Bladeの中でクエリを発行した場合、100件の投稿を取得するのに101回DBにクエリを発行してしまいます。 コントローラーなどでクエリを発行すれば、100件の投稿をたった […]

LaravelへのTailwind CSSのインストール手順

LaravelにLaravel Mixを使ってTailwind CSSをインストールする方法を紹介します。 Tailwind CSSとは Tailwind CSSは、ユーティリティファーストのCSSフレムワークです。Tailwind CSSは、ほぼ全てのCSSプロパティをユーティリティクラスとして用意されてまり、これらを組み込み合わせることでデザインを構築して行きます。 例えば、ボタンを実装するの […]

JSのブラウザ環境毎のエラーを無くすためにやったこと

僕がクロスブラウザ対応のためにJSのブラウザ環境毎に発生するエラーを無くすためにやったことをまとめました。 TL;DR エラーハンドリングを行いエラーを収集した Class構文+Babelでコードの可読性を向上させた Polyfill.ioも利用 エラーの収集 先ず、現状どんなエラーが発生しているのか知らないとエラーを治すことができないので、JSのエラーハンドリングを行い簡単にエラーを収集しました […]

DjangoでHTMLメールを送信する

DjangoでHTMLメールを送信する方法です。 メールの送信設定 まず、setting.pyでメールサーバーの設定を行います。 下記のソースコードを参考に使用するメールサーバーのログイン設定を記述しましょう。 メールの送信 メールの送信は、Viewで行います。 メール本文にはrender_to_string()を使用してテンプレートから本文を作成することができます。 メールのテンプレートは、HP […]

2019年版 – あなたのサイトを診断してくれるツール6選

  • 2019.07.05

サイト表示速度の測定 PageSpeed Insightsは、GoogleのLighthouse を元としたストアリングを行ってくれるツールです。 モバイルフレンドリー診断 モバイルフレンドリーテストは、HPがスマホで操作しやすいデザインになっているかチェックしてくれるツールです。モバイルフレンドリーであることは、SEO効果があるとされています。 構造化データ診断 構造化データ テストツールは、G […]

PHPの組み込み関数をPythonで実装したものを調べられるツール

Python(Django)を使ってWEBアプリケーションを構築しているときに、PHPはWEBに特化しているので、WEBで使う関数などが最初から用意されていて、Pythonだとちょっとしたことでも、長い実装になってしまって大変なことが多いです。 Pythonに慣れていないと、PHPではちょっとしたことでもかなりのリソースを使ってしまいます。 時間を節約する為にもPHPの組み込み関数をPythonで […]

JavaScriptで発生したエラーを収集する方法

プログラムのエラーを修正の為には、エラーメッセージを確認することが一番ですが、当たり前ですが、JSで発生したエラーはユーザーのディベロッパーツールには表示されますが、サーバー側には何も記録されません。 JSは、ブラウザによってエラーが発生することもあり、不具合の再現が困難な場合があります。 そういった問題を解決するためには、JSのエラーハンドリングを行って、サーバー側にログを残して置くと非常に便利 […]

表示速度を上げるHTMLタグ

HTMLのタグで事前読み込みや非同期実行の設定を行うことで、表示速度の改善を行うことができます。 DNS Prefetching CDNなどで他のドメインのリソースを読み込むことが確定している場合、<link rel="dns-prefetch">を設定していると予めにDNSの読み込みを行う事ができます。 rel="preload"によるコンテンツの先読み <link rel="pre […]

1 10