はてなブックマーク

エンジニアリング部システムソリューション課のひよっこエンジニアKと申します。今回の記事では、WPの開発環境をWPイメージを使わずphp7.2-apacheイメージなどで作ったときに必要となってくるモジュールや設定をご紹介します。 Docker環境基本設定など そもそもなんでWPイメージを使わなかったの？ デプロイ先のルート直下にwordpressを展開したい場合は、dockerの公式WPイメージを使えば問題ありません。今回はルート直下ではなく、下層ディレクトリでwordpressを展開する必要があったため、php7.2-apacheイメージで環境を作ってみました。 今回使ったymlファイルのご紹介 今回使ったymlファイルは以下の通りです。今回はwebコンテナの他に、dbコンテナやphpMyAdmin(pma)コンテナ、smtpコンテナを用意し、proxyでドメインを振り分けています。 v

エンジニアリング部システムソリューション課のひよっこエンジニアKと申します。エンジニアになってまだ2ヶ月強の私は、課題や仕事に取り組む中でわからないことにぶち当たることが多いです。この記事は、わからないところについて調べた結果などをまとめています。 今回のテーマは、CSRF対策についてです。今回課題をやっていて苦戦したところ等を主に書いていきます。まだまだ調べが足りない点も多いので、随時更新予定です。 そもそもCSRF(クロスサイト・リクエストフォージェリ)とは何なのか？ Webアプリケーションにはログインした利用者のアカウントにより、取り消せない重要な処理(利用者のクレジットカードでの決済や、利用者の口座からの送金、メール送信、パスワードやメールアドレスの変更など)が実行できるものがあります。『安全なWebアプリケーションの作り方（第2版）』によると、CSRF攻撃は利用者のブラウザから罠

「SPAN」とは、単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。 グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。 同じ意味を持つタグとして<div>がありますが、<div>はブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。 <span>はインライン要素で文章の一部として利用されますので前後に改行は入りません。

テキスト <code> コンピュータで使うプログラムなどのコードなどを表す <sup> 上付き文字を指定 <center> 内容の中央寄せ [非推奨要素] <cite> 出典や参照先を表す <q> 引用・転載文を表す <blockquote> テキストが引用・転載文であることを示す <ins> 文書の修正で追記された部分を表す <del> 文書の修正で削除された部分を表す <dfn> 定義語を表す <strong> 内容の強調を表す <em> 内容の強調を表す <var> プログラムコードの説明文などで変数や引数の部分を示す <samp> プログラムからの出力内容を例示 <kbd> コンピュータの操作手順説明などでユーザがキーボードから入力する部分を示す <abbr> 略語を示す <acronym> 略語（頭字語）を示す <br> 改行位置の指定 <bdo> 文字が左から右に流れるか右から

「LABEL」とは、フォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル（もしくはラベルのアクセスキー）をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。 <label>タグの指定方法には2つあり、1つは<label>タグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができます。もう一つは、<label>～</label>内に部品とラベルを配置するという方法です。 ただし、この方法はInternet Explorer6以前のブラウザには対応していないので、できるだけ前者を用いた方がよいでしょう。

はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知っている 目指す構成 Sassのコンパイルをする Source mapを作成する Minifyする Autoprefixerでベンダープレフィックスを自動的に付与する 1〜4のことをファイルの変更があったら自動的に行う 学べること Gulp実行までの手順 Gulpのタスクの作り方 Gulpのタスクの実行の方法 ファイル監視の方法 環境設定 まずはGulpを動かすための環境を整えましょう。Gulpを使った

はじめに この記事はWebpackという言葉を耳にしつつもWebサイトのコーディングにどう導入していけばよいかイマイチわからない・メリットを感じない人にとりあえず馴染み深いjQueryとjQuery PluginをWebpackで扱って慣れようというものです。 背景 Vue.js・React・AngularなどのフレームワークはそのビルドにWebpackを使うことも多いのですが、一般的なコーポレートサイトやサービスサイトでそういったものを導入することはSEOの面や開発工数から考えて少ないと思われます。 そのため、多くのWebサイト制作者はWebpackへの馴染みがなく、その使い方を覚える手間を超えるメリットを感じていないのではないでしょうか。 Webpackを使うことでnpmでパッケージをダウンロード・インポートし、そしてそれらを１つのファイルとしてまとめることでWebページの読み込みを早

久しぶりの更新はようやく梅雨模様になってきた仙台事務所の古川がお送りします。 今回は社内チャットワークで新人さんの質問をきっかけに話題に挙がっていた「RWDにおけるイベント登録」についてのお話しです。 はじめに RWDのページではブレークポイントごとに異なる動作をすることがあります。例えばスマートフォン向けの解像度ではコンテンツ領域が狭いため、アコーディオンメニューを使用して一覧性を良くし、パソコン向けの解像度ではアコーディオンを解除し、見出しと本文をサクッと見れるようにする・・・といったケースです。 このとき、よほど奇抜なデザインではない限り同じHTMLを使うことが出来るのですが、アコーディオンを開く際のクリック（タップ）イベントも同じHTMLに登録されているため、すべてのブレークポイントでイベントが実行されます。 そういったブレークポイントごとにイベントの発生する・しないをどういった方

<nobr> どのひとが、行末を心細いと云つたのかわからなかつたけれど、<wbr> 趣味のいゝ華かな姿を見てゐると、どのひとも、あまり行末のことなど<wbr> 考へてゐるやうにも見えなかつた。 </nobr> 「WBR」とは「Word Break」の略で、改行をしてもよい箇所を指定するタグです。ブラウザやテーブルの横幅以上に1行も文字がある場合、自動的に次の行に改行されてしまい意味がおかしくなってしまうことがあります。そのため、文章や英単語、固有名詞などを改行させたくない場合にこのタグを<nobr>と合わせて使用します。 <nobr>～</nobr>で囲まれた箇所は、ブラウザやテーブルの横幅に関わらず改行なしで表示されます。<nobr>～</nobr>の中で一部改行したい位置がある場合は<wbr>を使用することで改行を行います。 なお、<nobr>、<wbr>はNetscape Navig

だから、安く早く作れます。 クロノドライブでは「より早く」「より簡単に」レスポンシブサイトを構築するためオリジナルレスポンシブテンプレートを使用します。 このテンプレートを使用することにより、設計から構築まで全てのフェーズでスピードアップがなされ、結果安価での対応が可能になります。 ご発注いただいた後、実際にテンプレートをご覧いただき必要な機能や動作をご指定の上、原稿・デザインデータをご支給いただきます。 もちろんテンプレート使用せずフルオリジナルのレスポンシブサイト構築も可能です。 特徴 スピード 費用 対応範囲 クオリティ 設計書 デザイン 原稿 コーディングレギュレーション 料金例 WordPress対応 オリジナルデザイン お客様のご要望をヒアリングさせていただき、サイト設計からデザイン・htmlコーディングまで開発のすべてが対応可能なオールマイティなプランです。 時間とコストをか

現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めします。 本コラムでは、jQueryプラグインの作り方と基本的なサンプルをお伝えします。 jQueryプラグインの例 それでは、早速jQueryプラグインの例を見てみましょう。

ここ数年でフロントエンドエンジニアという言葉を聞くことが多くなったと感じますが、フロントエンドエンジニアの定義は会社によって異なるものです。 ただ多くの場合、「JavaScriptやHTML5/CSS3、PHPといったプログラム言語など、高度なWeb制作スキルを持った人」を指しており、それらのスキルを活かしてWebサイトを構築する仕事内容がほとんどです。（アプリ制作会社の場合アプリ開発のフロントエンド部分を担当するエンジニアを指すこともあります。） 当コラムではフロントエンドエンジニアとは「Web制作においてHTML/CSSはもとより、それに関連するJavaScriptや各種API、WebGLやキャンバスなどWebサイトを表示するうえで必要となるさまざまな技術・知識を持ち、それらを取捨選択できる人」と定義します。 そのうえで、フロントエンドエンジニアとしてWeb制作の現場で働く際に必要とな

Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ

id・class名 要素 単語 要素 単語 ページ全体 container メニュー menu, menuList ヘッダー header よくある質問 faq サイトのタイトル siteTtl タブ tab ロゴ logo SNS sns カテゴリ category お知らせ、情報 info キャッチフレーズ catch ニュース news スローガン slogan 過去のニュース pastNews ナビゲーション nav 短いニュース spotNews グローバルナビゲーション gNav, globalNav 日付 date ローカルナビゲーション lNav, localNav 更新情報、更新日 update 補足ナビゲーション subNav, otherNav, extraNav 更新履歴、沿革 history パンくずナビゲーション pagePath 項目 item コンテンツエリ

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ

皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか？ 調べてみると、三角形の作り方を解説している記事が沢山あります。 普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。 そのため、私が個人的にこんな場面で使えるのでは？といったものをまとめてみましたので、ご紹介したいと思います。 ～この記事の対象ブラウザ～ iOS5、iOS6、iOS7　Safari Android OS 2.3.3、Android OS 4.0.4、Android OS 4.1.1　標準ブラウザ ※PCでも表示はされていますが、動作検証は不十分なのでPCで使用する際は注意してください。 CSSだけで作ると何がいいの？ CSSだけで作ると、 色やサイズの調整が簡単に出来る。 画像分の容量を削減出来る。 スライスの手間が減る。 などのメリッ

WordPressのmod_rewriteコードを参考にmod_rewriteについてまとめてみました。 mod_rewriteとは？ mod_rewriteとは、何かご存知でしょうか？ これは、Apacheというhttpサーバで利用されいてるモジュールと言われるもので、URLの書き換え・リダイレクト処理を行なってくれるものです。 主に「.htaccess」というファイルに任意の処理を記述して使用します。 mod_rewriteですが、使ってはいるけど内容はよくわからない方も多いのでは無いでしょうか？ 実際にWordPressのパーマリンク設定で利用しているmod_rewrite のコードを参考に説明を行なっていきます。 まずは、利用しているコードを確認してみましょう。 WordPressのパーマリンク設定で利用しているmod_rewrite

サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea

第2回まで「擬似フォームUI」の作り方を解説してきましたが、第3回となる今回はちょっと方向性を変えて、チェックボックスやラジオボタンをタップしたときに、瞬時にレスポンスを返す方法を解説していきます。 皆さんは、スマートフォンでフォームのチェックボックスをタップしたときに、一瞬遅れてチェックが入るといった経験をしたことはないでしょうか？ 次のサンプルを操作するとお分かりいただけると思います。 サンプル ※iPhone（iOS）だとより分かりやすいです この時点でのサンプルを表示する 一瞬とはいえ、このラグがあることでタップできたのか不安になり、もう一度タップしてチェックを解除してしまうなど、サクサクと操作することができません。 このラグを減らすことで、心地良い操作感をユーザーに与えるフォームへとカスタマイズしていきます。 STEP09 clickイベントではなく、touchstart/mov

前回はCSSを使って擬似フォームUIのデザインを整えるところまでを紹介してきましたが、今回からは擬似フォームUIの肝となる、jQueryを使ったフォーム操作の方法を紹介していきます。 前回の記事はこちら STEP05 jQueryでチェックボックスのチェック状態を操作する この時点でのサンプルを表示する 擬似フォームUIでは、実際のチェックボックスは隠れた状態になるため、jQueryでチェック/未チェックの切り替えを行います。 そのために覚えておきたいのが次の項目です。 input要素のchecked属性 input要素にchecked属性を付けることで、チェック/未チェックの状態を操作することができます。

ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。 本コラムでは主にスマートフォン向けにCSS3とJavaScript（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで

要素の大きさ・領域・装飾に関するプロパティ margin padding width min-width max-width height min-height max-height background-color background-image background-repeat background-position border-width border-style border-color outline-width outline-style outline-color list-style-type list-style-image list-style-position display visibility overflow clip 要素の位置に関するプロパティ float clear position top bottom left right z-index テキス