スタッフブログ

menu

【コーディング用語集】Wiki

2020年9月7日: Wiki（ウィキ）とは、Webサイトのコンテンツ管理システム（CMS）の種類の一つで、簡便な記法を用いて文書の整形や装飾が可能なもの。
Webサーバ側にソフトウェアを導入すれば、Webブラウザで簡単にWebページの発行、編集、削除ができる。

【コーディング用語集】PHP

2020年9月3日: PHP(ピーエイチピー)とは、動的にWebページを作ることができるスクリプト言語。
HTMLに埋め込むことができ、Web開発で頻繁に使われています。
お問い合わせフォームなどの実装や、ECサイトの開発などができます。
また、WordPressで作ったWebサイトやブログをPHPでカスタマイズすることも可能です。

【コーディング用語集】ブラウザ

2020年9月2日: もとになる英単語は「閲覧する」という動詞のbrowse。その名詞形であるbrowserが閲覧ソフトという意味になり、ブラウザと呼ばれています。
「Webブラウザ」として、インターネット上のサイトを見る時に使用するソフトウェアのことを指します。
主に以下のWebブラウザがあります。
Google Chrome（グーグルクローム）
Firefox（ファイヤーフォックス）
Microsoft Edge（マイクロソフトエッジ）
Internet Explorer（インターネットエクスプローラー）
Safari（サファリ）

便利なショートカットキーをご紹介

2020年8月31日

WindowsとMacのパソコン操作を簡単にするキーボード機能(ショートカットキー)についてご紹介します。数あるショートカットキーの中から、今回は「ウィンドウ操作」にフォーカスを当ててお伝えしていきます。

ウィンドウ操作を簡単にするショートカットキー
覚えておくと便利なショートカットキーを4つご紹介します。気になった操作は是非試してみて下さいね。

■ 開いているウィンドウを切り替える

Windows：「Alt + Tab」
Mac：「command + Tab」
このショートカットキーを使うと画面中央に開いているウィンドウの一覧が表示され、Tabキーを押すごとにウィンドウを切り替えることが出来ます。例えば、WordやExcelで書類を作成しながら、ウェブブラウザでインターネットの情報を調べる時などに重宝します。マウスを使わず、キーボード操作のみでウィンドウを切り替えることが出来るため、作業スピードの向上に繋がります。

■ ウィンドウを閉じる

Windows：「Ctrl + W」
Mac：「command + W」
フォルダやファイルを閉じます。

■ ウィンドウを隠す

Windows：「Windowsキー＋ D」
Mac：「command + H」
Windowsの場合、すべてのウィンドウを最小化してデスクトップを表示します。Macの場合は、選択中のウィンドウを隠します。背後に人が来た時など、他の人に見られたくない作業をしている時に重宝するショートカットキーです。

■ アプリケーションの終了

Windows：「Alt + Space を同時に押してから C を押す」
Mac：「command + Q」
Windowsでは、上記の方法以外にもアプリケーションを終了するショートカットキーとして「Alt + F4」があります。「Alt + F4」は、一度のキー操作でアプリケーションを終了することが出来ますが、誤ってアプリケーションを終了させない為にも二段階の操作が必要な「Alt + Space を同時に押してから C を押す」というキー操作をオススメします。こちらの方法は「Alt + Space」を押すと、終了させたいアプリケーションのファイルメニューが開きます。そのため、確実に「終了する」という意思を持って操作できるため安心です。

まとめ
今回は、「ウィンドウ操作」に関するショートカットキーを4つご紹介しました。この他にもショートカットキーには、ExcelやWord等のソフトで使えるものや、パソコンの基本操作で使えるもの等、130種類以上あります。

ショートカットキーを使いこなせるようになると時間の短縮だけでなく、無駄な動きが少なくなるため肩こりの軽減にも繋がります。また、マウスとキーボードを行き来する必要がなくなるため、今まで以上に集中して作業に取り組むことが出来ます。ご興味のある方は、是非調べてみて下さいね。

【FAQ】コンタクトページは3段階ありますが3ページ分の料金でしょうか？

2020年8月29日

【お客様からのご質問】
コンタクトページは入力・確認・完了と3段階ありますが、
新規3ページ分という料金でしょうか？
—————————

【回答】
コンタクトのTOP1ページ分と、完了ページの1ページ分のコーディング費用が必要です。

Retinaとは？

2020年8月17日

一般的にRetinaと言うと MacやiPhone、iPadなどのApple製品に搭載された高解像度ディスプレイのことを指します。

Retinaディスプレイの特徴
Retinaディスプレイは、肉眼では認識することが出来ない細かい画素を表示することが可能で、従来のディスプレイの倍の解像度を再現することが出来ます。そのため、Retinaディスプレイに映るコンテンツは細部まで鮮明に美しく描写されます。

このように、Retinaディスプレイの特徴は、従来のディスプレイの倍以上の解像度で画面描画する点です。
解像度には、「ppi（pixels per inch：ピクセルパーインチ）」という単位が使用されます。ppiは、1インチ（2.54cm）の中に含まれるピクセルの数を表します。この「ppi」の値が高ければ高いほど、高解像度ということになります。

Retinaディスプレイ搭載前のiPhone 3Gは 163ppi でしたが、Retinaディスプレイを搭載したiPhone 4は 326ppi という高密度な画素数になっています。Retinaディスプレイを搭載することにより、解像度が倍以上に向上し、より色鮮やかな表現が可能になっているのです。

Webサイト制作において、Retinaディスプレイ対応で注意する点
Retinaディスプレイは通常の倍の密度で表示するため、画像は「端末の横幅」×「2倍以上」のサイズが必要になります。これまで通りの画像サイズでは、表示がぼやけてしまうため注意が必要です。

Webサイトのデザイン作成で注意する点について、さらに詳しい内容は当スタッフブログの「スマホサイトのデザイン作成で注意する点について」に掲載しています。ご興味のある方は、是非ご覧になってください。

スマホサイトのデザイン作成で注意する点について

まとめ
今回は、Retinaディスプレイについてご紹介しました。
高解像度ディスプレイと言えば「Retina」ですが、実はRetina以外にも高精細ディスプレイはあります。
例えば、WindowsやAndroidでも、高解像度で美しいグラフィックが特徴のデバイスが増加しています。ところが、画面が精細になった反面、眼精疲労に悩むという方が増えています。この場合、画面の表示スケールを自分好みに調整することで眼精疲労を緩和することが出来ますので、「画面の表示スケール」についてご興味のある方は是非調べてみて下さいね。

WordPress「お問い合わせフォーム」のプラグインについて

2020年8月10日

Webサイトの運営に「お問い合わせフォーム」の設置は欠かせませんよね。そこで今回は、WordPressに「お問い合わせフォーム」を追加する時に人気のあるプラグインを2つご紹介します。

■Contact Form 7

日本ではお問い合わせフォームというと、入力内容の確認画面もセットで存在するイメージがありませんか？しかし海外では、お問い合わせフォームの入力後は、確認画面がないことが一般的です。このような文化の差もあり、Contact Form 7は日本国内だけではなく、海外でも使用者の多いプラグインとなっています。

▷ Contact Form 7：https://contactform7.com/ja/

■MW WP Form

コーディング初心者の方や、HTMLを触るのが苦手な方には、デザインを管理画面で作成できる有料の追加アドオンがあります。こちらの公式サイト（MW WP Form Generator）に詳細がありますので是非チェックしてみて下さい。

▷ MW WP Form：https://plugins.2inc.org/mw-wp-form/

「Contact Form 7」と「MW WP Form」の共通点

「Contact Form 7」と「MW WP Form」の違い

まとめ

WordPressに追加する「お問い合わせフォーム」のプラグインを2種類ご紹介しました。
1つの画面でお問い合わせの送信を完了させたい場合は「Contact Form 7」、入力内容の確認画面が必要な場合は「MW WP Form」、というように2つのプラグインを使い分けても良いかもしれませんね。

Gitとは？

2020年8月3日

Git（ギット）とは、分散型(※1)バージョン管理システムのことです。
Gitは、Linuxのプログラムソースコードを管理するために開発されましたが、最近ではプログラマーだけでなく、WebデザイナーやWebライターの方にも使用されています。そこで今回は、「Gitで出来ること」にフォーカスを当ててご紹介します。

※1：分散型とは、複数のPCに分散して機能を持たせることを意味します。

ファイル管理の悩み

Gitを使用しないファイル管理では、編集前のファイルをコピーしてバックアップ用のファイルを作ることが一般的です。しかし、バックアップファイルの作成には手間が掛かり、ファイル数が増えてくると管理が煩雑になります。また、チーム作業では他人の編集内容を間違って上書いてしまう恐れもあります。このように、ファイル管理にはそれぞれ悩みがあるのではないでしょうか。

Gitで出来ること

Gitでは、「誰が、いつ、どんな変更」をしたのか確認できます。さらに、過去のファイル内容に戻したり、変更内容の差分を確認することも可能です。差分は、「変更前」と「変更後」を並べて見ることができ、一目瞭然で変更箇所が分かります。

そのため、ローカル環境にバックアップファイルを作成する必要がなくなり、手間が減ります。
チーム作業では、他人が編集したファイルを上書きしようとすると警告が出るため、誤って編集内容を上書きするミスを軽減できます。また、Gitはテキストデータだけでなく、さまざまな種類のファイルを管理できます。

このように、Gitを使うとファイル管理がとてもラクになります。しかし、Gitを使っていてもファイル管理は慎重に行うよう心掛けましょう！

Gitのメリット

Gitのメリットは、次の点が挙げられます。

まとめ

Gitは、プログラマーに限らず、Webデザイナーにも使用者の多いバージョン管理システムです。GitはHTMLやCSSのみならず、画像も管理できる点が嬉しいと感じています。興味をお持ちの方は、是非導入を検討してみてはいかがでしょうか。

相対パスと絶対パスについて

2020年7月27日

まず始めに「パス」とは？
「パス」とは、簡単に言うとファイルやディレクトリが置いてある住所のことです。
一般的に「パス」は、ファイルやディレクトリの場所を指します。「パス」の英語表記は「path」で、直訳すると「道」という意味になります。

相対パスについて
相対パスは、「現在の場所」を基準として、ファイルやフォルダの場所を伝える方法です。そのため、相対パスはファイルやディレクトリを置く場所によって内容が異なってきます。

Windowsを例にすると、「C:\ProgramData\ABCsoft」は、Cドライブの中の「ProgramData」フォルダの中の「ABCsoft」フォルダを指します。住所と同じで、一番始めに書く部分が一番大きな枠組みになります。

上記の「ABCsoft」フォルダの中に「sample.txt」があるとします。この場合の相対パスの書き方を見ていきましょう。
書き方は3通りあります。

・現在の場所はCドライブにいます。そこから「ProgramData」の中にある「ABCsoft」の中の「sample.txt」
./ProgramData/ABCsoft/sample.txt
・現在の場所は「ProgramData」にいます。そこから「ABCsoft」の中にある「sample.txt」
./ABCsoft/sample.txt
・現在の場所は「ABCsoft」にいます。その中にある「sample.txt」
./sample.txt

お分かりいただけたでしょうか？
このように「現在の場所」を基準として、パスの内容が異なるのが相対パスになります。

絶対パスについて
絶対パスは、相対パスと異なり「現在の場所」は関係ありません。どこを参照していても、記載するパスの内容は同じになります。

Windowsを例に、「C:\ProgramData\ABCsoft\sample.txt」について見ていきましょう。
現在の場所が「ProgramData」でも、「ABCsoft」でも「sample.txt」の絶対パスは「C:\ProgramData\ABCsoft\sample.txt」になります。

ご覧のように「絶対パス」はファイルやディレクトリの場所を一番最初から説明した「完全な住所を伝えるもの」という点がポイントです。少々ややこしいですが、「絶対パス」と「相対パス」をセットで考えるようにして下さいね。