仙台・宮城の皆さんこんにちは！ 本日は「Gitのインストール」について解説したいと思います。今まで何度もGitをインストールする機会がありましたが、その度、GoogleやYouTubeなどで調べながら何となく理解したつもりで進めていました。今回はきちんと意味を理解しながらインストールする手順を解説したいと思います。なお、今回はWindows環境でGitのバージョンは2.47.0.2での説明となります。 【1画面目】Information インストーラーをダブルクリックすると最初に現れるのがこの画面です。最初のこの画面はGitのライセンス情報（GNU General Public License）を表示しています。（説明不要と思いますが、一応、、、） 「GNU General Public License」は、Gitのようなオープンソースソフトウェアに適用されるライセンスで、ソフトウェアの利用や配布に関する自由を保証するものですね。 推奨設定！ 特に確認する必要がなければ「Next」ボタンをクリックして、次に進んで問題ありません。 【2画面目】Select Destination Location この画面は、Gitのインストール先のフォルダを選択する画面です。デフォルトでは「C:\Program Files\Git」にインストールされるようになっています。 デフォルトのままで問題ない場合は、そのまま「Next」ボタンをクリックして進めてください。このパスは一般的な場所で、Gitのインストール先として推奨されます。 インストール先を変更したい場合は、「Browse...」ボタンをクリックして、新しいインストール先を選択できます。ただし、特に理由がなければデフォルトのパスで問題ありません。 推奨設定！ 通常は、デフォルトのインストール先で進めて問題ありませんので、「Next」で次のステップに進んでください。 【3画面目】Select Components この画面は、Gitのインストール時に選択できるコンポーネント（機能やオプション）を設定する画面です。各項目を選択または解除することで、インストールする機能をカスタマイズできます。 以下は主要な項目の説明です。 Additional icons（追加アイコン） On the Desktop：デスクトップにGitのアイコンを追加します。ショートカットが必要であればチェックします。 Windows Explorer integration（エクスプローラー統合） Open Git Bash here：右クリックメニューに「Open Git Bash here」を追加し、特定のフォルダから直接Git Bashを開けるようにします。 Open Git GUI here：右クリックメニューに「Open Git GUI here」を追加し、Git GUIを開けるようにします。 Git LFS (Large File Support) 大容量ファイルのサポート機能です。Git LFSを使用する場合はチェックを入れます（通常は有効にしておくと便利です）。 Associate .git configuration files with the default text editor .gitconfigなどの設定ファイルをデフォルトのテキストエディタで開けるようにします。これも通常はチェックしたままで問題ありません。 Associate .sh files to be run with Bash .shファイル（シェルスクリプト）をBashで実行できるようにします。Windowsでシェルスクリプトを扱う場合は有効にしておくと便利です。 Check daily for Git for Windows updates Git for Windowsの更新を自動的に確認します。定期的な更新が必要であれば有効にしておきますが、手動で更新する場合は無効でも構いません。 Add a Git Bash Profile to Windows Terminal Windows TerminalにGit Bashのプロファイルを追加します。Windows Terminalを使っている場合はチェックを入れると便利です。 Scalar (Git add-on to manage large-scale repositories 大規模なリポジトリを効率的に管理するためのGitのアドオンです。通常のプロジェクトであれば、このオプションはオフにしておいても大丈夫です。 推奨設定！ 3画面目はたくさん確認する箇所がありますが、基本的にデフォルトで構いませんので「Next」で次のステップに進んでください。 【4画面目】Select Start Menu Folder この画面は、Gitのインストール時にスタートメニューフォルダの場所を選択するオプションです。スタートメニューに「Git」フォルダを作成し、ショートカットをそこに配置する設定です。 デフォルトでは「Git」という名前のフォルダが作成され、その中にGitのショートカットが配置されます。 Don't create a Start Menu folder スタートメニューにフォルダやショートカットを作成したくない場合は、このオプションにチェックを入れます。ショートカットが不要であればこちらを選択しても問題ありません。 推奨設定！ 通常はデフォルトの設定のまま「Next」をクリックすることで、スタートメニューにGitのショートカットが作成され、簡単にアクセスできるようになります。 【5画面目】Choosing the default editor used by Git この画面は、Gitで使用するデフォルトエディタを選択するオプションです。ここで指定されたエディタは、Gitの設定ファイルやコミットメッセージの編集などで使われます。 普段使っているエディタを選択すると良いでしょう。ロップダウンメニューをクリックすると、エディタを選択することができます。例えば、「Visual Studio Code」や「Vim」「Nano」「Notepad」などのエディタが利用可能です。 推奨設定！ 個人的におすすめはするのは「Visual Studio Code」ですね。ただ一つ注意点があります。エディタがインストールされていない場合、選択できない仕様になっているようです。予めインストールしておく必要があります。 【6画面目】Adjusting the name of the initial branch in new repositories この画面は、新しくリポジトリを作成する際の初期ブランチ名（git initコマンド実行後に作成される最初のブランチの名前）を設定するオプションです。 Let Git decide Gitにデフォルトのブランチ名を任せる設定です。現時点では通常「master」がデフォルトですが、将来的には「main」への変更が推奨されています。もし標準の「master」で問題ない場合や、自動的にGitの決定に従いたい場合はこちらを選択します。 Override the default branch name for new repositories 新しく作成するリポジトリの初期ブランチ名を手動で設定するオプションです。現在は多くのチームで「main」ブランチが推奨されており、デフォルトで「main」が入力されています。この設定を使えば、git initを実行するたびに初期ブランチが「main」となり、他のチームやGitHubなどでの標準と一致します。 推奨設定！ 現在は「main」を使用するのが一般的です。多くのプロジェクトやリモートリポジトリサービス（例：GitHub）では、「main」をデフォルトの初期ブランチ名として採用しています。 特に理由がなければ、「Override the default branch name for new repositories」を選択して、「main」を指定したまま「Next」をクリックすると良いと思います。 この設定は新しく作成するリポジトリにのみ適用され、既存のリポジトリには影響を与えません。 【7画面目】Adjusting your PATH environment この画面は、Gitをインストールする際に、PATH環境変数の設定をどうするか選ぶオプションです。この設定により、コマンドラインでGitをどのように使うかが決まります。 Use Git from Git Bash only Git BashからのみGitコマンドを使用する設定です。PATH環境変数が変更されないため、他のコマンドプロンプト（例えばCommand PromptやPowerShell）からはGitが使えません。安全な選択ですが、使い勝手が制限されます。 Git from the command line and also from 3rd-party software GitコマンドをGit Bashだけでなく、コマンドプロンプトやPowerShell、その他のソフトウェアからも使用できるようにします。必要最低限のGitラッパーをPATHに追加するため、環境が乱れるリスクが少ないです。Gitを多くの環境で使用したい場合に推奨されます。 Use Git and optional Unix tools from the Command Prompt Gitと共に、Unixのオプションツール（例：findやsortなど）もPATHに追加します。この設定にすると、コマンドプロンプトからもUnixコマンドが使用可能になりますが、Windowsの同名コマンドと競合する可能性があります。上級者向けで、UnixツールをCommand Promptから利用したい場合に選びますが、通常の使用には注意が必要です。 推奨設定！ 特にこだわりがなければ、「Git from the command line and also from 3rd-party software」（2番目の選択肢）を選んで「Next」をクリックするのが無難で推奨されます。この設定により、さまざまな環境でGitコマンドが使用可能になり、利便性が高くなります。 【8画面目】Choosing the SSH executable この画面は、GitがSSH接続を行う際に使用するSSHクライアントを選択するオプションです。SSHは、リモートリポジトリに安全にアクセスするために使用されるプロトコルで、GitHubやGitLabなどのリポジトリへの認証に必要です。 Use bundled OpenSSH Gitに付属しているOpenSSH（ssh.exe）を使用します。Gitのインストールに含まれているため、特別な設定が不要で、そのまま動作します。 Use external OpenSSH 外部のOpenSSH（すでにPCにインストールされているもの）を使用します。Gitには独自のOpenSSHをインストールせず、PATHに設定されている外部のSSHクライアントを使用します。例えば、すでにシステムに別のOpenSSH（例：Windowsの内蔵SSHや他のSSHツール）が設定されている場合で、それを利用したい場合に選びます。 推奨設定！ 通常は「Use bundled OpenSSH」（Git付属のOpenSSHを使用する）を選択するのが簡単で、設定もスムーズです。このまま「Next」をクリックして進めると良いでしょう。 【9画面目】Choosing HTTPS transport backend この画面は、GitがHTTPS接続を行う際に使用するSSL/TLSライブラリを選択するオプションです。これは、GitHubやGitLabなどのリモートリポジトリにHTTPSで安全に接続するための設定です。 Use the OpenSSL library OpenSSLライブラリを使用してHTTPS接続を行います。このオプションでは、Gitに付属するca-bundle.crtファイルを使って証明書の検証が行われます。 Use the native Windows Secure Channel library Windowsのネイティブな「Secure Channel」ライブラリを使用してHTTPS接続を行います。このオプションでは、Windowsの証明書ストアに基づいて証明書の検証が行われます。 企業や組織内のネットワークで独自の証明書を使用している場合や、Active Directory経由で証明書が配布されている環境では、このオプションが適しています。 推奨設定！ 個人での使用や一般的な環境であれば、「Use the OpenSSL library」を選択して「Next」をクリックするのが無難です。企業内での使用や、特にWindowsの証明書ストアを利用する必要がある場合のみ「Use the native Windows Secure Channel library」を選択すると良いでしょう。 【10画面目】Configuring the line ending conversions この画面は、Gitがテキストファイルの改行コードの変換をどのように扱うかを設定するオプションです。異なるOS（WindowsとUnix/Linux系）で改行コードの形式が異なるため、クロスプラットフォームでの互換性を保つための設定です。 Checkout Windows-style, commit Unix-style line endings 「Windowsスタイルでチェックアウトし、Unixスタイルでコミット」という形になります。Windows推奨の設定です。チェックアウト（ファイルを取得）時に改行コードを「CRLF（Windowsスタイル）」に変換し、コミット時には「LF（Unixスタイル）」に戻します。 異なるOS間で作業する際、改行コードの問題を自動で解消してくれるため、Windows環境で作業している場合に最も適しています。 Checkout as-is, commit Unix-style line endings 「そのままチェックアウトし、Unixスタイルでコミット」という形になります。Unix系（LinuxやMac）で推奨される設定です。チェックアウト時に改行コードを変換せず、そのまま取得しますが、コミット時には「LF（Unixスタイル）」に変換します。Windows環境で作業する場合には推奨されませんが、Unix環境では便利です。 Checkout as-is, commit as-is 「そのままチェックアウトし、そのままコミット」する形です。改行コードの変換を一切行いません。クロスプラットフォームのプロジェクトには推奨されません。異なるOS間で作業する場合に、改行コードの不整合が発生する可能性があります。 推奨設定！ 特に理由がなければ、「Checkout Windows-style, commit Unix-style line endings」（最初のオプション）を選択するのが無難です。これにより、WindowsとUnix/Linux間での改行コードの違いが自動的に処理され、クロスプラットフォームでの互換性が保たれます。この設定のまま「Next」をクリックして進めてください。 【11画面目】Configuring the terminal emulator to use with Git Bash この画面は、Git Bashで使用するターミナルエミュレータを選択するオプションです。ターミナルエミュレータは、コマンドラインを実行するためのウィンドウのことです。ここでは、Git Bashがどのターミナルを使うかを設定できます。 Use MinTTY (the default terminal of MSYS2) MinTTYは、MSYS2が提供するデフォルトのターミナルで、Git Bashでもよく使用されます。再サイズ可能なウィンドウ、非矩形選択、Unicodeフォントのサポートなど、便利な機能が豊富です。 Use Windows' default console window Windowsのデフォルトコンソール（cmd.exe）を使用します。これは、Windowsに標準で付属しているコマンドプロンプトです。簡素なコンソールで、MinTTYに比べて機能が制限されていますが、Windowsネイティブのコマンドラインプログラムと互換性があります。 推奨設定！ 通常は「Use MinTTY (the default terminal of MSYS2)」を選択するのが推奨されます。MinTTYは視認性が高く、機能が豊富で、Unicodeフォントの表示やウィンドウの再サイズがしやすいため、使い勝手が良いです。このまま「Next」をクリックして進めると良いでしょう。 【12画面目】Choose the default behavior of 'git pull' この画面は、Gitでgit pullコマンドを実行したときのデフォルトの動作を選択するオプションです。git pullは、リモートの最新の変更をローカルに取り込むコマンドで、変更の統合方法を選ぶことができます。 Fast-forward or merge（高速マージまたはマージ） 可能な場合は、現在のブランチをリモートのブランチに「fast-forward（早送り）」で更新します。fast-forwardができない場合はマージコミットを作成します。推奨設定で、特にこだわりがなければこれを選ぶのが一般的です。これにより、履歴が分岐しない限り、きれいな履歴が保たれます。 Rebase リモートの変更を現在のブランチに「リベース」します。これにより、ローカルのコミット履歴がリモートの履歴に沿って並べ直されます。リベースは履歴が直線的になり、見やすい履歴を保つのに便利ですが、履歴を変更するため、使い方に注意が必要です。 Only ever fast-forward（常に高速マージのみ） fast-forwardが可能な場合のみ更新します。fast-forwardができない場合は失敗し、マージが行われません。履歴を厳密に保ちたい場合に有用ですが、マージができない場合は失敗するので、慎重に使う必要があります。 推奨設定！ 特に理由がなければ、「Fast-forward or merge」（最初のオプション）を選択するのが一般的です。これにより、fast-forwardが可能な場合は自動で適用され、必要に応じてマージも行われます。このまま「Next」をクリックして進めると良いでしょう。 【13画面目】Choose a credential helper この画面は、Gitがリモートリポジトリ（例：GitHubやGitLab）へのアクセスに使用する認証情報ヘルパー（Credential Helper）を選択するオプションです。認証情報ヘルパーは、ユーザー名やパスワード、アクセストークンなどの認証情報を保存して、毎回入力する手間を省く機能です。 Git Credential Manager クロスプラットフォーム対応の「Git Credential Manager」を使用します。このツールは認証情報を安全に管理し、一度入力すれば自動的に保存して再利用してくれるので、利便性が高いです。これにより、毎回リモートにアクセスするたびに認証情報を入力する必要がなくなります。 None 認証情報ヘルパーを使用せず、毎回リモートにアクセスするたびにユーザー名やパスワードを入力する必要があります。セキュリティ上の理由で毎回認証したい場合にのみ選択します。 推奨設定！ 通常は「Git Credential Manager」を選択して「Next」をクリックするのが良いでしょう。これにより、リモートリポジトリへのアクセスが簡単になり、安全に認証情報が管理されます。 【14画面目】Configuring extra options この画面は、Gitのインストール時に追加オプションを設定する画面です。ここでは、「ファイルシステムキャッシュ」と「シンボリックリンク」の有効化に関する設定を選択できます。 Enable file system caching（ファイルシステムキャッシュを有効化） ファイルシステムのデータを一括で読み込み、メモリにキャッシュすることで、Gitの特定の操作（core.fscacheがtrueに設定されている場合）を高速化します。このオプションを有効にしておくと、ファイルアクセスが高速になり、全体的なパフォーマンスが向上することが期待されます。 Enable symbolic links（シンボリックリンクを有効化） シンボリックリンクのサポートを有効にします。シンボリックリンクは、あるファイルやフォルダへの参照（ショートカットのようなもの）として機能します。Windowsでシンボリックリンクを使用するには、「SeCreateSymbolicLink」権限が必要です。特にシンボリックリンクを利用する必要がなければ、このオプションは無効のままで問題ありません。既存のリポジトリには影響しません。 推奨設定！ 通常は「Enable file system caching」にチェックを入れたままにし、「Enable symbolic links」は必要に応じて設定する形が良いです。この設定で「Next」をクリックして進めてください。 【15画面目】Configuring experimental options この画面は、Gitのインストール中に実験的なオプション（Experimental Options）を有効にするかどうかを尋ねる画面です。このオプションは、Gitの新しい機能や開発中の機能を試す機会を提供しますが、安定性が保証されていない場合があります。 このバージョンのインストーラーでは、特に選択するオプションが表示されていないため、有効にできる実験的なオプションが含まれていないようです。この場合は、特に何も設定する必要はなく、そのまま「Install」ボタンをクリックしてインストールを続行してください。 【16画面目】Completing the Git Setpu Wizard お疲れ様でした！この画面は、Windows向けGitセットアップウィザードの最終画面です。つまり「Gitのインストールが完了した状態」を示しています。この状態で 「Finish」ボタン をクリックすれば、Gitのインストールが完全に終了し、Gitが使用可能な状態になります。 以下はオプションです。 Launch Git Bash（Git Bashを起動する） チェックを入れると、セットアップ後にGit Bashがすぐに起動します。 View Release Notes（リリースノートを表示する） チェックが入っており、リリースノートが表示される設定になっています。 まとめ 本日は長々とお付き合いいただいてありがとうございました！ただこの記事を見ていただければ、迷わずGitをインストールして使用できると思います。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
もう迷わない！きちんと理解したい「Gitインストール」
WordPressのwp_footer()は何のためにあるの？基礎的な疑問をわかりやすく解説！
仙台・宮城の皆さんこんにちは！ WordPressサイトのカスタマイズを進めているとき、何気なく目にするwp_footer()。でも、「これって一体何？」と思ったことはありませんか？wp_footer()は、サイトのパフォーマンスやプラグインの動作において非常に重要な役割を担っています。今回は、この関数がどんな働きをしているのか、そしてなぜ欠かせないのかをわかりやすく解説します！ wp_footer()は見えない魔法のようなもの wp_footer()は、サイトの一番下にスクリプトを追加するための「魔法のような」関数です。これがあるおかげで、プラグインや外部スクリプトがページに必要なコードを追加できます。例えば、Google Analyticsやチャットウィジェットなどをサイトに設置しても、wp_footer()がなければ正しく機能しないことが多いのです。 wp_footer()は隠れた縁の下の力持ち WordPressサイトの多くの機能は、見えないところでwp_footer()が支えています。ページの下部に配置されるこの関数は、サイト全体の動作や追加機能を支えるための重要なパーツです。見た目には直接影響しないものの、この関数があることで、ページの表示速度やプラグインの動作が最適化され、サイトがスムーズに動きます。具体的な役割を見てみましょう。 サイトのスピードを保つ wp_footer()は、JavaScriptファイルなどをページの最後に追加します。これにより、ページ全体の表示速度が速くなるメリットがあります。ページの表示が速いと、訪問者の離脱率が低下し、SEOにも良い影響を与えます。 プラグインをスムーズに動かす 「なんだかプラグインが正しく動かない…」というトラブルを経験したことがある方も多いはずです。そんなとき、このwp_footer()がないことが原因だった、というケースもよくあります。プラグインはこの関数を利用して必要なスクリプトを読み込むため、動作を保証するためにも不可欠です。 便利な機能をサポート 例えば、ページ下部に表示されるライブチャット機能やクーポンコードのポップアップなど、ユーザーエクスペリエンスを向上させる要素もwp_footer()によって支えられています。これがないと、こういった便利な機能が正しく表示されず、サイトの魅力やユーザーの利便性が損なわれることがあります。 wp_footer()をテーマに組み込む方法 テーマを自作したり、カスタマイズを行う際は、footer.phpファイルにwp_footer()を必ず含めることが重要です。このコードがないと、ページの最後に必要なスクリプトが適切に挿入されず、プラグインやカスタム機能が正常に動作しないことがあります。特に、外部スクリプトや解析ツールを使っている場合は、これがないとサイトが十分に機能しない原因となることもあります。忘れずにこのコードを追加して、サイトのパフォーマンスを最大限に引き出しましょう。 <?php wp_footer(); ?> </body> </html> この一行を入れておくことで、WordPressはページの下部に必要なスクリプトやコードを自動的に追加されます。 wp_footer()がないとどうなる？ プラグインが動かない？ wp_footer()がテーマに含まれていないと、プラグインが必要とするスクリプトを読み込めず、正常に動作しないことがあります。その結果、「サイトがなぜか思うように機能しない」といった問題に直面することがあります。これが原因で、特定の機能が表示されなかったり、動かなくなったりすることもあるのです。 トラッキングが無効化される wp_footer()がないと、Google Analyticsなどの解析ツールが正しく動作せず、サイトの訪問データが取得できなくなることがあります。これにより、重要なアクセス情報が失われてしまい、ユーザーの行動を把握して改善に活かす機会を逃してしまうことになります。サイト運営者にとって、これは大きな損失です。 まとめ wp_footer()は、WordPressテーマのフッター部分で重要な役割を果たす関数です。この関数をテーマにしっかりと含めておくことで、プラグインやカスタムスクリプトが正常に動作し、サイト全体のパフォーマンスやSEOにも良い影響を与えます。初心者はまず、この関数の役割を理解し、自作テーマやカスタムテーマを編集するときにはwp_footer()を忘れずに追加するようにしましょう。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
PHPのin_array()関数の使い方と活用法を解説！
仙台・宮城の皆さんこんにちは！ PHPを使っていると配列内に特定の値が存在するかどうかを確認したい場面がよくあります。そんな時に役立つのが、PHPの組み込み関数「in_array()」です。この記事では、非常に役立つこの関数の基本的な使い方や、実際の活用例をわかりやすく解説します。PHP初心者の方でも理解できる内容にしていますので、ぜひ最後までお読みください。 in_array()とは？ in_array()は、指定した値が配列に含まれているかどうかを判定するための関数です。この関数を使用することで、特定の値が配列内に存在するかどうかを簡単にチェックできます。 使い方の基本文法 in_array($value, $array, $strict); $value:検索する値 これは、配列内で探したい特定の値を指します。たとえば、文字列、整数、または浮動小数点数など、さまざまなデータ型を指定できます。in_array()は、指定した値が配列に存在するかどうかを調べます。 $array:検索対象の配列 ここには、値が含まれているかどうかを確認したい配列を指定します。配列の中には、複数の要素が含まれており、in_array()はその配列を検索して、$valueが存在するかどうかを調べます。 $strict (省略可): 型を厳密に比較するかどうか（trueまたはfalse） オプションは、比較を厳密に行うかどうかを指定します。デフォルトではfalseで、これは型の違いを無視して比較します。 falseの場合 たとえば、数値の3と文字列の'3'は同じと見なされます。したがって、in_array(3, ['3'])はtrueを返します。 trueの場合 型を厳密に比較するため、数値と文字列は異なるものとして扱われます。したがって、in_array(3, ['3'], true)はfalseを返します。 // 型を無視した場合 $numbers = [1, 2, '3']; // 配列内に整数と文字列が含まれている if (in_array(3, $numbers)) { echo "3は配列に含まれています。"; // 出力: 3は配列に含まれています。 } // 型を厳密に比較した場合 if (in_array(3, $numbers, true)) { echo "3は配列に含まれています。"; } else { echo "3は配列に含まれていません。"; // 出力: 3は配列に含まれていません。 } 基本的な使用例 配列内に値が存在するか確認する 次のコードは、配列内に特定の値が含まれているかどうかを確認する基本的な例です。 $meibutsu = ['zunda', 'sasakama', 'gyutan']; if (in_array('sasakama', $fruits)) { echo "笹かまは配列に含まれています。"; } else { echo "笹かまは配列に含まれていません。"; } この例では、'sasakama'が$meibutsu配列に含まれているため、「笹かまは配列に含まれています。」と表示されます。 厳密比較を行う 先程の例でも触れましたが、データ型を厳密に比較した例です。 $numbers = [1, 2, '3']; if (in_array(3, $numbers, true)) { echo "3は配列に含まれています。"; } else { echo "3は配列に含まれていません。"; } この場合、3（整数）と'3'（文字列）は異なる型のため、結果は「3は配列に含まれていません。」となります。 in_array()の活用例 フォームデータの検証 ユーザーが送信したデータが、あらかじめ定義された選択肢の中にあるかを確認する際に役立ちます。 $allowed_address = ['sendai', 'tagajo', 'shiogama']; $user_caddress = 'ishinomaki'; if (in_array($user_address, $allowed_address)) { echo "石巻は許可されています。"; } else { echo "石巻は許可されていません。"; } この場合、'ishinomaki'は$allowed_address配列に含まれないため、「石巻は許可されていません。」と表示されます。 条件に基づく処理の実行証 特定の条件に基づいて処理を行う場合にも、in_array()が便利です。 $user_role = 'editor'; $allowed_roles = ['admin', 'editor', 'author']; if (in_array($user_role, $allowed_roles)) { echo "アクセスが許可されています。"; } else { echo "アクセスが拒否されました。"; } 'editor'は$allowed_roles配列に含まれているため、「クセスが許可されています。」と表示されます。 まとめ in_array()は、PHPで配列内に特定の値が含まれているかどうかを簡単にチェックできる便利な関数です。基本的な使い方や活用例を紹介しましたが、ぜひ実際のプロジェクトで試してみてください。PHP初心者の方でも、この関数を使いこなすことで、より効率的にコーディングできるようになるでしょう。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
PHP初心者でもわかる！intval()で値を整数に変換する方法
仙台・宮城の皆さんこんにちは！ PHPは初心者にも扱いやすいプログラミング言語として、多くのプロジェクトで利用されています。その中でも、「データの型変換」は重要なスキルの一つです。今回は、仙台でウェブ制作やアプリ開発に役立つ「intval()」関数を使って、簡単に値を整数に変換する方法をわかりやすく解説します。 intval()とは？ intval()は、PHPの組み込み関数で、値を整数型に変換するために使います。たとえば、文字列や浮動小数点数などを整数に変換したいときに役立ちます。intval()を使えば、簡単に整数を取得できるため、入力の検証やデータ処理の場面でよく使われます。 $number = "42.5"; $intNumber = intval($number); echo $intNumber; // 出力: 42 intval()の使い方 文字列を整数に変換する intval()は、文字列が数値であればその数値部分を整数として返します。たとえば、次のように文字列から整数を取得することができます。 $value = "123abc"; $intValue = intval($value); echo $intValue; // 出力: 123 この場合、"123abc"の数値部分である123が取得され、以降の文字列は無視されます。 浮動小数点数を整数に変換する 浮動小数点数（小数）もintval()で整数に変換できます。小数点以下は切り捨てられ、整数部分だけが返されます。 $float = 45.67; $intNumber = intval($float); echo $intNumber; // 出力: 45 基数を指定して整数に変換する intval()には、基数（進数）を指定して変換することもできます。デフォルトでは10進数で変換されますが、2進数や16進数などの基数もサポートしています。 $binary = "1010"; $intValue = intval($binary, 2); echo $intValue; // 出力: 10 intval()が役立つ場面 PHPでの入力データの検証や、数値計算を行う際に、intval()はとても便利です。たとえば、フォームから送られてくる値が数値かどうか確認する際に、intval()で整数に変換することで、予期せぬエラーを防ぐことができます。 $input = "58.4"; $age = intval($input); // 年齢として使うために整数化 if ($age >= 18) { echo "成人です"; } else { echo "未成年です"; } まとめ 仙台でウェブ制作や開発を行っている皆さんにとっても、PHPのintval()は、値を簡単に整数に変換できる便利な関数です。特に、入力データの検証や数値を扱うプロジェクトでは非常に役立つ機能です。今後のプロジェクトでもぜひ活用してみてください。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPressでデバイス（モバイル・PC）ごとに表示を変える方法！
仙台・宮城の皆さんこんにちは！ 今日はWordPressで便利な小技を一つ。WordPressでデバイス（モバイル・PC）ごとに表示を変える方法です。具体的には、 モバイルサイトでは表示したいけど、PCでは非表示にしたい！ PCサイトとモバイルサイトのボタンのデザインを変えたい！ といった時にとても便利な方法です。では、早速。 <?php if ( wp_is_mobile() ) : ?> //モバイルサイト用のコンテンツ <div id="image"><img src="/mobile_image.jpg"></div> <?php else: ?> //PCサイト用のコンテンツ <div id="image"><img src="/pc_image.jpg"></div> <?php endif; ?> 何となくわかりますね。 if ( wp_is_mobile() ) はデバイスが「モバイルなら」ということです。そしてelseはモバイル以外なら、つまり「PCなら」ということです。 ちょっと応用 どちらか片方だけ表示させたい場合です。空白にしちゃえばいいんですが、なんかすっきりしません。 モバイルだけ表示する場合 モバイルサイトだけ表示させたい場合は、以下のようにします。 <?php if ( wp_is_mobile() ) : ?> //モバイルサイト用のコンテンツ <div id="image"><img src="/mobile_image.jpg"></div> <?php endif; ?> PCだけ表示する場合 逆にPCサイトだけに表示させたい場合は、論理演算子の!を使って否定します。 <?php if ( !wp_is_mobile() ) : ?> //PCサイト用のコンテンツ <div id="image"><img src="/pc_image.jpg"></div> <?php endif; ?> CSSでする場合 通常（ワードプレス以外）、下記のようにブラウザの横幅を検知して、CSSのdisplay: none;で済ませる方法が一般的です。 @media only screen and (min-width: 680px) { #image{ display: none; } } 上記の例では「ブラウザの幅が680px以上なら非表示」にするという記述です。680pxつまり「PCで表示する場合は非表示」となるわけです。 もちろん、CSSでも大丈夫ですが、wp_is_mobile()を使った方がスマートな感じがしますね。 まとめ 現在はレスポンシブ化が標準化されています。WordPressを使ったサイトではぜひ使ってみてください。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPress（ワードプレス）でトップページにだけ表示させる方法！
仙台・宮城の皆さんこんにちは！ 今日はWordPressで便利な「条件分岐」の小技を一つ。WordPressで「トップページだけ表示させる」方法です。具体的には、 トップページにだけバナーを表示させたい！ トップページだけメッセージを表示させたくない！ といった時にとても便利な方法です。では、早速。 <?php if ( is_home() ) : ?> //トップページにだけ表示 <div id="image"><img src="/top-image.jpg"></div> <?php else: ?> //トップページ以外で表示 <div id="image"><img src="/default-image.jpg"></div> <?php endif; ?> もうお分かりですよね。 if ( is_home() ) は「トップページなら」という意味です。 そして、elseは「トップページ以外なら」という意味になります。 応用編 少しだけ応用すれば、いろいろなパータンで使用することができます。 トップページだけ！他のページは必要ない場合 「トップページだけ表示させて、他のページは何も表示させない」場合は、 <?php if ( is_home() ) : ?> //トップページにだけ表示 <div id="image"><img src="/top-image.jpg"></div> <?php endif; ?> elseを記述しなければいいだけです。 トップページだけ表示させたくない！ トップページだけ表示させたくない場合は、!で否定して!is_home()とします。 <?php if ( !is_home() ) : ?> //トップページにだけ表示 <div id="image"><img src="/default-image.jpg"></div> <?php endif; ?> おまけ 「固定ページをホームに設定している」場合は、以下のように記述しなければいけません。 <?php if ( is_front_page() ) : ?> //トップページにだけ表示 <div id="image"><img src="/top-image.jpg"></div> <?php else: ?> //トップページ以外で表示 <div id="image"><img src="/default-image.jpg"></div> <?php endif; ?> is_home()をis_front_page()に変更します。これで固定ページをホームに設定している場合、はトップページだけ表示されるようになります。 どちらも対応できるように両方を指定 以下のように ||（ORの意味）で繋げれば、両方に対応してくれます！これが最終形ですね。 <?php if ( is_home() || is_front_page() ) : ?> //トップページにだけ表示 <div id="image"><img src="/top-image.jpg"></div> <?php else: ?> //トップページ以外で表示 <div id="image"><img src="/default-image.jpg"></div> <?php endif; ?> まとめ トップページは特別なコンテンツを配置する場合が多いです。 違うテンプレートを用意するのも手ですが、例えば画像1つで新しいテンプレートを作るのはとても非効率です。是非、試してみてください！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPressで固定ページかどうか判定するには「is_page()」を使います！
仙台・宮城のWEB担当者の皆さんこんにちは！ 今回はWordPressで固定ページかどうか判定するための「is_page()」について解説します！いろいろな所で使える便利なコードなので、是非覚えてください。 使い方 それでは、早速基本的な使い方から。 <?php if(is_page()): ?> //固定ページだけで処理する内容 <?php endif; ?> 「固定ページでだけ処理したい！」だけでしたら、上記で大丈夫です。 プラスして「でも固定ページ以外では違う処理をしたい！」という場合は、以下のようなコードになります。 <?php if(is_page()): ?> //固定ページだけで処理する内容 <?php else: ?> //固定ページ以外で処理する内容 <?php endif; ?> <?php else: ?>で「以外」の処理を書き加えます。そんなに、難しくないですよね。 is_page()の他の使い方 固定ページか判定する以外に「特定の固定ページにだけ表示させてい！」という場合もこのis_page()を使って判定します。 IDで判定 特定の固定ページを「ID」で判定するには以下のようなコードになります。 <?php if(is_page(512)): ?> //IDが512の固定ページの場合の固定ページだけで処理 <?php endif; ?> 上記のように書けば、idが512の固定ページだけで表示されるようになります。 ちょっと補足！ 512などの整数は' 'で囲んでも囲まなくても大丈夫です。 ページタイトルで判定 特定の固定ページを「ページタイトル」で判定するには以下のようなコードになります。 <?php if(is_page('サービス')): ?> //ページタイトルが「サービス」の固定ページだけで処理 <?php endif; ?> スラッグで判定 特定の固定ページを「スラッグ」で判定するには以下のようなコードになります。 <?php if(is_page('service')): ?> //スラッグが「service」の固定ページだけで処理 <?php endif; ?> 複数のページを指定 「複数の固定ページを判定する」場合は、以下のように配列で指定します。 <?php if(is_page(array('32','324','512'))) : ?> //IDが32、312、512、の固定ページで処理する内容 <?php endif; ?> ID、ページタイトル、スラッグを混ぜてもOK！ <?php if(is_page(array('about','324','サービス'))) : ?> //スラッグが「about」、IDが「324」、ページタイトルが「サービス」の固定ページで処理する内容 <?php endif; ?> この書き方は間違い！ 複数を指定する際によく間違うパターンは、以下のように配列を使用せずに指定してしまう場合です。 <?php if(is_page('32','324','512')) : ?> //この書き方は間違い。よくある間違いパターン。 <?php endif; ?> 本当によく間違ってしまうパターンなのでご注意ください。 まとめ いかがでしたか？固定ページを判定するいろいろな方法でした。 表題は「固定ページかどうか判定する」という内容でしたが「特定の固定ページを判定する」方が長くなってしまいましたね。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPressで「画面が真っ白」の時に最初にやって欲しいこと！それはデバッグモード！
仙台・宮城のWEB担当者の皆さんこんにちは！ 今回はWordPressで「画面が真っ白」という不測自体にも慌てず、最初にして欲しいことについてお話したいと思います。 当サイトも不覚ながら真っ白な状態になってしまいました、、、、。 まずは、原因を探る 「真っ白なんだから何もわからない」ご尤もです。ソースコードを見ても真っ白なんですから、本当に八方ふさがりという状態です。 デバッグモード そんな時は「デバッグモードをオン」にすることで、エラー箇所が特定できることがあります。wp-config.phpの84行目くらいにある、define( 'WP_DEBUG', false )という箇所を見つけてください。 define( 'WP_DEBUG', false ); falseをtrueにします。 define( 'WP_DEBUG', true ); これで、「デバッグモードがオン」になりました。 エラー箇所を特定 デバッグモードをオンにすることで、以下のようなメッセージが表示されました。 Notice: register_sidebar が誤って呼び出されました。「サイドバー 1」サイドバーの引数の配列で id が設定されませんでした。既定では「sidebar-1」です。id に「sidebar-1」を設定することでこの情報を消して、既存のサイドバーのコンテンツを保つことができます。 詳しくは WordPress のデバッグをご覧ください。 (このメッセージはバージョン 4.2.0 で追加されました) in /home/users/2/xxx/xxxx/xxx/xxx.net/xxx/xx/wp-includes/functions.php on line 5313 今回の場合はサイドバーに問題があるようです。色々調べてみるとfunction.phpの以下の場所に原因があるようでした。 register_sidebar(array( )); 以下のように修正してアップロード。 register_sidebar(array( 'id' => 'sidebar-1' )); 無事、正常に表示されました！これで一安心です。このように一つ一つ順を追って原因を特定することが大事です！ デバッグでも解決しなかったら…。 最近、どのような更新をしたか思い出してみましょう。 wordPressのアップデート プラグインのアップデート etc…原因はいろいろ考えられますが、デバッグでわからない場合は、基本的にエラーの出る前の状態にもどさなければなりません。 「バックアップ」が重要になりますが、この辺のことは後日じっくり解説したいと思います。 まとめ まずは「エラー箇所を特定」することが、解決の一番の近道です。焦らずデバッグしてから、対処してください！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
CakePHP（3.9.3）でデータベースの接続でapp.phpを更新したのにうまくいかない！？
仙台・宮城の皆さんこんにちは！ 今日は、CakePHP（3.9.3）でのデータベースの接続方法を解説します。 config/app.phpを更新してもグリーンにならない！？ という方は、特に参考にしてください！ app.php まずは「config/app.php」を変更します。 合計の4か所を変更しますが、まずは「host」ですね。 'host' => 'localhost', そして、次は「username」「password」「database」を変更します。 //'username' => 'my_app', //'password' => 'secret', //'database' => 'my_app', コメントを外して、設定してください。 ここで一通り設定が終了しました。確認してみましょう。 あれ！？グリーンになりませんね。 いろいろ調べてみたところ、バージョン3.9.x辺りから「config/app_local.php」というファイルが追加され、こちらも変更しなくてはならなくなったようです。 app_local.php 同じような箇所がありました。 というわけで、こちらも変更しましょう！ 'Datasources' => [ 'default' => [ 'host' => 'localhost', /* * CakePHP will use the default DB port based on the driver selected * MySQL on MAMP uses port 8889, MAMP users will want to uncomment * the following line and set the port accordingly */ //'port' => 'non_standard_port_number', 'username' => 'my_app', 'password' => 'secret', 'database' => 'my_app', 'log' => true, 'url' => env('DATABASE_URL', null), ], ], app_local.phpをアップロードして、再度確認。 問題なくグリーンになりました！ まとめ データベースの接続以外にも、debug（デバッグ）の設定も両方のファイルを更新する必要がありますので、注意が必要です。 'debug' => filter_var(env('DEBUG', false), FILTER_VALIDATE_BOOLEAN), //↓falseからtrueへ 'debug' => filter_var(env('DEBUG', true), FILTER_VALIDATE_BOOLEAN), それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
CSSでフォーム関連のデフォルトのスタイルを削除する方法（appearance）
仙台・宮城の皆さんこんにちは！ 今日は、フォーム関連のデフォルトのスタイルを削除する方法を解説します。 フォームで使用するinputやtextareaには、ブラウザやデバイスの「デフォルトスタイル」が適用されます。 そのためブラウザやデバイスによって違う見た目になってしまいます。 具体的には、ボーダーがついたり、角丸になってしまったりなど、普段使わないブラウザで確認すると「なんだこれ？」という経験はありませんか？ デフォルトスタイルを一括で削除する デフォルトスタイルを取り除きたいという時に便利なのがappearanceというプロパティで、以下のように記述することで削除されます。 input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 一旦削除した上で、新しいスタイルを記述することで、ブラウザやディバイスに関係なく見た目を統一できることになります。 /*一旦リセットして*/ input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*新しいスタイルを記述*/ input { border:1px solid #CCCCCC; } まとめ いかがでしたか？今回解説したappearanceをリセット関連のCSSとセットにしておくと忘れずに記述できて、便利かもしれません！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
CakePHPでバージョンを確認する方法（VERSION.txt）
仙台・宮城の皆さんこんにちは！ 今日は、CakePHPのバージョンの確認方法について、解説します。 これから修正に入ろうとする時など、バージョンを正確に確認したい時ってありますよね。 3.x系 以下のパスにあるVERSION.txtを開いてみてください。 ./vendor/cakephp/cakephp/VERSION.txt ここに記載されています。 //////////////////////////////////////////////////////////////////////////////////////////////////// // +--------------------------------------------------------------------------------------------+ // // CakePHP Version // // Holds a static string representing the current version of CakePHP // // CakePHP(tm) : Rapid Development Framework (https://cakephp.org) // Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org) // // Licensed under The MIT License // Redistributions of files must retain the above copyright notice. // // @copyright Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org) // @link https://cakephp.org // @since CakePHP(tm) v 0.2.9 // @license https://opensource.org/licenses/mit-license.php MIT License // +--------------------------------------------------------------------------------------------+ // //////////////////////////////////////////////////////////////////////////////////////////////////// 3.9.3 19行目にある3.9.3がバージョンです。 2.x系 CakePHP2系の場合、以下のパスのVERSION.txtにバージョン情報が記載されています。 ./lib/Cake/VERSION.txt 1.x系 CakePHP1系の場合、以下のパスのVERSION.txtにバージョン情報が記載されています。 ./cake/VERSION.txt まとめ CakePHPなどのフレームワークは「バージョン」によって微妙に記述方法が違う場合が多くあります。 昔作ったものを修正する場合などは、きちんとバージョンを確認してから着手しましょう！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
htaccessでhttpからhttpsへリダイレクトする方法！wwwあり・なし統一も一緒に記述
仙台・宮城の皆さんこんにちは！ 2018年7月にリリースされたGoogle Chromeの新バージョン「Chrome68」では、すべてのhttp接続のページに警告が表示される仕様になりました。どんなにいいコンテンツを作っても「警告」が出てしまっては、信頼もガタ落ちです。 これから益々、サイト全体をSSL化して常時SSLでページを表示することが重要性になります。今日は「htaccessでhttpからhttpsへリダイレクトする方法と、wwwあり・なし統一も一緒に記述」する解説します。 [toc] httpからhttpsへリダイレクト まずは、httpからhttpsへリダイレクトします。 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] </IfModule> これでhttp://andseek.jpにアクセスすると、自動的にhttps://andseek.jpにリダイレクトされます。 wwwあり・なし統一 続いて、wwwあり・なし統一です。例では「wwwなし」に設定する場合です。 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.datena\.net RewriteRule (.*) http://andseek.jp/$1 [R=301,L] </IfModule> これでhttp://www.andseek.jpにアクセスすると、自動的にhttp://andseek.jpにリダイレクトされるようになります。 両方を記述 それでは、両方記述しましょう。 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.datena\.net RewriteRule (.*) http://andseek.jp/$1 [R=301,L] RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] </IfModule> 上記のように記述すれば、http://www.andseek.jpにアクセスすると、自動的にhttps://andseek.jpにリダイレクトされるようになります。 これでURL統一は完璧です。 ちなみにWordPressで記述する際には、注意が必要なので下記のページをご覧ください。 [related id=40 label=WordPressでリダイレクトを記述] おまけ 最初の行にあるIfModule mod_rewrite.cは、何をしているんでしょうか？ <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.datena\.net RewriteRule (.*) http://andseek.jp/$1 [R=301,L] RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] </IfModule> これは利用環境でmod_rewriteが利用できるかどうかを確認しています。「mod_rewriteが利用できる環境ならば・・・」という感じです。 mod_rewriteが利用できない環境でmod_ rewriteのコードを記述するとエラーが発生してしまうので、このようにmod_ rewriteが利用できるか確認を行なっているわけです。 まとめ 冒頭でも書きましたが、これから常時SSLが重要になることは明白です。最近は無料でSSL化できるサービス（Let's Encrypt）も登場し、それを利用できるレンタルサーバーも増えました。 常時SSL化した際は、必ずhtaccessでURLを統一しましょう！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPressの.htaccessが勝手に書き換えられてしまう場合はココをチェック！
仙台・宮城の皆さんこんにちは！ 今日はWordPressの.htaccessについてのお話です。WordPressではパーマリンク設定をすると自動的に.htaccessが生成されます。リダイレクトの内容などはこの.htaccessに加えていくこになるのですが、何度やっても加えた内容がいつの間にか消えてしまいます。 # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress 注目していただきたいのは、1行目の# BEGIN WordPressと11行目の# END WordPressという記述です。この間に記述すると消えてしまうわけです。 なので、リダイレクトの記述などは、下記のような形で# END WordPressの下に記述します。 # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress <IfModule mod_rewrite.c> RewriteCond %{HTTP_HOST} ^www\.datena\.net RewriteRule (.*) http://datena.net/$1 [R=301,L] RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] </IfModule> 上記のように記述すれば、もう消えることはありません さいごに WordPressの.htaccessに何かしら記述を加えた記憶がある場合は、一度チェックしてみてください。 もしかしたら、以前に追加した内容が消えてしまっているかもしれません。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
JavaScriptでリファラ（ユーザーが直前に表示していたページのURL）を取得する方法
仙台・宮城の皆さんこんにちは！ 今日は、JavaScriptで「リファラ」を取得する方法について解説します。 リファラって何？ 確認のためにも、最初にリファラについて簡単に触れておきます。リファラというのは「ユーザーが直前に表示していたページのURL」ということです。 つまり、このリファラを取得すれば、 検索エンジンから流入してきたユーザーだけに、広告を表示！ サイト内の特定のページから移動してきた人だけに、テキストを表示！ みたいなことができるようになります。では具体的な方法を解説していきます。 document.referrerでリファラを取得する javaScritpでは、document.referrerでリファラを取得することがきます。 document.referrer 実際に使う場合は、以下のような感じで使用します。 window.onload = function() { var ref = document.referrer; if(ref.match(/google/)) { //google経由のユーザー向け } else { //それ以外 } }; これは「goole経由でサイトに来てくれた人に特定の処理をしたい！」という場合のコードになります。それでは、1つづつポイントを解説していきます。 まず2行目をご覧ください var ref = document.referrer; document.referrerを変数refに格納しています。 そして肝になるのがこの3行目のref.match(/google/))という条件分岐で使用しているmatchです。 if(ref.match(/google/)) { matchは引数に指定した文字列が含まれていた場合はtrueとなり「配列」を返します。 例では、リファラを格納したrefという変数に「google」という文字列が含まれていたらtrue（配列）を返すという命令です。 /google/の部分の正規表現については、奥が深いので解説は省略しますが、もちろんもっと複雑な条件を使用することもできます。 まとめ リファラを取得すると例で挙げたような処理が可能になります。他には、、、正直使う場面は少ないですが、JavaScriptで「ユーザーが直前に表示していたページのURLを取得できるんだぞ」と覚えておくと何かの時にいろいろなコードと組み合わせて実現したい処理が可能になるかもしれません。知識として覚えておいてもらえると嬉しいです。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPress（ワードプレス）で記事内の画像をサムネイルにする方法！
仙台・宮城の皆さんこんにちは！ WordPressのサムネイルって毎回毎回設定するのって面倒ですよね？ 「記事内からサムネイルを自動で拾ってくれたらいいのに」と考えたことがある方も多いはずです。 いちいちサムネイル画像を設定するのは面倒！ 記事の中の写真をそのままサムネイルに使いたい！ という方には、大変おすすめな方法です。 記事の一番最初の画像を取得する いつものように、function.phpに以下を加えます。 function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ $first_img = "/images/default.jpg"; } return $first_img; } imgタグを順番に取得 6行目のpreg_match_all()で正規表現検索を繰り返して、「imgタグを順番に取得」しています。 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); 最初の画像を取得 7行目で「最初の画像を取得」しています。 $first_img = $matches [1] [0]; 記事内に画像がない場合 「記事内にimgタグが存在していない場合」は、10行でdefault.jpgを$first_imgに入れています。 記事に画像を使っていない場合もきちんと想定されているんです。 if(empty($first_img)){ $first_img = "/images/default.jpg"; } 画像を表示させる 以下のように記述すれば、表示されます。 <img src="<?php echo catch_that_image(); ?>"> 応用編 ここで応用編です。「サムネイルがなければ、記事内の最初の画像をサムネイルにする」という感じにする場合は下記のようになります。 <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('single-thumbnails'); ?> <?php else : ?> <img src="<?php echo catch_that_image(); ?>"> <?php endif ; ?> まとめ 自動で1枚目の画像を拾ってくるなら更新作業も楽になるんではないでしょうか。ブログを長く続けるために、少しでも楽な方法を考えるのは重要なことです。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPressで最終更新日を表示する方法！SEOにも効果あり！
仙台・宮城の皆さんこんにちは！ 今日はWordPressで「最終更新日」を表示する方法を解説します。投稿日ではなく「最終更新日」ですので、ご注意ください。 記事の最終更新日を表示するテンプレートタグ 下記のようにthe_modified_date()を利用すれば、表示させることができます。 <?php the_modified_date() ?> 任意の「日付フォーマット」を使うこともできます。 <?php the_modified_date('Y-m-d'); ?> //2018-08-31 <?php the_modified_date('Y年n月j日 l'); ?> //2018年8月29日 水曜日 これが、基本となります。 記事が更新されていたら更新日を表示するし、更新されていなければ非表示にする ここからちょっと応用となります。 「記事が更新された時だけ、更新日を表示する」には下記のようにします。公開日は必ず表示して、更新日は更新があった場合にだけ表示するという時に使えますね。 <?php if(get_the_time('U') !== get_the_modified_time('U')){ the_modified_date('Y-m-d'); } ?> get_the_timeは投稿時刻を取得できるテンプレートタグです。get_the_modified_timeは最終更新時刻を取得します。一行目にあるif文は「投稿時刻と最終更新時刻が違うならば・・・」という事になります。 記事が更新されていたら更新日を表示し、されていなければ公開日を表示する 続いて、「記事を公開後に更新されていたら更新日を表示し、更新されていなければ公開日を表示」させるようにます。 <?php if(get_the_time('U') !== get_the_modified_time('U')){ //更新されていたら the_modified_date('Y-m-d'); }else{ //更新されていない the_time('Y-m-d'); } ?> まとめ いかがでしたでしょうか。 世の中のブログを見ていると1年以上前の日付が表示されている記事があります。本当に更新していないのかもしれませんが、記事の内容などを見直したりして更新した場合は、投稿日だけを表示させておくのは勿体ありません。 日付が1年以上前のままでは、読んでいる方としては不安になり、どんなに素晴らし記事であっても「この記事本当なの？もう違うんじゃない？」と思ってしまいます。最終更新日を表示することにより、記事に対する信頼性も増し、離脱率や滞在時間も改善されると思います。 是非この機会に「最終更新日」を表示させてはいかがでしょうか。 おまけ 投稿日や更新日を表示させる際には、下記のように<time>タグを利用するのがSEO的にいいみたいです。datetime属性で日時をきちんと教えてあげるのがポイントのようです。 <?php if(get_the_time('U') !== get_the_modified_time('U')){ ?> 最終更新日:<time class="updated" datetime="<?php the_modified_date("Y-m-d H:i:s") ?>"><?php the_modified_date('Y年n月j日 l') ?></time> <?php }else{ ?> <time class="entry-date published" datetime="<?php echo get_the_date("Y-m-d H:i:s") ?>"><?php echo get_the_date('Y年n月j日 l') ?></time> <?php } ?> それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
WordPress（ワードプレス）で新着記事に「NEW」マークをつける方法
仙台・宮城の皆さんこんにちは！ 今日はWordPressの新着記事に「NEW」マークをつける方法についてです。結構簡単にできちゃいますので、WEB担当者の方はご検討ください！ [toc] そもそもNEWマークは必要？ はい、必要です！ 検索エンジン経由で訪れるユーザーは下層ページがランディングになることが多いので、そんなに意識しなくてもいのですが、トップページへ直接来てくれるリピーターに対してNEWマークはとても有効に作用すると思います。視覚的に新しい記事であることが伝わりますので、「まだ読んでいない記事ですよ！」と視覚的に伝えることができます。更に「きちんと更新しているサイト」ということを、これも視覚的に印象づけることができます。 NEWマークのつけかた 日数単位でNEWマークをつける 下記は「3日だけNEWマーク」を付ける場合です。 <?php $days = 3; // NEWマークを表示する日数 $now = date_i18n('U'); // 現在の時間 $entry = get_the_time('U'); // 投稿した時間 $term = date('U',($now - $entry)) / 86400; if( $days > $term ){ echo '<span class="new-mark">NEW</span>'; } ?> お気づきかと思いますが、5行目の「86400」というのは1日の秒数です。ここが肝になります。 この秒数が表示する「日付や時間の単位」になります。上記の場合は、変数$dayの3と合わせて3日間となるわけです。 1週間NEWマークを付けたい時は、$dayを7に設定することになります。 時間単位でNEWマークをつける 下記は「3時間だけNEWマークを付ける」場合です。 <?php $hour = 3; // NEWマークを表示する時間 $now = date_i18n('U'); // 現在の時間 $entry = get_the_time('U'); // 投稿した時間 $term = date('U',($now - $entry)) / 3600; if( $hour > $term ){ echo '<span class="new-mark">NEW</span>'; } ?> 1時間の秒数である「3600」で割ります。変数$hourの3と合わせて3時間となります。 分単位でNEWマークをつける 使うことはないと思いますが、「3分だけNEWマークを付ける」場合です。60秒に変更します。 <?php $min = 3; // NEWマークを表示する分 $now = date_i18n('U'); /// 現在の時間 $entry = get_the_time('U'); // 投稿した時間 $term = date('U',($now - $entry)) / 60; if( $min > $term ){ echo '<span class="new-mark">NEW</span>'; } ?> 1分間の秒数「60」で割ります。変数$minの3と合わせて3分間となります。 さいごに いかがでしたたか？結構簡単ですよね？ 冒頭でも触れましたがリピーターに対して、NEWマークはとても有効です。是非お試しください！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
ChromeでbxSliderのリンクが反応しない時の解決方法！
仙台・宮城の皆さんこんにちは！ 今夜はbxSliderのリンクが反応しない時の解決方法です！「bxSlider」はすごく簡単にスライドショーを作成することができます。有名なjQueryのプラグインなのでご存じの方も多いと思います。 このページに辿りついた人は以下のようなhtmlになっていると思います。 <ul class="bxslider"> <li><img src="img/img01.jpg"></li> <li><a href="/service"><img src="img/img02.jpg"></a></li> <li><img src="img/img03.jpg"></li> </ul> いろいろ検証すると、どうやらデスクトップのChromeだけ、このaにタグが全く反応しないことが解りました。 解決方法 反応しなくなってしまったら、応急処置としてとりあえず以下のようにjavascript部分に1行加えてください。 $(function(){ $('.bxslider').bxSlider({ auto: true, slideWidth: 640, minSlides: 3, touchEnabled: false //変更点 }); }); touchEnabledは初期値ではtrueになっていますが、これをfalseに変更します。これで反応するようになると思います。 ヒント！ touchEnabledは左右のスワイプでの画像切替について設定するためのオプションです。PCの場合はドラッグになります。 これでも反応しなかったら… 最新版をダウンロード bxSliderの公式サイトから最新バージョンをダウンロードして差し替えることで解決する場合が多いです。 slickに切り替えちゃう 同じjQueryのスライダー系のプラグインに「slick」というものがあります。現在はbxSliderよりもポピュラー存在になっている気がします。この機会にslickに切り替えるというのも手です。 まとめ いかがでしたか？今回はChromeのバージョンアップで突然動かなくなったのではないかと推測しています。もし以前に作ったサイトでbxSliderを実装しているサイトがあるならChromeでも正常に動くか試してみてください。リンクが動かないことによって大きな機会損失に繋がっているかもしれません！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
ページ内リンクで特定の場所までスムーススクロールさせる方法。ヘッダー固定の場合も対応可能！
仙台・宮城の皆さんこんにちは！今日はページ内リンクで特定の場所までスムーススクロールさせる方法について解説します。 当サイトも利用してますが、「ページトップ」や「記事の目次」などでよく利用するすることになりますね。 基本的なスクリプト これが基本的なJavaScriptです。2行目の$('a[href^="#"]').click(function()に注目してください。 これは「先頭に#のついたaタグがクリックされたら…」という命令になります。 $(function(){ $('a[href^="#"]').click(function(){ //スクロールのスピード var speed = 500; //リンク元を取得 var href= $(this).attr("href"); //リンク先を取得 var target = $(href == "#" || href == "" ? 'html' : href); //リンク先までの距離を取得 var position = target.offset().top; //スムーススクロール $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); htmlは以下のような感じで先頭に#をつけてdivタグの名前を設定すれば、いいだけです。 <div id="header">ヘッダー</div> 略 <div id="footer"> <a href="#header">トップに戻る</a> </div> もちろんブラウザの一番上に戻る時だけ使うだけじゃありません。 目次などで、ページ内の途中にスクロールさせる場合でも、使用することができます。 <div id="mokuji"> <ul> <li><a href="#contents1">コンテンツ1</a></li> <li><a href="#contents2">コンテンツ2</a></li> <li><a href="#contents3">コンテンツ3</a></li> </ul> </div> <div id="contents1"> コンテンツ1の内容 </div> <div id="contents2"> コンテンツ1の内容 </div> <div id="contents3"> コンテンツ1の内容 </div> ヘッダーが固定の場合 当サイトもそうですが、ヘッダーが固定して表示される場合は上記の方法だと、先頭の部分がヘッダーと重なって隠れてしまいます。 ということは、ヘッダーの高さを引いて距離を取得する必要があります。 $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); //ヘッダーの高さを取得 var header = $('header').height(); //ヘッダーの高さを引く var position = target.offset().top - header; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); 9行目でpositionに目標を代入する際にtarget.offset().top - headerでヘッダーの高さを引いてから代入しています。 まとめ ページ内をアンカーリンクで移動させる場合、パっと移動させるよりもスムーズにスクロールさせて移動する方が、ユーザビリティの観点からも親切だと思います。 導入していない方は、是非この機会に検討してください！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
フォームでtextareaのリサイズ機能を制限する方法
仙台・宮城の皆さんこんにちは！ 今回はcssでtextareaのリサイズを制限する方法について解説します。 ChromeやFirefoxでは、textareaの大きさをユーザ側で自由に設定（右下の角をドラッグ）できるようになっています。 リサイズすることによって、レイアウトが大きく崩れたりすることもあります。崩れるといっても、そのユーザーだけに起こることなので、そんなに気にすることもないと思いますが、やはり作っている側としては気になってしまいますよね。 resizeプロパティで制限 そんな時は、resizeというプロパティを使うことによって制限することができます。 横のみリサイズ可 resizeにhorizontalを指定することによって、横方向のみリサイズ可にすることができます。 textarea { resize: horizontal; } 縦のみリサイズ可 縦方向のみリサイズ可にしたい場合は、resizeにverticalを指定します。 textarea { resize: vertical; } 縦横ともにリサイズ不可 縦横両方をリサイズ「不可」にしたい場合は、resizeにnoneを指定します。 textarea { resize: none; } 最小値と最大値を指定 縦と横の最小値、最大値をしていすることで、リサイズを制限することもできます。 textarea { min-width: 250px; max-width: 500px; min-height: 100px; max-height: 300px; } まとめ いろんなサイトを作っていると、上司やお客様からこういった細かい指示が来ることがあります。 「気にすることはない」と一蹴することもできますが、こういった指示にも丁寧に応えることがプロですよね！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！