Gatsby Default Starter

おっす!

CodePipeline最高やんか!!!

Now go build something great.

Test

TestTest

テスト

テストです。後ほどけします。HF森本

Web制作フレームワーク

HF front-end frameworkは制作用のフロントエンドエンジニア/コーダー向けのサイト制作の雛形です。 本家、Lite版、Webアプリケーション版(React/SPA)の3つと、オプションのローカルサーバー […]

改行コードを統一する

SourceTree や git を利用してファイル管理する場合、メンバー間でWindowsとMacが混在すると、改行コードが CR+LF と LF が混在するために、Gitの利点である差分管理が正常に動作しにくくなる場 […]

EC向けテンプレ

EC-Template EC向けフロントエンドBoilerplate ダウンロード 特徴 Sassのコンパイル、およびJSの結合・圧縮。 EC向けViewファイルをコピーして使える。 ビルドしない静的CSS/JSも入って […]

HTML構造について

HTML5 W3CからのHTML5勧告に則って記述することを推奨する。 「HTML5」を使うメリット アクセシビリティの向上 header, footer, nav, section, asideなどのような要素は、コン […]

WP Security Plugin

All In One WP Security & Firewall 「さくらのレンタルサーバ」や「さくらのマネージドサーバ」の「クイックインストール」からインストールを行ったWordPressで標準でインストール […]

セキュリティ対策

おこなっておきたい対策 インストール 可能であればレンタルサーバー側が提供している「簡単インストール」からインストールします。 手動でアップロードした場合、ファイルやフォルダ類のパーミッションが不適切な設定となるリスクを […]

差分を確認する

Gitコマンドを利用して差分を確認 ステージング前にどれくらい変更したかを確認する git diff –stat これだと追加されたファイルが分からないので下記コマンドで確認する git add -n .; git d […]

XSS対策

クロスサイトスクリプティング XSS(クロスサイトスクリプティング)とは、ユーザのアクセス時に表示内容が生成される「動的Webページ」の脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。 動的Webページの表示内容 […]

各種シェアボタンの設置

facebook いいねボタン デフォルト(data属性で実装) 下記公式ツールを使ってシュミレーション、生成できます。 いいね!ボタン構成ツール オリジナル(href属性で実装) 独自に設置する場合はJavascrip […]

その他記述

Web App Manifest Web App Manifest主な目的は、プログレッシブWebアプリ向けの記述です。 2017年現在はAndroidOSのみですが、manifest.jsonを置くことでスプラッシュス […]

OGP

facebook OGP og:type content属性に、オブジェクトタイプを記述します。 og:title ページのタイトルを指定します。 og:url ページのURLを指定します。 URLの指定方法は絶対パスで […]

ローカルサーバー

Vagrant + Virtual Box Vagrantとは仮想マシン(Virtual Box)を動かす仮想化ソフトのラッパーツールです。 この2つを使ってローカルサーバーを立てて制作を進めます。 Vagrant Vi […]

ライブラリ

よく利用するライブラリをまとめています。 Javascript / jQueryプラグイン ライブラリ名 ライセンス 種別 jQuery MIT Javascript Modernizr MIT Javascript f […]

ビルドシステム

Gulp node.jsのStreamingAPIを利用したビルドシステム。タスクランナーとも言われる。 ガイドラインでは主にSassのコンパイルから画像の圧縮等に利用しています。 インストール package.json […]

node.js

node.jsとは Node.js® は、ChromeのV8 JavaScriptエンジンで動作するJavaScript 環境です。 一般的にサーバーサイドJavascriptと呼ばれることもあります。 ただガイドライン […]

Emmet記法

Emmetとは Emmetは、以前Zen-Codingと呼ばれていた、HTMLやCSSを省略記法で簡潔に記述するためのツールです。特定のソフトウェアというわけではなく、Emmetの記法をサポートするための特定エディター向 […]

汎用クラス・Sass Mixin

プロトコル ここでいうプロトコルとはプロジェクトで使用できる汎用クラスの総称です。 主に更新や運用時にクラスの付替えで微調整出来るように用意されたスタイルです。 フレームワークでは_base.scssとして用意されていま […]

エディタの設定を統一する

EditorConfig EditorConfigとはエディタをまたいで、プロジェクト単位に、設定を共有できるツールです。 主要なエディタやIDEで利用することが出来るので、製作者の環境に左右されずプロジェクトでの記述ル […]

端末別対応

PC/SPの対応 原則として推奨環境に沿って対応する。 タブレットの対応 タブレットは指定がない場合は原則PC表示となるようにする。 viewportにjavascriptで判定を入れることでタブレットはviewport […]

Gitフロー

基本ワークフロー リポジトリからローカルにクローンする (git clone) ローカルリポジトリで作業する 変更をステージに上げる (git add –all) コミットする (git commit -m […]

Gitコマンド

よく使うGitコマンド一覧 プル $ git pull origin [ブランチ名] 現在の差分確認 $ git status 全ての変更ファイルをステージに追加 $ git add –all コミット $ git c […]

用語説明

用語 意味 リポジトリ(repository) 履歴管理を行う場所。 リモートリポジトリ(remote repository) サーバーにあるリポジトリ。基本はベアリポジトリで運用される。 ローカルリポジトリ(local […]

CSSについて

CSSリセット スタイルのリセットは原則フレームワークのSassパーシャルを読み込むようにする。 _reset.scss この他にもNormalize.cssやsanitize.cssの使用も可能だが、プロジェクトの規約 […]

ショートネーム

よく使われる短縮名 これらは短縮名の一部です。 仕様時はHTMLについての命名規則に沿って使用してください。 あ | か | さ | た | な | は | ま | や | ら | わ | あ 日本語 短縮名 英単語 ア […]

HTMLについて

構造 HTML5を採用し、原則としてスタイルと構造を分離したWeb標準に沿った記述でコーディングします。 HTML(構造)とCSS(スタイル)とScript(動き)は独立させて、3つの相互関係はなるべく最小限に。 必要で […]

Javascriptについて

var 常に、varと共に変数を宣言します。 インデント インデントは半角スペース2つ 属性値の囲み シングルクォーテーション『’』を使用します。 jQuery 特に指定がなければ最新安定版を利用してください […]

PHPについて

PHPの利用 PHPの利用は基本的にはViewのみの使用に留めてください。 Model、Controlerなどロジック部は変更が必要な場合はシステムチームに確認および依頼としてください。 またシンタックスエラー等で画面が […]

メタ要素について

charset 指定がなければUTF-8を指定する keyword たくさん指定しても意味がないので3~5程度。 現在SEO対策として効果はない。 参考:SEOの基本中の基本!「titleタグ」「meta descrip […]

WordPressテーマ作成

WordPressを使ったサイト構築の場合は、以下のガイドラインに従って実装する。 テストアップ 公開後のテストアップについては、新しくテストアップ用の固定ページを非公開で作成して、テストアップの確認とする。 テストアッ […]

推奨環境

製作時に目標とする推奨環境 特にプロジェクトで指定がない場合は下記仕様を表記する。 プロジェクトによっては推奨環境が指定となる場合があるが、その場合は別途ブラウザ対応などの工数を考慮する必要がある。 PCサイトの推奨環境 […]

Sassについて

Sassとは Sass(サス)とは、「Syntactically Awesome Stylesheets」の略で、直訳すれば「構造的にイケてるスタイルシート」という意味です。 CSSの文法的処理(プロセス)の前段階として […]

画像ファイルについて

ファイル名 ファイル名はハイフン連結で設定してください。 (例) bnr-top001.png main-title.png 最適化 リリース時には画像ファイルについては可能な限り圧縮しファイルサイズを最適化してください […]

Gitについて

gitとは gitとはソースの分散型バージョン管理システムです。 複数の作業者で同時に変更ができて履歴等も共同で管理する機能があります。 今はプロジェクト単位で1リポジトリを作って管理してることが多いです。 リポジトリと […]

テスト環境・テストアップ

テストアップ テストアップは必ずBASIC認証やIP制限を設けて、公開してはいけない情報を外部に出さないようにする。 公開後はファイル名にtest_がある場合にBASIC認証が掛かる仕様をデフォルトとしています。 tes […]

Go to page 2