サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
rfs.jp
概要 Atomは見栄えから操作方法まで様々なカスタマイズができるのが特徴ですが、設定ファイルが各所に散らばりやすく、環境移行の妨げになりやすい面があります。 最初から設定ファイルをGitで管理するようにしておき、Githubに専用のリポジトリを追加しておくと、スムーズな移行が可能になり、バックアップ対策にもなります。 Githubに新規リポジトリを作成 まずはGithubにAtom設定ファイルようのリポジトリを作成しましょう。 リポジトリ名をatomとすると、下記のようなクローン用のURLが用意されます。 https://github.com/ユーザ名/atom.git ローカルでリポジトリを作成 .gitignore の編集 Atomをインストールするとユーザのホームディレクトリ(一般的なWindows環境であればC:\Users\ユーザ名)に .atom というフォルダが作成されますが
文字列の長さによってレイアウトが崩れるような状況の際、レスポンシブ対応のページだとスマホで表示できる文字数が違っていたりするので、サーバサイドで文字列制限かけるのがベストな方法とは言えないようなケースがあります。 ここではクライアントサイドにて、表示幅を超える文字数の場合は省略して「…」を最後に追加する方法を紹介します。 1行の場合 -text-overflow 例えば、表示枠が1行固定であればtext-overflowの設定で実現可能です この方法はie6から実装されており、今あるほとんどのブラウザで問題なく表示されます。 HTML部分は特別な設定はありません。 ここではCSSからアクセスできるようにクラス名を指定しています。 <div class="box-read"> 秋の野駆けでございます。上目黒へお出かけになりまして、あっちこっちと飛び回った末、野立ち所、まぁ、休憩所ですが、これ
Github FlowはGitのブランチ管理をルール化したシンプルなワークフローで、短いスパンでデプロイをするようなサイトに最適です。既発のGit Flowと違ってインストールの必要もなく、ルールも簡単なため導入コストが低く抑えられます。 Github Flowは必須ブランチがmain以外になく、そのほとんどがmainから作業ブランチを作成、作業終了後に作業ブランチをmainにマージといったシンプルな流れになります。 確認用ブランチが存在しないためシンプルなブランチ管理になっており、デプロイや修正が素早く手軽に行うことができます。 ※もともとはmasterブランチが使われていましたが、ポリティカル・コレクトネス的な観点から現在はmainブランチがデフォルトです。 作業用ブランチを作成する際は、短いスパンでデプロイすることを目指し、最小限の作業範囲で作成します。 作業範囲を狭めることにより、
tagプラグインの概要 AtomでHTMLをコーディングする際はEmmetがかなり便利ですが、何かの拍子に閉じタグを挿入したいときなどがあります。 そのようなときは、HTMLの閉じタグを自動で挿入してくれる tag という名前のプラグインが便利です。 tagプラグイン Atomにtagプラグインをインストールする tag は下記方法でインストールします。 [Ctrl] + [,] で設定画面を開き、左メニューの「+インストール」をクリックして「パッケージのインストール」画面を開きます。 テキストボックスに tag と入力し[パッケージ]ボタンをクリックします。 検索結果に表示されたパッケージ、テーマから目当てのものを[インストール]ボタンを押してインストールします。 下記のように開始タグを書いた後に、 <div> </ まで入力するか、[Ctl]+[Alt]+[.]で自動で閉じタグが挿入さ
git archive コマンドの使い方 git archiveコマンドは、Git管理化のファイル一式をアーカイブします。普通にアーカイブファイルを使っても同じことができますが、git archiveの対象ファイルはGit管理化のファイルに限定されるのと、差分だけを抽出することができるので便利です。 git archiveの簡単な書式例 git archive [コミットIDなど] -o [ファイル名] [コミットIDなど]にはコミットIDやタグ名、ブランチ名などが指定可能です。 現在のブランチの最終コミットのツリーを archive.zip というファイル名でアーカイブするには次のようにします。 git archive HEAD -o archive.zip -o オプションはアーカイブファイル名を指定します。対応しているアーカイブの形式は tar、zip です。 コミットの差分をアーカ
除算(/)はCSSでも使われているため、そのままだと四則計算として扱われないケースがあります。 変数や関数と一緒に使われていたり、括弧で囲まれていると演算子として使われるようになります。 p { $width: 1000px; font: 10px/8px; // 変数無しでこの書き方だと計算されない font: (italic bold 10px/8px); // 括弧で囲うと計算される width: $width/2; // 変数と数値は計算される height: (500px/2); // 括弧で囲うと計算される margin: round(1.5)/2; // 関数が使われている場合は計算される } 出力結果は下記のようになります。 p { font: 10px/8px; font: italic bold 1.25; width: 500px; height: 250px; ma
Gitには特定のアクションに対してスクリプトを実行するためのフック(hook)という機能が用意されています。 このフックを利用すれば、ローカルでプッシュした後、リモート側で自動的にデプロイまで処理させるといったことが可能になります。 ローカルで開発し、ステージングと本番環境があるような中・小規模のサイトであれば、ステージングまではプッシュと同時にデプロイまで自動化したいケースはままると思います。そのようなとき、Gitのサーバサイド・フックが簡単で効果的です。 リポジトリを作成すると、フック用のサンプル用スクリプトがGitディレクトリのhooksに格納されます。 通常は.git/hooksにあります。 .git/hooks以下のサンプルスクリプトを表示 ls .git/hooks/ applypatch-msg.sample commit-msg.sample post-update.sam
git-flowはだいたい次のような書式になります。 git flow ブランチ種別 コマンド ブランチ種別には開発・改修用であればfeature、リリース用であればrelease、バグ修正であればhotfixを指定します。 準備 git-flowのブランチモデル git-flowでは、下記のブランチを利用します。 masterブランチ リリースしたソースコードを管理するためのブランチです。このブランチで直接作業することはありません。 developブランチ 開発の軸になるブランチです。featureブランチなど他のブランチで行った作業をマージします。 featureブランチ 分岐元: develop マージ先: develop 新機能の追加や改修などを行うブランチです。タスクごとにfeatureブランチを作成し、作業を行います。 masterやdevelopのように永続して存在せず、使い
Windows版git-flowのインストール Windowsでgit-flowを利用する場合、Gitの他に依存ライブラリのインストールやスクリプトの実行が必要です。 Gitのインストール 当サイトのGitHubとGitを使ってみるなどを参考にmsysGitとTortoiseGitをインストールしてください。 依存ライブラリのインストール git-flowで必要なライブラリをGitのフォルダにコピーします。util-linux-ng for Windowsから、Binaries、DependenciesのZIPをダウンロードしてください。 ※薄い青の背景色の個所がBinariesとDependenciesです。 ライブラリのインストールは手作業で必要なファイルをGitフォルダにコピーします。 まず、BinariesとDependenciesのZIPファイルをダウンロードしたら、それぞれのZ
CSSやJavaScriptの読み込みはSTYLEタグやSCRIPTタグをheader.phpなどに直接書くこともできますが、WordPressではfunctions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックを使って読み込むことが推奨されています。wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。 ファイルをキューに登録する関数 wp_enqueue_style() – CSSファイルをキューに登録wp_enqueue_scripts() – JavaScriptファイルをキューに登録 wp_enqueue_script関数 wp_enqueue_scrip
xmlrpc.phpファイルとその攻撃の概要 WordPressにはスマホアプリなどのXML-RPCを使った更新にも対応していて、/xmlrpc.phpファイルが用意されています。 ただし、このファイルはDDoS攻撃、ブルートフォースアタックの対象にされてしまうことがあり、対象にされている間はサーバの動作が重くなるか、もしくはアクセスできなくなり、ログにはアタックの痕跡が大量に出力されます。 アクセスログに特定のIPアドレスから大量のアクセスがあったり、特に下記のようなログが大量に出力されている場合、DDoS攻撃やブルートフォースアタックの対象にされている可能性があります。 アタックされているときのApacheログ ***.***.***.*** - - [01/Jun/2016...] "POST /xmlrpc.php HTTP/1.1" 200 394 "-" "Mozilla/5.
INSERTを使って新しいレコードを挿入してみましょう。SELECTと同じく使用頻度が高く、しかもその構文はとてもシンプルです。初めてデータを操作するときは緊張するものですが、とても簡単ですからまずはやってみましょう。 INSERTは、テーブルに新しいレコードを挿入します。INSERTには、新しいレコードを挿入するために、VALUESとSETの2種類の構文が用意されています。VALUESの場合は値をテーブルを構成する全フィールドに対応するように順番に指定し、SETはフィールド名と値のペアで必要な分だけ指定していきます。 INSERT ... VALUES構文 INSERT ... VALUES構文でレコードを挿入するための基本的な構文は次の通りです。 INSERT INTO テーブル名 (フィールド名 , フィールド名 ,...) VALUES(値 , 値 ,...); テーブル名の後に、
概要 ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。 デモ ダウンロード ※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。 HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。 HTML <header> <h1 id="site-logo">smart</h1> </header> <main id="main"> </main> スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。 あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。 スクロール位置の取得は scrollTop() を使います。 $(window).scrollTop() CSSはHEADE
> でネストを作成 > を使ってULの中にLIを作成するといったネストが簡単に作成できます。 ul>li 展開後は下記のとおりです。 <ul> <li></li> </ul> + で同階層に要素を作成 同階層に複数の要素を追加したい場合、下記のように記載します。 div>h1+p 展開後は下記のとおりです。 <div> <h1></h1> <p></p> </div> 子要素を含めて作成 UL、SELECTなど子要素がある要素は + で子要素付きで作成することができます。 ul+ dl+ select+ table+ 展開後は下記のとおりです。 <ul> <li></li> </ul> <dl> <dt></dt> <dd></dd> </dl> <select name="" id=""> <option value=""></option> </select> <table> <tr>
例 .flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; } stretch flex-start flex-end center space-between space-around Flexアイテム flex-grow -Flexアイテムの伸長率 flex-growプロパティは、Flexアイテムの伸長係数(伸びる倍率)を設定します。 Flexコンテナに空いた空間がある場合、Flexアイテム毎のflex-growプロパティの値を元に、余白をうめるように自動的に広さが調整されます。 値に指定できるのは単位を含めた数値で、マイナスの値は無効です。 デフォルト値は0になります。 div{ -webkit-flex-grow: 0; flex-grow: 0; } div:fi
config.rb の概要 Compassを利用するには config.rb と呼ばれる設定ファイルが必要です。 CompassやCompassに対応したツールであればデフォルト設定済みのファイルを出力してくれるので、必要な項目を変更するだけで使える用になります。 下段で必要最低限の設定を紹介します。 config.rb のデフォルトの内容 ツールを使って生成される config.rb の内容は下記のようになります。 require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir
Compassの概要 SassのMixin機能やインポートは自分で用意することもできますが、すでに様々なコードが配布されています。 今回紹介する Compass はよく使うMixinが多数用意されており、さらに便利な機能が多数搭載されています。 ここではCompass の機能から使い方までを紹介します。 Compassの主な機能 CompassはCSS作成作業を効率的にするよう設計されたSassフレームワークです。 Compass はSassのMixinと関数を多数ライブラリ化しており、その他様々な機能を提供しています。 たとえば、リセットやグリッドレイアウト、バーティカルリズムなど多数のデザインパターンを簡単に導入できたり、CSSスプライト機能や、開発と本版環境でのURLを違いを簡単に処理するためのアセットURL機能などもあります。 Compassの使用例 compassモジュールの読み
Remote-FTPパッケージのインストール Remote-FTPパッケージ は Atom から直接 FTP 接続してファイルをアップロードしたり、ダウンロードするための機能を提供します。 まずは環境設定画面([Ctrl] + [,])から Remote-FTP を検索し、検索結果に表示された Remote-FTP パッケージをインストールしてください。 Remote-FTPパッケージの設定 次に接続の設定を行います。 接続の設定は1接続のみなので、複数のサーバを切り替えて使いたい場合は切り替えるたびに設定を書き換える必要があります。 接続の設定はAtomのメニューから[パッケージ]-[Remote-FTP]-[Create SFTP config file]を選択します。 FTP接続の場合は[Create FTP config file]の方を選択します。 メニューを選択するとデフォルト
スニペットの使い方 Atomにはデフォルトでスニペットという便利な機能が用意されています。スニペットとは入力補完候補のことで、この機能を使うと頻繁に使うコードなどをショートカットキーで簡単に呼び出せて便利です。 たとえばHTMLファイルをAtomで開き、「textarea」と入力すると次のようにコードヒントが表示されます。 ここで[Enter]を押して確定すると、次のコードが挿入されます。 <textarea name="name" rows="8" cols="80"></textarea> スニペットのフォーマット Atomにはデフォルトで様々なスニペットが登録されていますが、拡張して新しいスニペットを追加したり、既存のスニペットを変更することができます。Atomのメニューから[ファイル]-[スニペットを開く]を選択すると、スニペットを編集するためのファイルsnippets.csonが
CONTACT WITH RHYTHMFACTORY リズムファクトリーはホームページの制作会社です。 ホームページ制作に関するご要望・ご相談はこちらからどうぞ。
スニペットの拡張 Emmetに用意された多数のスニペットは変更や削除、追加が可能でです。 スニペットの設定ファイルを直接変更することもできますが、この方法だとバージョンアップで設定が上書きされてしまったり、設定の共有がしにくいという欠点があります。 Emmetには別途拡張ファイルを用意して、拡張したい項目のみ記述することができますので、今回はこちらを紹介します。 拡張用のファイルを作成する前に、そのディレクトリの場所を指定する必要があります。 変更方法は以下の通りです。 [Ctrl] + [,] で設定画面を開き、左メニューの「パッケージ」をクリックして「インストール済みのパッケージ」画面を開きます。 テキストボックスに emmet と入力します。 検索結果に表示された emmet の枠内にある[設定]ボタンを押します。 Settingsの[Extensions Path]に任意の拡張用デ
git cherry-pickはローカルリポジトリに登録された任意のブランチのコミットを適用します。 IDが657150dのコミットを適用 git cherry-pick 657150d 例として、developブランチの1つ前のコミットのみをmasterブランチにコミットします。 ・欲しいコミットがあるdevelopブランチに切り替える git checkout develop ・最新の2件のコミットを確認 git log -oneline -2 602f68d Bファイル削除 657150d Aファイル追加 ・masterブランチに切り替える git checkout mater ・特定のコミットのIDを指定 git cherry-pick 657150d リモートにあるブランチをcherry-pickしたい場合、まずはfetchしてローカルリポジトリにコミットを取り込みます。 git
検証環境 コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザ、端末を明確にします。 表示確認ブラウザの例 Windows環境 制作時に最新のGoogle Chrome制作時に最新のMozilla Firefox 製作時に最新のEdgeMicrosoft Internet Explorer 11以上 Macintosh環境 制作時に最新のSafari スマートフォン環境 Android、iPhoneは発売から3年以内の端末で確認 ウェブ・アクセシビリティ ウェブ・アクセシビリティとは、「高齢者や障害者など心身の機能に制約のある人でも、ウェブで提供されている情報にアクセスし利用できること」を意味します。ウェブ・アクセシビリティについてはWCAG (Web Content Accessibility Guidelines)という指針がW3Cによっ
JavaScriptの概要 JavaScriptはブラウザ上で実行される人気のスクリプト言語です。アニメーションやインタラクティブなどの仕掛けのあるサイトのほとんどには、JavaScriptが使われています。JavaScriptが使われている使用例をいくつか挙げてみましょう。たとえばテキストボックスへの入力途中で検索候補を表示したり(この機能を検索サジェストと呼びます)、ロールオーバーなどで関連した外部ファイルを読み込んでモーダルウインドウを表示したり、スクロールに連動して画像や文字をフェードインやスライドなどのアニメーションで表示したり、これらの動的な機能はJavaScriptによって実装されています。 JavaScriptは他の言語と比べるとプログラムの初心者でも比較的簡単に扱えるように設計されています。学習サイトや書籍が多いのも初心者にとっては大きな利点ですね。まだまだJavaScr
UPDATEは、レコードを更新するための構文で、すべてのレコードを一括更新、もしくは条件式を満たす特定のレコードだけを更新することができます。使い方は、INSERT構文と同様にSET句で更新するフィールドと値を指定します。 UPDATEで特定のレコードのみを更新対象にする場合は、WHERE句に条件式を設定します。 条件に当てはまるレコードが存在しない場合は更新されませんが、文法的に正しいのでエラーにはなりません。 単一テーブル構文 UPDATE [LOW_PRIORITY] [IGNORE] テーブル名 SET フィールド名=値, [フィールド名=値, ...] [WHERE 条件式] [ORDER BY ...] [LIMIT 値]
複数ファイルを対象にしたファイル内容の検索方法を紹介します。 比較的簡単な方法は、ファイルを探し出すことができるfindコマンドと、ファイル内から指定した文字列を検索するgrepコマンドを組み合わせます。 find . -name "*" | xargs grep 検索文字 例えば、現在のディレクトリ以下にあるPHPファイルを対象に、「Auth」が記述されたファイルと行を出力するには以下のようになります。 find . -name "*.php" | xargs grep Auth findでマッチした.phpファイル一式をxargsコマンドが受け取り、それをgrepの引数に渡し、Auth という文字列を検索しています。 それそれのコマンドに多くのオプションがあるので、調べればいろいろと便利で柔軟な検索ができると思います。
顧客テーブルの性別には"男性"と"女性"という属性がありますが、ここでは、それらの値を数値に対応させてフィールドに格納しています。値が1の場合は男性、値が2の場合は女性を意味します。 性別のように、いくつかの決まった文字列が複数のレコードで繰り返し使われる場合、一般的に、その文字列を数値と対応させて、フィールドには数値の方を格納するといった方法がよく使われます。理由としては、文字列で管理するよりも、数値で管理したほうがデータ容量が少なくて済み、検索処理で発生する負荷を軽減させることができるからです。 SELECT命令文で全レコードを選択 SELECT命令文を使ってテーブルに登録された全レコードを選択する場合は、SELECTの後に続くアスタリスク( * )を指定し、FROMで表示対象のテーブル名を指定します。 SELECT * FROM テーブル名; アスタリスク( * )は全フィールドを意
次のページ
このページを最初にブックマークしてみませんか?
『プログラミングとサイト構築の情報が集まるウェブマガジン "SMART"』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く