git コマンドで差分納品 zipを作る (かつ、不要ファイルは含めないようにしたい) ｜ Tips Note by TAM
2017.06.22 git コマンドで差分納品 zipを作る (かつ、不要ファイルは含めないようにしたい) 受託案件あるあるなのですが、普段の開発では git でコード管理していても、納品は zip ファイルにまとめて渡さなければならないことがありますね。gitでは、コマンドの組合せで差分の zip ファイルの作成もさくっと行えますので、その方法をご紹介いたします。 また、「開発時は git管理しているけど納品物には含めたくない」というファイルがある場合も、.gitattributes ファイルの設定を組み合わせることで zipから除外することが可能です。(たとえば sass ファイルだったり、テストデータだったり) [TL;DR] 結果のコマンド 説明が長くなりそうなので最初に結果のコマンドを書いておきます。 git archive master --format=zip -o 出力フ
pushStateでブラウザの履歴を追加する ｜ Tips Note by TAM
Ajaxで動的にコンテンツを入れ替えるようなWebページでも、pushState、popStateを活用すると、履歴を追加し、ブラウザバックに対応することができるらしい。ということで、調べたことを簡単にまとめました。 ●pushStateとは HTML5から追加されたHistory APIのメソッドで、ページ遷移なしでスタックのみを積む（ブラウザの履歴を追加する）ことが出来ます。 使い方は、下記のように、「第1引数 state」、「第2引数 title」、「第3引数 URL（省略可能）」の3つの引数を指定します。 history.pushState(state, title, url); ・state 履歴に関連付する任意のオブジェクトを渡すことができ、そのオブジェクトはpopstateイベントハンドラから 参照することができます。 ・title 履歴のタイトルを指定できるようですが、現在
【WordPress】プラグインCustom Field Suiteで管理画面をすっきり見せるための工夫 ｜ Tips Note by TAM
2016.02.05 【WordPress】プラグインCustom Field Suiteで管理画面をすっきり見せるための工夫 オリジナルのカスタムフィールドを設定する場合、プラグイン「Custom Field Suite」を使用する機会が多くなってきました。 今回はCustom Field Suiteに標準で搭載されている機能を活用して管理画面をすっきり見せるために工夫している点をご紹介したいと思います。 カスタムフィールドが多い場合はタブ機能を使う Custom Field Suiteのフィールドタイプには「タブ」という機能が用意されています。 タブ機能を使うことで、カスタムフィールドをカテゴライズすることができます。 カスタムフィールドの数が多くなってしまう場合は、フィールドをズラーっと羅列するのではなく、タブ切り替えですっきり見せる工夫をしています。 同じフォーマットのカスタムフィ
iOSのSafariのWebインスペクタを使ってみる ｜ Tips Note by TAM
SafariのWebインスペクタ for MAC ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。 ご利用の手順 まず、iPhone側の準備としては以下の通りになります。 ホーム画面から、「設定」→「Safari」を開きます。 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。 次に、PC側の設定。 MacからSafariを立ち上げます。 Safariのメニューから「環境設定」を開きます。 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。 メニューバーに「開発」が追加されていることを確認
EJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す ｜ Tips Note by TAM
大量の商品データをHTMLに挿入する際、JSONファイルとEJSを使用して楽にHTMLに書き出すことができました！ EJSとJSONを使用してよかったこと EJSの見た目がHTMLだからすぐ使えた JSのfor文でHTMLの繰り返しの記述を書かなくなって楽＆見た目すっきり 商品データ（名前・商品詳細・画像パス・URLなど）1ファイルで管理できて修正が楽 というわけでめっちゃラクチンですわ≡≡≡≡(┐「ε:) EJSとは 前回Jade(Jadeのテンプレートをextends&blockで継承したら便利に開発できた)を紹介したのですが、EJSもテンプレートエンジンの1つです Embedded JavaScriptの略で見た目はHTMLなのですが、JavaScriptのような書き方もできて、最終的にはHTMLになって生成してくれます Jadeと同じくheader/footerをモジュールに分けて
GoogleAnalyticsのディメンションを複数設定したい ｜ Tips Note by TAM
まず始めに、GoogleAnalyticsの「ディメンション」について、簡単にご説明します。 ディメンションとは分析軸の事です。 分析する際は、ディメンション（分析軸）を決めて各指標（「セッション」「PV」など）を見ていきます。 GoogleAnalyticsの標準のレポートでは、このディメンションは2つまでしか設定できません。 1つ目のディメンションを「プライマリディメンション」、2つ目のディメンションを「セカンダリディメンション」と言います。 プライマリディメンションは左メニューから、セカンダリディメンションは表上部のプルダウンから選択します。 そうすると、下記赤枠と青枠の部分に各ディメンションが設定されます。 このように、標準レポートではディメンションを2つまで選択できるのですが、分析をしていると、ディメンションを3つ以上設定して見たい時があります。 そうした時にディメンションを複数
ESLintを使ったJavaScriptの検証をGitやGulpで自動化する ｜ Tips Note by TAM
前回の記事では、JavaScriptの検証ツール「ESLint」を使用して基本的な検証を始めるまでの手順をまとめました。 下記のコマンドで個別にJSファイルの検証を行うことも可能ですが、手動で検証を行うのは大変です。 eslint <ファイル名> 今回は、GitやgulpのフローにESLintの検証を組み込み、自動化する方法を調べました。 pre-commitを使用したGitとESLintの連携 Gitには特定のアクションが発生した時にスクリプトを実行するGitフックという機能があります。 この機能で使用するファイルは、.git/hooks 内に格納されています。 .git/hooks を開くと様々なタイミングで実行されるGitフックのスクリプトが記載されたサンプルファイルが格納されています。 ESLintによるJavaScriptの検証はコミットを開始する前に行いたいので、pre-com
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
【jQuery】シングルページでナビゲーションに現在地を表示する ｜ Tips Note by TAM
jQueryを使用して、シングルページでナビゲーションに現在地を表示するサンプルを作成しました。 デモページはこちらになります。 ■HTML ナビゲーション部分とコンテンツ部分のHTMLの抜粋です。 ページ内リンクで各コンテンツに遷移します。 <ul id="gnav"> <li><a href="#contents01">コンテンツA</a></li> <li><a href="#contents02">コンテンツB</a></li> <li><a href="#contents03">コンテンツC</a></li> <li><a href="#contents04">コンテンツD</a></li> </ul> ～略～ <div id="contents"> <div class="inner"> <div id="contents01"> <h2>コンテンツA</h2> コンテンツAの
WordPressプラグイン「Advanced custom field」の基本的な使い方と用例 ｜ Tips Note by TAM
■基本 ・記述方法は「the_field()」と「get_field()」の二通り 値の内容を表示したいときは、the_field()を使います。 the_field('my_custom_01'); これで、現在表示している投稿の「my_custom_01」というキーの値を表示できます。 もしif文や変数などで使用する場合はget_field()を使用します。 $hoge = get_field('my_custom_01'); 入力されているか否かのチェックはget_field()で行います。 なので、私の使用頻度としては専らこちらの方です。 ・第二引数で投稿やページを指定することも可能 the_field('my_custom_01', 100); これで投稿IDが100の投稿（もしくはページ）の「my_custom_01」を表示出来ます。 この「the_field()」と「get_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
