git pushで本番環境に“自動デプロイ”できる環境を作ってみよう！ | vdeep
こんにちは、okutani(@okutani_t)です。Gitを使えばかんたんにプログラムのバージョン管理をすることができますが、リモートにリポジトリをプッシュする機能（git push）を使えば「本番環境への自動デプロイ」がかんたんにおこなえる環境を構築することができます。 今回は一例として、僕のポートフォリオサイト（okutani.net）をGitで管理して、本番環境に自動デプロイできるようにする流れで解説しています。 次の環境でおこないます。 ローカルリポジトリ MacPC上で管理。 本番環境 エックスサーバーにリモートリポジトリを作成し、そこにプッシュすることで本番環境にデプロイできるように設定していく。 GitHub GitHubでも管理しているため、本番環境とGitHubへのプッシュを同時にできる設定もおまけで設定。 参考: GitHubのURL→「https://github
gitでシンプルなデプロイ環境を作る - Qiita
gitで最低限のデプロイ環境を作る際のメモ。 いろいろなCIツールを使うまでもない、小規模なコンパイルいらずのWebアプリのデプロイ環境を作る。 CIツールを使う場合でも基礎となる知識なので整理しておく。 やりたいこと ローカルで開発。 リモートにpush pushを拾って、公開ディレクトリにpull イメージ 図で書くとこんな感じ。 今回は、独自のリモートリポジトリを使うが、ここがGitHubとかでもいい。 前提条件 ローカル、リモートにgitがインストールされていること（Mac想定） リモート（サーバ）にはsshで透過ログインできること 手順 まずは、push,pullの流れを手動でやってみる。 リモートリポジトリの用意（リモート） とりあえず、外からは非公開かつ、チームがアクセスできるディレクトリを用意し、リモートリポジトリにする。
Gitでサイトを更新したい！ - Qiita
git で手元でバージョン管理してるのにいちいち git-archive で差分を出して 展開して、FTPで持って行って上書きなんてめんどくさいなぁ・・・ コマンドだけででうまくできないものかと思った時に使える技。 SSHが使える場合とFTPのみ使える場合とで２パターン用意しました。 WindowsがメインPCなのでWindowsでも使える手順となります。 使うgitはオーソドックスにmsysgitです。 SSHが使える場合 昨今のレンタルサーバーではSSHを利用できるオプションがあります。 ロリポップ！ (スタンダードプラン、エンタープライズプラン) heteml さくらのレンタルサーバー (スタンダードプラン以上) XServer git は ssh:// をリモートリポジトリに設定してやるとSSH経由で操作を行えるのでこいつを使います。 今回はロリポップ！を使った場合を想定して進めま
Chromeでテーブルの列を選択できる拡張ColumnCopyが激しく便利 - niwanome
メインのブラウザとしてChromeを利用しているのですが、Firefoxに比べて困るのがテーブルタグの選択です。 テーブルで構築されているWebページのリストをコピーしたいと思った時にFirefoxでは、Ctrキーを押しながらテーブルのセルを選択する事で、セル単位で選択してコピーなどができます。これを利用してテーブルの列をコピーしてExcelに貼り付けるというような便利な事が可能になります。 Chromeでこれを可能にしてくれる機能拡張がColumnCopyです。 直球の名前通り、Webページ上のTableタグの列だけを選択するという機能に特化した機能拡張です。 操作方法シンプル。コピーしたい列で「altキーを押しながらクリック」だけです。するとふわっと浮き上がるようなアニメーションがでてクリップボードに内容がコピーされます。 あとはそれをExcelなりなんなりに貼り付けることができます。
Railsの既存コードをほぼ変更せずにAMP対応する8ステップ - Qiita
はじめに:通信量が少ない&&爆速なAMP AMP(Accelerated Mobile Pages)はサイト表示を高速化する技術です。特に帯域制限されたスマホでも素早く快適に画面が表示されるので、(私もそうなのですが)スマホの通信料金を節約したい！帯域細い！というユーザーには待望の技術ではないでしょうか。 しかしその高速さの一方で、AMP開発チームがその技術を User Experience > Developer Experience > Ease of Implementation と言い切っている通り、「UX(スピード)最優先、作りやすさは二の次！」で扱いにくい側面もあります。 参考: https://www.ampproject.org/learn/design-principles/ そんなAMPを、なるべく既存のコードを修正せず(特に、画面テンプレートにはほとんど手を入れないで
日本語Webフォントは「遅い・重い」って思い込んでた……こんなに速くなってたなんて…… | Web担当者Forum
Webフォントは重い・遅いと思っていないだろうか。確かにかつてのWebフォント、特に日本語Webフォントはブラウザでの表示が遅く、Webフォントに切り替わるまではシステムフォントが表示されるのも、良いユーザー体験を提供できているとはいえなかった。 しかし、Webフォントはすごく進化しているのだ。実際、このページでは日本語Webフォントを利用しているが、そんなに遅いとは思わなかったのではないだろうか。 日本語Webフォントの進化を、表示スピードの向上を中心に取材してきた。 ※このページはTypeSquareの「黎ミン」「新ゴ」「ゴシックMB101」を利用しています。 Webで書体の融通がきかないのは諦めるべきか――Webフォントをおさらい自社製品のパンフレットやカタログを作る場合には、担当者はどのようなフォントを使うかについてかなり深く考えるものだ。自社製品のイメージに合うのはどのような書体
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
[Photoshop]「レイヤーをファイルに書き出し」を速くしてみた。 - Qiita
まえおき Photoshopには、全てのレイヤーを個々のファイルに書き出すための 「レイヤーをファイルに書き出し(Export Layers to Files)」というスクリプトが標準で入っているのですが、 これがめちゃくちゃ遅いため、書きなおして速くしてみました。 レイヤー25枚のpsdで使うと55秒かかっていたのが、 このスクリプトに置き換えると、3秒で終わります。 準備 以下のURLから、ExportLayersToFile.jsxをダウンロード https://raw.githubusercontent.com/kyubuns/yogurt/master/ExportLayersToFile.jsx ダウンロードしたファイルを'/Applications/Adobe Photoshop CC 2016/Presets/Scripts/'以下にいれる (Windowsは、C:\Pro
![[Photoshop]「レイヤーをファイルに書き出し」を速くしてみた。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcc7d90888f7b87dbb1460168a4d49e8c77c288a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-1.2.2%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D380%2526txt%253D%25255BPhotoshop%25255D%2525E3%252580%25258C%2525E3%252583%2525AC%2525E3%252582%2525A4%2525E3%252583%2525A4%2525E3%252583%2525BC%2525E3%252582%252592%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252582%2525A4%2525E3%252583%2525AB%2525E3%252581%2525AB%2525E6%25259B%2525B8%2525E3%252581%25258D%2525E5%252587%2525BA%2525E3%252581%252597%2525E3%252580%25258D%2525E3%252582%252592%2525E9%252580%25259F%2525E3%252581%25258F%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525E3%252580%252582%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D5656cfcefea2dd00148a43a8e2d83349%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D500%2526txt%253D%252540kyubuns%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253D3beb5b2135acadbb8e56f9898f4d4dc5%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3D00aaf180a1d8ffc7f1c6b13d83d7681b)
photoshopのアセット機能を使って爆速でスライスしよう
こんにちわ。 マークアップの田村です。 2週連続でクリエーターブログを書かせていただきます。 今回はコーダーの皆さんはぜひ使っていただきたい「photoshop2014」のアセット機能を紹介したいと思います。 アセット機能とは？ photoshopヘルプから引用させていただきます。 PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG または GIF 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。 PSD ファイルからの画像アセットの生成は、マルチデバイス Web デザインで特に役立ちます。 上記に記載の通り、スライスで画像を書き出すのではなく、レイヤーから画像を生成できます。 切
テストサーバーへのアップが面倒なときはngrokでローカル環境を外部公開してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアのまろです。 テストサーバーにアップするのって面倒ですよね。FTP環境だったり、Gitでの環境だったり。どちらもコマンドでアップするんですけどなんか。。。 あと外部サービス連携も面倒ですよね。開発中と本番のURLが違うのはもちろん、localhost:8080なんて外部からアクセスできないし、それの設定なんてこれまた面倒。そんなときにngrok使いましょう。というお話です。 ngrokとは https://ngrok.com/ localhostで動いているサーバーを外部（LAN外）からアクセスできるように、リレーしてくれるツールです。 例えば「http://localhost:8888」が「http://c3f4avrc.ngrok.com」になって公開される感じです。 簡単すぎて、今回はボリューム少な目です。 ※無料ですが、ngrokを継続して使っていくために任意
Sublime Text 3 の便利ショートカットキー | ジョブテク
ファイルの操作 ファイル名を検索して開く Windows:Ctrl＋P Mac:Cmd＋P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl＋Shift＋P Mac:Cmd＋Shift＋P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択します。 使用言語を指定することで言語にあった色分けや入力補完を表示してくれます。 文字の大きさを変える Windows:Ctrl＋Shift＋+、Ctrl＋- Mac:Cmd＋Shift＋+、Cmd＋- カーソルの操作 複数のカーソルを配置する Windows:Ctrl＋クリック Mac:Cmd＋クリック クリック位置にカーソルを配置し一度に複数個所を編集することができます。 ※下図のように複数個所に同じclass名を
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
