※何度投稿しようとしてもBad Requestが出てしまったのでgistで投稿します。ご了承下さい。 gist.github.com
前回の記事でGitHubとJenkinsを用いた自動デプロイ環境の概要をご説明しました。 GitHubやJenkinsと連携した開発環境作成でのrsyncとの出会い 今回は、その環境を実現するための設定手順を書いて行きたいと思います。 大きく4つの手順があります。 Jenkinsのインストール Apacheの設定 JenkinsとGitHubの連携 自動デプロイ設定 開発環境 ・CentOS 6.2 ・Apache がインストール済み Jenkinsのインストール まずは、Jenkinsのインストール 通常ならば、運用するサーバとJenkinsが動いているサーバを分けるべきですが、サーバコストの都合などで今回は同一サーバ上で動かすことにします。 ApacheサーバとJenkinsサーバが同じport80で待つことはできないので、jenkinsをport:8080で動かすことにします。 また
一人Web担教習所 突如一人でWeb担当を勤めることになった。けれど制作予算も広告予算もない。そんなご担当者へ愛をこめて。ninoyaブログ編集部が、日々の業務で培った集客の知見をお届けします。 本連載ではこれまで、SEOとWeb広告、SNSの3つの切り口から集客する方法について見てきました。下の記事で解説したように、Web集客の方法は4つありましたね。 今回のテーマは、その4つ目の方法であるキュレーションアプリです。キュレーションアプリの基本から、各キュレーションアプリの記事掲載アルゴリズムについて解説しています。オウンドメディアやブログなどの運用に役立てていただければと思います。 大幅な流入アップが見込めるキュレーションアプリ キュレーションアプリとは? 皆さんはキュレーションアプリを使っていますでしょうか?キュレーションアプリとは、ネット上のニュースを選別して表示してくれるアプリのこ
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい!」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。(JavaScript - Wikipedia) Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……?」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい!」という方や、「初心者だけど、なるべくコス
ここ3ヵ月ほどプライベートで Laravel 5.2 を使ってみています。 この度、バックエンドを Laravel、フロントエンドを React で Web アプリを組んでみようかと思い立ち、初めて React を導入してみました。 『下準備が面倒かもな...』とか思ってたんですが、Laravel Elixir のおかげで爆速で React を導入することができました。 ※ この記事は React 導入記事ではありますが、React 入門記事ではありません。React で "Hello, world!" を表示するところまでの内容です。 Laravel Elixir Laravel には Laravel Elixir と呼ばれる gulp.js タスク群が標準で付属しています。 Laravel で構築しているプロジェクトならば、Sass や CoffeeScript のコンパイルのために別
Mac に git を install したり、また git を更新する際に注意することをまとめた。 環境情報 OS X 10.9.5 Homebrew 0.9.5 git のインストール 主に2通りの方法がある。個人的には Mac のパッケージ管理がまとめて出来て、かつバージョンの更新が早い Homebrew 方式を採用している。インストール方法はネット上にたくさん情報があるため、ここでは割愛。 公式サイトのインストーラを使ってインストール Homebrew を使ってインストール ちなみに、上記 1. の方法でインストールした git は /usr/local/git/bin/ 配下に、2. では /usr/local/bin/ 配下にそれぞれインストールされる。ターミナルを起動し、以下のコマンドで確認。 $ git version git version 2.3.0 $ which g
WordPressのカテゴリーにカスタムフィールドを追加する カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテンプレートを編集しなくてはいけないので不便ですね。 ここではカテゴリー編集画面にカスタムフィールドを追加して、管理画面で画像や新たなテキストを追加できるようにしてみます。 投稿日2011年08月18日 更新日2012年08月07日 カテゴリー編集に項目を追加 さっそくですがカテゴリー編集画面に項目を追加してみましょう。 現在使用している「functions.php」に以下を追加します。 functions.php add_action ( 'edit_category_form_fields', 'extra_category_fields'); function extra_category_f
新卒エンジニア向け:Macにインストールすべきアプリ達2014年新卒エンジニア向けに、最初から知っておくと便利になるであろうアプリなどを紹介する機会があったので、ついでにブログ記事としてまとめておく。Boxenとかもあるけど、正直手軽さにかける印象なので、普通にHomeBrewと手作業。 下記で説明しているHomeBrew Caskを使えば、ほぼ一発で必要なアプリケーションが手に入るのでオススメ。 正直、iOS/Androidエンジニア向けのものは、あんまりない…。すまそん。 前提 Mac OSX 10.9〜(多少、古くても出来ると思うけど) Webエンジニア(PHPメイン)/iOS,Androidエンジニア対象 なにがなんでも最初に入れるべきアプリ Xcode HomeBrew HomeBrewを通じてインストールすべきもの Brew Cask zsh vim jq | JSONパーサー
ところでですが、MySQL,PostgreSQL,oracleなどのDBMSは、これまで一通り触ってきました。ですので、初歩的な予備知識はあると思っています。が、私個人的にWordPressに関しては、「WordPressを構成してるデータベース(DB)の理解」をしないと、うまく扱えない。前に進めないな、と感じています。 当たり前かもしれないですけども・・・ WordPressのDBに関する理解私の現状の理解は、 WordPressはDBMSとしてMySQLを採用していて、インストール時に決めたDBに、WordPressを構成するテーブルを作成するcodexのサンプルコードを参考に、ちょっとだけDBの値を引っ張ってくる程度ってくらいです。 あ、あとWordPressインストール時に作られるテーブル名も、前回調べました。(昔PostgreSQLで構築する方法もあるのはどこかで見たけど、そこは
2015 - 02 - 01 display:flexにしたら、子要素の幅が何かおかしなことになった CSS3 CSS3のフレキシブ ルボックス が一昔前の「display:box」だったので最新仕様の「display: flex 」に変えたら、えらい崩れてしまいました。 そもそも仕様は今どうなってるの? floatを使ったカラムレイアウトに代わる、大変便利なプロパティ「フレキシブ ルボックス 」ですが、仕様がころころ変わったことでも有名ですね。 いま現在、仕様がどうなっているのか、わかりやすい記事がありました。 flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers' Blog 要は、「display: flex 」を使って実装するのが良さそうなのですが、単に「display:box」を「display: flex 」に変えるだけだと、 子要素、つまり F
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 僕のモットーは「ラクして作る」で、日々怠けながらコーディングをしています。その際に役立つのが、便利なライブラリやらプラグイン。おかげで毎日2〜3時間ほど昼寝に費やすことができています。 さて、今回は実際に僕が使ったことのあるJavaScriptのスライダープラグインで、特に人気の4つを勝手にレビューしてみます。導入を検討されている方は参考にしてみてください。
html,body { height: 100%; margin: 0; } .flex { display: flex; height: 100%; } .flex-child { border: solid 1px gray; background: blue; } .flex-grandchildren { background: red; height: 100%; } <div class="flex" > <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> </div> flex
ブラウザ標準のスクロールバーを、自分のデザインに変更するためのjQueryプラグイン「custom scrollbar」。 jQuery custom content scroller – malihu | web design jQuery custom scrollbar demo(デモページ) スクロールバーをカスタマイズするJSは色々あるけど、これが一番多機能そうなのでご紹介。 基本的に上記ドキュメントページを要約して翻訳しています。間違ってたらすみません。 導入方法 基本的にはJSを読み込んで指定をするだけです。 基本的な使い方 jQueryとmCustomScrollbarのjs, cssを読み込む ダウンロードはjQuery custom content scroller – malihu | web design のdownloadから <link href="jquery
一言まとめ ちょっとした工夫でposition : fixed;でも、以下のことが可能。 position : fixed;を設定した要素が、画面からはみ出てもスクロールできる 背景 (body) のスクロールを止める ちょっとしたモーダルウィンド(Modal Window)とか、別レイヤーで画面いっぱいに表示する場面って多々あると思います。 別レイヤーで、画面の縦横いっぱいに表示する時に使う手法は2つしかないです。 position : absolute; position : fixed; fixedのほうが多用されているように思いますが、表示するコンテンツのサイズが大きい時にabsoluteを使う人も多いでしょう。おなじみの「LightBox」でもabsolute使っていますよね? absoluteを使う利点はあまりないと思いますが、十中八九、 「コンテンツが大きくて画面に収まらない
/* 各ベンダープレフィックスが取れた標準版!!(http://caniuse.com/#search=placeholder-shown) */ :placeholder-shown { color: red; } /* Google Chrome, Safari, Opera 15+, Android, iOS */ ::-webkit-input-placeholder { color: red; } /* Firefox 18- */ :-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: red; opacity: 1; } /* IE 10+ */ :-ms-input-placeholder { color: red; } ::-webkit-inp
WordPressのサイト構築で、簡単な機能はプラグインを使わずfunctions.phpに直接書いて実装することがが多くなりました。中でもカスタムフィールドが設定できると自由度が高くなりますね。独自のカスタムフィールドを設定するソースはよく紹介されてますが、ここでは流れや意味など理解を深めながら説明したいと思います。 設定の概要 アクションを設定する 管理画面に入力フィールドを追加する カスタムフィールドの入力内容を保存する 全体のコード カスタムフィールドの値を表示する まとめ 設定の概要 次の条件でカスタムフィールドを作成することとします。 カスタムフィールドの名前 :天気 カスタムフィールドのID :weather カスタムフィールドを挿入する編集画面:投稿(post) カスタムフィールドの種類 :テキストフィールド アクションを設定する まず管理画
それぞれの文書のアウトライン(その見出しとセクションの構造)が関係する限りにおいて、次の2つの断片は、セマンティックに等価である: <body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body> <body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く