CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
JavaScriptでconsoleにさらにカッコよくサイト名を出す！ - Qiita
上記コードの実行結果が下の画像です %cを記述した箇所以降にstyleが適用されています。(１つ目のtestはstyleが適用されない) サンプルコード 「Javascriptでconsoleにサイト名をAAで出す！」で作成したサンプルに対してstyleを適用します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script> console.log("\n" + "%c __ __ %c %c ___ %c ___ %c %c __ __ %c %c %c ___ %c __ \n" + "%c/\\ \\/\\ \\ %c %c/\\_ \\ %c/\\_ \\ %c %c/\\ \\ __/\\ \\ %c %c %c/\\_ \\ %c /\\ \\ \n" + "%c\\ \\ \\_\\ \\
フロントエンド片手間ンによる Laravel Elixir 入門 - Qiita
この記事も若干古くなってきましたので… 他のフレームワークでも使える Laravel-Elixir という記事を書きました。入門から設定値の上書きの仕方まで。 この記事を書いた頃は browserify や browserSync できなかったですが、今はできますよ。！ はじめに この記事は、フロントエンド片手間ンである @localdisk が Laravel Elixir を使ってみた記録です。頑張りました。 注意点 Laravel5 はおそらく来年のリリースになります。以下のコードは Laravel Framework version 5.0-dev で書かれました。 筆者の環境は Mac OS X 10.9.5 HomeBrew を使用している 当エントリに書かれたコードはすべて動作確認をしていますが、筆者はフロントエンド片手間ンなのでもっと効率のよい方法や勘違いがあるかもしれませ
開発しやすい環境の作り方~Web系~ - Qiita
はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s
Trello の各カードに期限日を設定して、Google Calendar に同期させる - Qiita
Trello のカレンダー機能を有効にすると、各カードごとに期限日を設定することができるようになります。それを googleカレンダー に同期して表示させる方法です。 Trello のカレンダー機能を有効にする ボードのメニュー → Power-Ups → Calendar で Enable を選び、カレンダー機能を有効にします。 カードに期限を設定する カードの編集時に Due Date ボタンから、各タスクの期限日時を設定します。 期限を設定するとこんな感じ。 期限が迫ったカードは、日付が赤や黄色で表示されます。 カレンダー表示 ボード上部の Calendar ボタンをクリックすると、カードをカレンダー形式で表示させることもできます。 iCal 形式の URLを取得 メニュー → Power-Ups → Calendar の設定アイコンから、iCal 形式のURLを生成することができま
UnityをC#で超入門してみる #1 Unity入門の章 - Qiita
http://japan.unity3d.com/unity/ はじめに ！注意！ この記事郡が最初に投稿されたのは、2014/01/02です。 Unity4時に作成されたものですから、情報が古い場合があります！ 14/12/18記 リンク先アドレスを更新しました。 ゲームの作り方についてはまずこちらをご覧ください！ 「ゲーム 作り方」テラシュールウェア http://tsubakit1.hateblo.jp/entry/20140218/1392651856 全体的に編集中箇所多いです。 ご指摘いただけると助かります。 参照サイト この記事群は公式リファレンスと 以下のサイトを参考にさせて頂いております。 どれもとても参考になる素晴らしいUnity及びC#コンテンツです。 まずはこちらをご訪問ください。 ・ActionScript入門Wiki@rsakane氏 Unity http://
【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回） - Qiita
はじめに この記事は、Unity初心者が2Dゲームの作成に慣れることを目的としたチュートリアルとなります。前回は背景の表示までを作りました。 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第１回） ←前回 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回） ←今ココ 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第３回） 今回は敵を表示して動かすところまでを作っていきます。 敵の生成 敵（たこ焼き）を作成します。Projectビューの「Assets/Sprites」フォルダにある tako スプライトを、Sceneビューにドラッグ＆ドロップします。 すると「tako」ゲームオブジェクトが作成されます。Hierarchyビューの「takou」オブジェクトを選択して、もう一度クリックすると名前が変更できます。 そうしたら名前を「E
【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第３回） - Qiita
はじめに この記事は、Unity初心者が2Dゲームの作成に慣れることを目的としたチュートリアルとなります。前回は敵を出現させてクリックすると消えるところまでを作りました。 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第１回） 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回） ←前回 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第３回） ←今ココ 今回で演出とシーンの遷移を作り、ミニゲームを完成させたいと思います。 パーティクルの追加 たこ焼きが消えるときに演出がないので違和感があります。そこでパーティクルを追加します。パーティクルとは「粒子」の意味で、これをたくさん発生させて演出とする仕組みです。Unityには「Shuriken」というパーティクルシステムが用意されていますが、ここではそれを使わずに独自のパーティクル生成
Vagrantの使い方 - Qiita
1. はじめに ここではVagrantの使い方についてまとめてみました。 Vagrantを使って快適な開発・検証・試験環境を構築したいという場合に読んでみてください。 2. Vagrantとは まず、Vagrantとは何者と思う方もいるかと思いますので簡単に紹介します。 Vagrantとは、「開発・検証・試験時に使用する仮想マシンをコマンドや定義ファイルを使って簡単に構築することができるツール」です。 VagrantはVirtualBoxやVMWareといったハイパーバイザー上に仮想マシンを構築します。 また、VagrantではChefやPuppetといったツールを組み合わせて使うことができるので、環境構築を自動化することができます。 3. 前提条件 今回は、以下の環境を前提として話を進めていきます。 ソフトウェア バージョン
Slack の入力時に Enter キーで改行したい - Qiita
<appdef> <appname>SLACK</appname> <equal>com.tinyspeck.slackmacgap</equal> </appdef> <item> <name>For Slack</name> <item> <name>Use Enter to create a new line and ⌘ + Enter to post</name> <identifier>private.app_slack_command_enter_to_post</identifier> <only>SLACK</only> <autogen> __KeyToKey__ KeyCode::RETURN, ModifierFlag::NONE, KeyCode::RETURN, ModifierFlag::OPTION_R, ModifierFlag::FN </autogen>
【GAS】html Serviceでスプレッドシートの値を非同期に取得する - Qiita
簡単なWebアプリを作ったので、コアな部分を残しておこうかと思います。 作った経緯とかは余談を参照下さい。 サンプル SpreadSeets GoogleAppScript 生成したWebサイト ※ 承認が必要です スプレッドシートのデータを取得 GASからSpreadSheet（以下、SS）のデータを参照する方法はいくつかあるのですが、 非同期で取得する方法について説明します。 /* get Spresd Sheet Values */ function getSSValues(sheetName) { var SSValues = SpreadsheetApp .openById( ****** SPREADSEET ID ****** ) .getSheetByName(sheetName) .getDataRange() .getValues(); return JSON.stri
Google Apps Script 実践メモ（スプレッドシート） - Qiita
先日、仕事で必要に迫られ、Googleフォームからスプレッドシート周りをごにょごにょGoogle Apps Scriptで開発しました。 シリーズの初回は、Form Submitについて書きましたが、第2弾としてスプレッドシート周りのあれこれをまとめます。 スプレッドシート(Spreadsheet) 他のシートを読み込んだり書き込んだりしたい やりたかったのは、Form Submitで入ってきたレコードに「ユーザー名」というGoogle Appsのアカウント名が入ってくるのですが、それをキーに社員マスタのようなシートから情報を引っ張ってくる、といったようなことです。 URLなどからまったく別のスプレッドシートを開く フォームの回答シートとはまったく別のスプレッドシートを開くには、SpreadsheetAppというクラスを使用します。開きたいスプレッドシートのURLが分かっていればopenB
掃除当番の割当を Google Apps Script で自動化して Slack の BOT として通知 - Qiita
Slack Web API token の取得 以下などを参考に、Slack Web API を利用するための token を適当に取得しておきます。 Slack APIを使用してメッセージを送信する Google Apps Script の作成 先ほど準備したスプレッドシートの組み込みスクリプトとしてコードを書きます。 GAS の使い方がわからない場合は、こちらなどを参考にしてください。 SlackApp ライブラリの導入 まず、GAS で楽に Slack を扱うために、SlackApp ライブラリといういい感じのライブラリを導入します。 エディタの画面のメニューより リソース > ライブラリ を選択します。 「ライブラリを検索」に SlackApp ライブラリのキーを入力します。 //slack定義 var slack = { postUrl: "https://slack.com/a
javascript側からgoogleスプレッドシートの各種シートに自在にアクセスする方法 - Qiita
はじめに webサイト側から、googleスプレッドシートの複数のシートにアクセスしたいニーズがあったとします。 GASなら、以下のフローで済むと思います。 スプレッドシートオブジェクトにアクセス 支配下のシート一覧を取得 それぞれ対象のシートにアクセス が、javascriptでアクセスする場合は…という事で、 Google Visualization API を試みました。 URL決め打ちで「シート」にはアクセスできますが、「スプレッドシート」にアクセスする方法が見当たりませんでした。 (スプレッドシート支配下のシート一覧が取れない。 取れるといいんだけど…) スプレッドシート側が静的でシート名もシートURLも固定、という場合は困りませんが、 webサイト側でシート一覧を表示したい スプレッドシート側のシート数が増減したりして、シートのURLがしょっちゅう変わる シートのURL決め打ち
gulp-sassとgulp-postcssで快適コンパイル環境を構築 - Qiita
gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい
Macで開発始めるなら環境構築にはGUIを使おう - Qiita
(3/22/16更新: 似たような記事が多かったので「移行応援」タグをつけた（宣伝乙） 10.9時点の記事ですが、10.11(El Capitan)でもほぼ同様にできるハズです。ただEl Capitanのrootless/SIPの影響でHomebrewのインストールではまる可能性があります。以下の2記事が詳しいです: http://qiita.com/riocampos/items/525ec4b35744ad586c5a http://qiita.com/aoioooii/items/c14922eede6a83a750da 本文/画像はほぼ最初期のものから変わっていません) 目的 クリーンな状態から、 最速で 、かつ GUIツールを使って Ruby on Railsの開発環境＋Gitでのバージョン管理の環境を整える。 コマンドラインでやる方法は山ほど書かれてきました。それでも初めての人
masonry + ajaxでpinterest風タイルビューを実現する - Qiita
pinterestのような、 ・要素を隙間なく敷き詰める ・ブラウザのリサイズに応じて配置も変わる といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります その中でも今回は定番のmasonryを使い、 ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます 基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ! 完成イメージは(手前味噌ですが)こんなかんじです↓ tokyotownname.com では始めます、 画像がいくつかトップにあり、 その下に「もっと読む」ボタンがあるとします。ありがちですね。 <!-- タイルビュー --> <div id="images"> <div id="image-unit">....</div> <div id="image-unit">....</div> ...... <div id
【Three.js】360°パノラマ 動画プレイヤーの作り方（PCブラウザのみ） - Qiita
概要 昨今、VRブームに押されてFacebookやYouTubeで360°パノラマ動画の投稿が可能になったり、THETA Sやその他、360°撮影可能な新しいカメラが続々出るなど、360°パノラマ動画を取り巻く環境が大きく変わってきています。 そういった状況の中で、今回はThree.jsで360°の動画プレイヤーを作ったので、そのつくり方をご紹介します。 とは言っても、難しい話ではなく、以下の記事にあるコードのテクスチャの静止画の部分を動画に変えただけであります。 なので、下記の記事のコードの一部を修正します。 【Three.js】360°パノラマビューワーを作ってグリグリ操作出来るようにした（スマホ対応） ただ、注意事項として動画テクスチャを使う場合、HTML5のvideoタグを利用しているのでスマホで開いても、動画は再生されません。(ここはいづれ何とかする) 今回の修正で対応した項目は
gulp で jade と SCSS と CoffeeScript 動かす為のメモ - Qiita
感想 Googleさんが作った Web Starter Kit の設定ファイルを読んで理解できる感じが衝撃的。 151104 追記 Web Starter Kit の gulpfile に babel 使われるようになって慣れてないと読み辛い。。 gulpfile.babel.js grunt より簡単にいろいろとできるんだろうなって思えた。 勉強させていただいた記事（ググった順） タスクランナーgulp入門 gulp.js その4 プラグイン一覧 BrowserSyncでうきうきレスポンシブ対応アプリ開発 LiveReload から BrowserSync に乗り換えてる git pushがrejectされたときの解決の手順 non-fast forward エラーで強制的にpushする gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Git】基本コマンド - Qiita
