<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ruby | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/ruby/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Sat, 23 Jun 2018 09:19:11 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>compassからSASSとAutoprefixer</title>
		<link>https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/</link>
					<comments>https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Sat, 23 Jun 2018 09:19:11 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[autoprefixer]]></category>
		<category><![CDATA[compass]]></category>
		<category><![CDATA[ruby]]></category>
		<guid isPermaLink="false">https://uda2.com/blog/?p=2241</guid>

					<description><![CDATA[<p>よく使うCSS3のプロパティが正式採用されベンダープレフィックスを使う頻度が減りつつあったのに新しいプロパティが現れ再びベンダープレフィックスに悩まされるようになった。 「compassのmixinでええやん」という意見</p>
The post <a href="https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/">compassからSASSとAutoprefixer</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>よく使うCSS3のプロパティが正式採用されベンダープレフィックスを使う頻度が減りつつあったのに新しいプロパティが現れ再びベンダープレフィックスに悩まされるようになった。<br />
「compassのmixinでええやん」という意見もあるかもしれないがcopassは結構前のブラウザまで対応してるので肥大化しがちだし、CSS-GRIDはcompassは未対応で手作業でベンダープレフィックスを入れるのはIEだけ数え方が違って面倒なので<a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a>で自動化する事にした。<br />
Autoprefixerは作成されたcssからベンダープリフィックスを取ったり追加したりするツールなのですが優秀なのはベンダープレフィックスを付けるか付けないかの判断に使うサイト<a href="https://caniuse.com/" target="_blank">Can I use&#8230;</a>やブラウザシェアを参考にしてきめ細やかなブラウザ対応をしてくれるのでAutoprefixerを使うとベンダープリフィックスを付けるかどうかを考える事すらなくなる。<br />
<span id="more-2241"></span><br />
以前は<a href="https://uda2.com/blog/prepros-sass-uglify/" target="_blank">Preprosが有料化したので乗り換えた</a>に乗せたようにローカル環境（WindowsやMac）にsassを入れてバッチファイルからwatchコマンドで監視しscssをcssに変換していた。<br />
Autoprefixerの導入方法は色々あるみたいだが今回はローカルサーバーにsassとAutoprefixerを入れてcompasで監視してsassでcss化し、そのcssをAutoprefixerでベンダープレフィックスを付ける流れにします。</p>
<p>まずはruby本体のアップデート<br />
<strong>$ sudo update_rubygems</strong><br />
続いてgemのアップデート<br />
<strong>$ sudo gem update</strong><br />
gemの一覧を確認したがcompassもautoprefixerも入ってませんでした。<br />
<strong>$ gem list</strong><br />
compassのインストール（sassも勝手にインストールされます）<br />
<strong>$ sudo gem install compass</strong><br />
なぜかruby.hに「mkmf.rb」が無いと言われてインストールが途中で止まったがgoogle先生の言うとおり「ruby-dev」を入れる（下記はDebianのstretch以降のインストールのコマンドなのでOSによって異なります）<br />
<strong>$ sudo apt install ruby-dev</strong><br />
そして再度挑戦するとインストールできた。<br />
<strong>$ sudo gem install compass</strong><br />
念のためインストール出来てるか確認。<br />
<strong>$ sass &#8211;version</code></strong><br />
<strong>$ compass version</code></strong><br />
ようやく最後にautoprefixerをインストール<br />
<strong>$ sudo gem install autoprefixer-rails</strong></p>
<p>ここからは各サイトごとにcompassの設定ファイルを作成していく、cdで任意の場所に移動してcompassのcreateコマンドで設定ファイル「config.rb」を作成する。下記のようにcreateコマンドの引数で事前に設定する事も出来るが、あくまで「config.rb」を作成する為のコマンドなので間違えたら消してやり直せるし、viで書き直せる。<br />
<em>&#8211;sass-dir</em>　：　sassの格納場所<br />
<em>&#8211;css-dir</em>　：　cssの出力場所<br />
<em>&#8211;javascripts-dir</em>　：　javascriptの格納場所<br />
<em>&#8211;images-dir</em>　：　画像の格納場所<br />
<em>&#8211;output-style</em>　：　出力タイプ<br />
<em>&#8211;require</em>　：　ライブラリ読み込み<br />
<em>&#8211;bare</em>　：　デフォルトファイルを作成しない<br />
<strong>$ cd /var/www/html</strong><br />
<strong>$ compass create &#8211;sass-dir &#8220;css&#8221; &#8211;css-dir &#8220;css&#8221; &#8211;javascripts-dir &#8220;js&#8221; &#8211;images-dir &#8220;images&#8221; &#8211;output-style &#8220;compact&#8221; &#8211;require &#8220;autoprefixer-rails&#8221; &#8211;bare</strong></p>
<p>個人的には「.sass-cache」フォルダがコンテンツの場所に作成されるのがいやなので移動させる。（絶対パスにするとWEBルートからになるので相対パスで記述する）<br />
<strong>$ vi config.rb</strong></p>
<pre><code>cache_dir = "../.sass-cache"</code></pre>
<p>次に本題のAutoprefixerをcssに変換されるタイミングで実行する。<br />
<em>browsers</em>　：　対応ブラウザの指定「&gt; 1%」はユーザーが1%以上いるブラウザ、「&#8221;last 2 versions&#8221;」は最近の2バージョンまでのブラウザ。さらにruby版には無いが「&gt; 1% in JP」として日本でユーザーが1%以上いるブラウザという指定もできる。<br />
<em>grid</em>　：　css gridにもベンダープリフィックスを付けるか<br />
<em>flexbox</em>　：　flexboxにもベンダープリフィックスを付けるか<br />
<em>remove</em>　：　既にあるベンダープリフィックスを削除するか</p>
<pre><code>on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.process(css, browsers: ["&gt; 1%","last 2 versions"] , grid: true, flexbox: true, remove: false)
  end
end</code></pre>
<p><strong>$ compass watch</strong></p>The post <a href="https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/">compassからSASSとAutoprefixer</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ルビは結局rubyなの？</title>
		<link>https://uda2.com/blog/ruby/</link>
					<comments>https://uda2.com/blog/ruby/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Fri, 15 Jan 2010 17:27:03 +0000</pubDate>
				<category><![CDATA[うだうだ]]></category>
		<category><![CDATA[ruby]]></category>
		<guid isPermaLink="false">http://uda2.com/blog/?p=895</guid>

					<description><![CDATA[<p>文字にルビを振るのはrubyを使うと昔は書かれていたが実はInternetExplorerの独自タグ（要素）で他のブラウザでは表示が微妙（ルビが括弧等で追加される）だった。 だが、子供向けのサイトとかを作る時などルビは振</p>
The post <a href="https://uda2.com/blog/ruby/">ルビは結局rubyなの？</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>文字にルビを振るのはrubyを使うと昔は書かれていたが実はInternetExplorerの独自タグ（要素）で他のブラウザでは表示が微妙（ルビが括弧等で追加される）だった。<br />
だが、子供向けのサイトとかを作る時などルビは振りたい時が出てくる。<br />
そこでWEBの制作者はルビを使いたい場合はcssで無理矢理文字をちっちゃくして上に乗せる様に記述する必要があった。<br />
もちろん、InternetExplorerの様に対応ブラウザに適用すると変な表示になるので省く必要がある。</p>
<p>MyReleaseも同様にInternetExplorer以外のルビをCSSでなんとかルビっぽく表示していたんだけど、β版のGoogleCromeで確認してたところ表示が消えてしまった。そこでInternetExplorerと同様にルビのCSSを外すと普通に表示出来た。<br />
古参の「InternetExplorer6」と最新のモダンブラウザの「GoogleCrome」のみが対応してるという変な状況なので調べてみると。</p>
<p>HTML4やXHTML1.0は勧告されていなかったのに<a href="http://www.w3.org/2001/05/xhtml-ruby-pressrelease.html.ja" target="_blank">XHTML1.1からはW3Cでrubyが含まれた</a>様だ。<br />
更に調べてみると、<a href="http://www.yomotsu.net/wp/?p=425" target="_blank">6 月 10 日 に更新された HTML 5 の草案と、ruby について | ヨモツネット</a>によるとHTML5にも勧告されてるが、XHTML1.1のとは微妙に違う様だ。<br />
ようやく、日の目を見たルビだが、前途多難だ。</p>The post <a href="https://uda2.com/blog/ruby/">ルビは結局rubyなの？</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/ruby/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
