前提 WebサービスではDBサーバーは踏み台サーバーを経由しないと接続できないようにしていることが多いかと思いますが、 例えばローカル環境で開発環境のDBにあるデータで動作確認をしたい際に、 いちいちターミナルでSSHコマンドを打つのは面倒なので、そんなときにCoccinellidaを使ってポートフォワーディングすると便利です。 手順 Coccinellidaのインストール こちらよりインストール Coccinellidaの起動 アプリケーションフォルダもしくはDockにCoccinellidaをセットしている場合はDockから起動 -> 上部メニューバーにてんとう虫のアイコンが現れ、これがインターフェイスとなる。 Coccinellidaの設定 上部メニューバーのてんとう虫をクリックし、「Preferences」を選択 Preferencesの設定画面が開いたら、上部てんとう虫マークの「
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 - CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 - CSSの常識が変わる!「Compass」の基礎から応用まで! またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 - gulp インストール~基本設定の備忘録(windows) ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがい
どうも、まさとらん(@0310lan)です! 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です! データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです! 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう! 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます! 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう! 表示された画面にある「JS」の項目をクリック! 左側の「C
Ruby on Rails v3.2.11 アセットパイプラインとは Rails のアセットパイプライン(Assets Pipeline)は JavaScript や CSS、画像ファイルといった HTML に付随する細々としたファイル達(アセットファイル)を連結したり圧縮することで効率的にアクセスできるようにする仕組み(フレームワーク)です。 アセットパイプラインの役割 アセットパイプラインは以下のような役割をもっています。 1 複数の JavaScript と CSS をそれぞれ1つのファイルに連結する ⇒ ブラウザからのリクエスト数を減らす 2 JavaScript と CSS を圧縮してサイズを減らす ⇒ 文法上必要でない空白を削除したり、変数名を1文字にしたり 3 アセットファイル名にハッシュ値(MD5)を付加する ⇒ ブラウザがファイルのキャッシュ/読み直しを正しく行える 4
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
Slack のデスクトップアプリは、1つのチャンネルしか表示できないため一覧性が悪い。 そこで、複数のチャンネルを一度に表示できるアプリを作った。 📦ダウンロード https://github.com/mzp/SlackStack 😫チャンネル切り替え作業の増加 Slack のデスクトップアプリは、チャンネルを1つしか表示できない。 そのため、参加するチャンネルに比例し、切り替え作業が増えていく。 さらに切り替え作業中に未読が増え、延々とチャンネルを切り替え続けることになる。 また同様の理由でメッセージを見落すことも増え、チャットのレスポンスも悪化していく。 📑Slack☆Stack そこで一画面で複数チャンネルの内容を確認するためのアプリを作成した。 オフィスでは縦置きのモニタを使っているので、横方向にも縦方向にも重ねれるようになっている。 🔧開発の様子 ブラウザを並べる Sla
どうも、まさとらん(@0310lan)です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です! バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方! それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう! まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考:position - CSS|MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く