参考サイト WindowsのSublimeText3の設定ファイルをDropboxで共有する Windowsでsublime text 3の設定をDropBoxで共有うんたら。 SublimeText3のセットアップ 設定ファイルをDropBoxに移す 本来の設定ファイルがある場所 Windows： C:\Users(ユーザー名)\AppData\Roaming\Sublime Text 3\ Mac： /Users/(ユーザー名)/Library/Application Support/Sublime Text 3/ 今回はDropBoxの直下に「SublimeText3」フォルダを作成してその中に設定ファイルを配置 DropBoxの設定ファイルからシンボリックリンクを貼る mac ln -s /Users/(ユーザー名)/Dropbox/SublimeText3/Packages /U

NGINXからアプリケーションサーバ「NGINX Unit」がオープンソースで登場。PHP、Go、Pythonに対応。Java、Node.jsにも対応予定 NGINX UnitはNginxの開発者であるIgor Sysoev氏が設計し、NGNIXのソフトウェア開発チームが実装したもので、同社としてはNginxと同等の開発プロセスと品質を実現しているとしています。 現時点でPHP、Go、Pythonに対応。Java、Ruby、Node.jsにも対応予定です。 NGINX Unitの最大の特徴として挙げられているのは、最初から動的制御が可能なように設計されており、アプリケーションの入れ替えやバージョンアップなどを再起動することなくシームレスに行えるところです。 RESTful APIやJSONによるコンフィグレーションの変更やリロードもリアルタイムかつ動的に反映されるとのこと。 また、同一サー

「この単位、なんだ？初めて見た・・・」 CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。 CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。 実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。 CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。 これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。 今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。 単位

先日ConohaでVPSを借りて、公開鍵認証でログインできるようになどしようとしたのですが、なかなかうまく行かず地味に時間がかかってしまった… とりあえずやったことだけまとめておく。 今回やったこと 以下をやりました。 root以外のユーザを作る SSH接続（公開鍵認証で接続） パスワード認証をできなくする rootからログインできないようにする SSH接続するportを22から変更 以上は、以下の記事を参考にさせて頂きました。ありがとうございました！ [1] ConohaにVPSを設置して、SSHログイン、ポート番号変更、rootログイン禁止までを30分で！ - Qiita [2] ヾ(oﾟωﾟo)ﾉﾞConoHaちゃんに作業用ユーザ追加してssh接続するやで！ - Qiita まず下準備 Conohaコントロールパネルで、IPアドレスを調べておく Conohaコントロールパネルからコン

編集部注：2024年3月12日にリンク切れを修正しました。 「限られた予算の中で、自社の商品を話題にしたい」 商品がコモディティ化していく中、「どのように商品の魅力を打ち出すか」というPRの重要性は年々高まっています。PR担当の皆さんは、自社の魅力を発信し、メディアに取り上げられるためにはどうしたらいいか、日々考えているのではないでしょうか。 そこで今回は、PR会社である株式会社フロンティアコンサルティングの代表取締役を務める、上岡正明さんにお話を伺いました。上岡さんは、メディアで取り上げられる確率を高める「8×3の法則」を考案し、『共感PR』という書籍を出版。 「8×3の法則」を活かしたPR戦略とは、果たしてどのようなものなのでしょうか。 メディアに取り上げられるには、「共感」が大事 ――上岡さんの最近の著書に、『共感PR』というものがありますよね。この本を書いたきっかけを教えていただけ

アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本

インターネットに触れている時というのは、大抵ひとりのときだ。 ここ半年くらい、おかげさまでいろいろな人に出会い、ブログを書くのも疎かになってしまったけれど、またひとりになる時間が増えそうなので、またブログを書き始めようと思っている。 さて、今夏の池袋はサウナのような状態になっているけれど、人混みに負けず冷房を効かせたサンシャインシティの一角で、コツコツと収集していたWebサービスをおよそ1年ぶりに紹介していこうと思う。 海外編 Topol.io Topol.ioは無料から始めることができるかっこいいデザインのHTMLメールが作成できるエディターだ。 デスクトップベースで、豊富なテンプレートを選べば簡単にセンスのいい画像入りのメールを作成することが可能。 Matte Mockups Matte MockupsはCSS3をベースにしたiPhoneやiPadなどのモックアップだ。 画像埋め込み型

ど〜も〜、文明開化の足音を発するエンジニア 中尾こと、 Hawk（と呼ばれたい） です。 いよいよ、梅雨も明けて夏本格始動ですね！ 「どうせ梅雨明け後の方が雨降るんだろ？」 というネガティブな発言はみなさん控えましょう（笑） では、本題に参りましょう！ 今回も引き続き、gulpを一からイジって見た企画 第肆話 〜見知らぬ、pug〜 になります！ 過去の内容が気になる奇特な方はこちらからどうぞ！ ＞ 第壱話を見てみる ＞ 第弐話を見てみる ＞ 第参話を見てみる それでは、はりきっていきましょ〜！ pug？パグ？犬？ブサかわいい？ 残念ながら今回は犬種の話はいたしません！！ pugとはHTMLのメタ言語です。 sassのHTML版だと思っていただければ結構です。 実はpugはちょっと前までjade という名前でした。 それが 大人のいざこざ でpugという名前になりました。 なので、記述方式は

先日、念願のGoogleアドセンスの審査を無事通過いたしました。（2017年7月現在）無事合格することができて、正直ほっとしています。しかも1発合格でした。嬉しい♪ Googleアドセンスの審査基準や審査の過程については、最近目まぐるしく変更が加えられているようです。以前でしたら簡単に審査を通ったようなブログでも、審査に通らないということが増えてきていると聞きます。また1次審査、2次審査と段階があったものが1つにまとめられていました。1次審査はなく、最初からhead部分にコードを貼り付けてすぐに審査という流れになっておりました。 そこで今回は、Googleアドセンスの審査を受ける際に私が気を付けたことと、その時のブログの状況をご報告して、皆さんの申請の参考にしていただければと思います。 ブログ作成で気を付けていたこと 避けた方がいい記事内容 記事の文字数と記事数 プライバシーポリシーとお問

エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ

こんにちは、佐伯です。 みなさん、最近の猛暑をいかがお過ごしでしょうか？ 桃でも食べて元気出していきましょうね！(雑か) ●前回、デザインの四原則の一つとして「近接」の説明をしました。 デザインの四原則を桃太郎で解説していく試み【近接編】 今回は整列について解説をしていきます。 突然ですが、みなさんは「空気を読む」って得意ですか？ いきなり踏み込んだことを聞きますが、みなさんは日本人らしく空気を読んで生きてますか？ 今回はそれに似た話になってきます。 整列と聞くと「綺麗に並べる」「揃える」とかってイメージを持つことが多いかと思います。 違ってはないのですが、それだけだと解説と呼べるのかという気持ちにもなってきます。 では、そもそも「整列」って？ 今回も簡単に書くと要素を相対的な法則で距離感を調整することです。 前回は要素でまとまりを作って整理するような感じでしたが、今回は少し俯瞰した目線で

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用

2016.06.06｜最終更新：2017.11.17 自分も開発したくなる！楽しすぎるJavaScriptライブラリ7選 JavaScriptを使ってユニークなサイトやアプリを制作したい！ そんな時に活用できるのがJavaScriptライブラリです。 本記事では楽しくWeb開発が可能なライブラリを厳選して7つご紹介します！ 顔の認識ができるようになる！ 【 jQuery Face Detection 】 JavaScriptだけで、画像内に映る顔を検出できちゃいます！ 顔の座標位置を検出し、データとして取得できます。 複数人が画像に含まれていても、それぞれ検出可能です。 Webカメラにリアルタイムに映る顔を検出できる「clmtrackr.js」もありますよ！ VR空間で絵が書けるブラウザアプリ！ 【 A-Painter 】 A-Frameはブラウザ上で仮想空間（VR）を実現するフレームワー

ど〜も〜、技のデパート blue支店 の中尾こと、 Hawk（と呼ばれたい） です。 毎日、暑い日が続いていますね〜 エアコンの点けすぎで体調などを崩していませんか？ ちなみに私は、筋肉痛 です。 さて、今回はフロントエンドで割とよく使うサービスをまとめてみようかと思います。 私は パクチーと同じくらいインストールが嫌い なので、基本インストールなしで使えるサービスを紹介していこうかと思います。 まずは基本lint系！ まずご紹介したいのはこちら！ 構文ミスやコーディングルール等をチェックしてくれるサービスです。 最近はツールやエディタとかでもやってくれますが、生書きの際は納品前に必ずチェックしたいですね！！ The W3C Markup Validation Service やっぱり公式が大正義！ HTMLのlintです。 残念ながら英語しかないのですが、英語ｱﾚﾙｷﾞｰの私でも普通に使

マーケティング戦略なくしてSEOもUXもない。ましてや、サイトリニューアルを見た目のデザインだけで判断するなんてことはありえない。 業務提携を行った、株式会社ベイジのUXスペシャリスト枌谷（そぎたに）氏とナイル株式会社のSEOスペシャリスト土居氏に、「サイトリニューアルやマーケティングにおいて、SEOとUXをどのように考えるべきか」テーマに語ってもらった。（中編） 前編「ユーザーファースト＝ベストなマーケティングとは限らない」から読む まだまだ見た目で判断する会社が多い枌谷力氏（以下、枌谷）： SEO業界で土居さんが最近気になっていることはありますか？ 土居健太郎氏（以下、土居）： 信頼性が低いコンテンツ、低品質なコンテンツ、よそのコンテンツを無断で借用する、などのコンテンツに関わる話は気になります。 このような問題は、検索順位を上げることを目的に作られた不適切なコンテンツが、実際に検索結

なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで

「Cloud9を使ってLaravel5.4で開発」第３回です。 第一回、第二回はこちら Cloud9を使ってLaravel5.4で開発【第１回】 Cloud9を使ってLaravel5.4で開発【第２回】 早速はじめますよー。 2-3.新規登録 新規登録では２つのルートと機能を設定する。 - create：入力画面の生成と store へのデータの送信 - store ：情報を受け取り保存 ⇒ 一覧へリダイレクト ルーティング routes/web.php に以下を追加 Route::get('users/create', 'UsersController@create')->name('users.create'); Route::post('users', 'UsersController@store')->name('users.store');