<p>レスポンシブウェブデザインなどPCサイトで確認しつつ、スマートフォン実機でもすぐに確認したい時など、皆さんどうしていますか？</p>
<p>URLを様々な方法で送ってコピペしたり、iCloudやChromeではタブの同期という機能も持っていたりしますが、同期もリアルタイムでしてくれなかったりと手間が掛かりますよね。</p>
<p>「Chrome to Mobile」というChromeの拡張機能は、開いているページを瞬時に、スマートフォンに送ってくれます。</p>
<h2><span style="font-size: 1em; line-height: 1.5em;">設定方法</span></h3>
<h3>モバイル側</h4>
<p>まず、スマートフォン、タブレット側で設定をします。</p>
<p>iphone5とNexus7のキャプチャーを掲載します。</p>
<p>どちらもほぼ同じUIでChromeアプリの設定画面に項目があります。</p>
<h4>iphone5</h6>
<p><a href="/uploads-archive/2014/03/IMG_1193.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4552" alt="IMG_1193" src="/uploads-archive/2014/03/IMG_1193-169x300.jpg" width="169" height="300" srcset="/uploads-archive/2014/03/IMG_1193-169x300.jpg 169w, /uploads-archive/2014/03/IMG_1193-576x1024.jpg 576w, /uploads-archive/2014/03/IMG_1193-228x404.jpg 228w, /uploads-archive/2014/03/IMG_1193.jpg 640w" sizes="(max-width: 169px) 100vw, 169px" /></a> <a href="/uploads-archive/2014/03/IMG_1192.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4553" alt="IMG_1192" src="/uploads-archive/2014/03/IMG_1192-169x300.jpg" width="169" height="300" srcset="/uploads-archive/2014/03/IMG_1192-169x300.jpg 169w, /uploads-archive/2014/03/IMG_1192-576x1024.jpg 576w, /uploads-archive/2014/03/IMG_1192-228x404.jpg 228w, /uploads-archive/2014/03/IMG_1192.jpg 640w" sizes="(max-width: 169px) 100vw, 169px" /></a></p>
<h4>Nexus7</h6>
<p><a href="/uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4554" alt="Screenshot_2014-03-25-16-35-29" src="/uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29-187x300.jpg" width="187" height="300" srcset="/uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29-187x300.jpg 187w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29-640x1024.jpg 640w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29-228x364.jpg 228w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-35-29.jpg 1200w" sizes="(max-width: 187px) 100vw, 187px" /></a> <a href="/uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4555" alt="Screenshot_2014-03-25-16-34-56" src="/uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56-187x300.jpg" width="187" height="300" srcset="/uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56-187x300.jpg 187w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56-640x1024.jpg 640w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56-228x364.jpg 228w, /uploads-archive/2014/03/Screenshot_2014-03-25-16-34-56.jpg 1200w" sizes="(max-width: 187px) 100vw, 187px" /></a></p>
<h3>パソコン側</h4>
<p>Chromeで以下の拡張機能をインストールします。</p>
<p><a href="https://chrome.google.com/webstore/detail/chrome-to-mobile/idknbmbdnapjicclomlijcgfpikmndhd?hl=ja" target="_blank">https://chrome.google.com/webstore/detail/chrome-to-mobile/idknbmbdnapjicclomlijcgfpikmndhd?hl=ja</a></p>
<p>インストールが終わるとURLのバーの右端にアイコンが出現します。</p>
<p><a href="/uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4557" alt="スクリーンショット_0026-03-25_16_52_25" src="/uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec-300x76.jpg" width="300" height="76" srcset="/uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec-300x76.jpg 300w, /uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec-1024x261.jpg 1024w, /uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec-228x58.jpg 228w, /uploads-archive/2014/03/f0931a63c5c8f8dbc1cef19f6ea901ec.jpg 1136w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アイコンをクリックすると、先ほど設定した端末が出ており選択をして「送信」をするとまもなく送られてきます。</p>
<h2>端末の削除方法</h3>
<p>最後に以前に迷った項目があったので記載しておきます。</p>
<p>iphone4から5に機種変更して4は使うことがなくなったので、削除をしたい時は以下を参照下さい。</p>
<p><a href="https://support.google.com/chrome/answer/2451559?p=ib_chrome_to_mobile&amp;rd=1 " target="_blank">https://support.google.com/chrome/answer/2451559?p=ib_chrome_to_mobile&amp;rd=1 </a></p>
<blockquote><p>携帯端末にアクセスできなくなった場合や、先に Chrome から切断せずに携帯端末をリセットした場合、[Chrome to Mobile] 拡張機能をクリックすると、リストに端末が引き続き表示される場合があります。Google クラウド プリントの管理ページを使用して、デバイスを削除できます。</p>
<ol>
<li><a href="https://www.google.com/cloudprint#printers" target="_blank">Google クラウド プリントの管理ページ</a>にアクセスします。</li>
<li>削除するデバイスを選択します。</li>
<li>[<strong>削除</strong>] をクリックします。</li>
</ol>
<p>同じデバイス名が 2 回表示され、どちらを削除すればよいかわからない場合は、両方とも削除できます。次回、拡張機能をクリックすると、Chrome は自動的に有効なデバイスに接続します。</p></blockquote>
<p>ということで何故か<a href="https://www.google.com/cloudprint#printers" target="_blank">Google クラウド プリントの管理ページ</a>で削除をします。</p>


スマートフォンでの実機確認は「Chrome to Mobile」で決まり！

<p>本日は、htmlやcssはたまたjavascriptのソースを綺麗にしてくれるwebサービスを紹介します！<br />
もちろんお金等はかかりません。</p>
<p>綺麗に書くように意識しつつも、<br />
忙しい時期や、修正が繰り返し発生したりすると、<br />
ソースを綺麗にする意識はどこかにいってしまいがちですよね・・・(自分だけでしょうか？)</p>
<p>そんな時に、ソースを書き終わったら、<br />
このツールを使えば、ソースがあっという間にキレイになります。</p>
<p>&nbsp;</p>
<h2>PrpCSSor</h3>
<p><a href="http://procssor.com/process" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4547" alt="ProCSSor - Advanced CSS Prettifier" src="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg" width="505" height="341" srcset="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg 1024w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-300x203.jpg 300w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-228x154.jpg 228w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier.jpg 1117w" sizes="(max-width: 505px) 100vw, 505px" /></a><br />
こちらはcss専用で、オプションが豊富です。</p>
<p>・インデントの設定（1から4の半角スペース）<br />
・括弧の位置の指定<br />
・複数セレクタ指定の際、改行or一行の選択<br />
・親子関係の際にインデントの指定</p>
<p><a href="http://procssor.com/process" class="link" target="_blank">PrpCSSor</a></p>
<h2>DIRTYMARKUP</h3>
<p><a href="http://www.dirtymarkup.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4545" alt="Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code" src="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg" width="506" height="337" srcset="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg 1024w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-300x200.jpg 300w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-228x152.jpg 228w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b.jpg 1132w" sizes="(max-width: 506px) 100vw, 506px" /></a><br />
こちらは、html,css,javascriptも整形出来ます。<br />
デバック機能もあるようです。</p>
<p>・インデントの設定（1から4の半角スペース、タブ）</p>
<p><a href="http://www.dirtymarkup.com/" class="link" target="_blank">DIRTYMARKUP</a></p>
<h2>ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</h3>
<p><a href="http://u670.com/pikamap/htmlseikei.php" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4546" alt="ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）" src="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg" width="503" height="340" srcset="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg 1024w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-300x203.jpg 300w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-228x154.jpg 228w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35.jpg 1117w" sizes="(max-width: 503px) 100vw, 503px" /></a><br />
こちらはHTMLのみになりますがシンプルなので、<br />
単純に整形したい場合は、こちらでやるのがいいかと思います。</p>
<p>・インデントの設定（1,2,4の半角スペースかタブ）<br />
名前の通りデバッグ機能もあるようです。</p>
<p><a href="http://u670.com/pikamap/htmlseikei.php" class="link" target="_blank">ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</a></p>
<p>個人的にはソースは汚すぎなければいいという考えですが、<br />
googleさんでhtmlが「こう書いたほうがいいよ」というレギュレーションがあるみたいなので、<br />
それに沿ってみようかなと思う今日この頃です。</p>
<p>それはコチラ</p>
<p><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" target="_blank">Google HTML/CSS Style Guide</a></p>
<p>これを翻訳したのがコチラ、<br />
<a href="http://re-dzine.net/2012/05/google-htmlcss-style-guide/" target="_blank">「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN</a></p>
<p>中には、cssをアルファベット順に書くという面倒くさそうなものもあります・・・</p>
<p>googleが提唱しているのであれば、<br />
それにのっとるのがベストなのかもしれませんね・・・</p>


HTMLやCSSをキレイに整形してくれるオンラインツールご紹介

<p>ヤマトホールディングスが、中国全土への配送サービスを開始するとの発表がされた。<br />
中国最大の物流会社である中国郵政集団(チャイナポスト)と提携し、日本から中国全土への配送サービスを始めるとのこと。<br />
中国郵政集団は中国で唯一中国全土への配送網を持っており、日本から3〜5日での配送が可能になるという。<br />
料金は1kgまでが約2,000円、2kgまでが約3,500円となっており、頻度による割引もあるとのこと。<br />
「日本で培った使いやすく安定サービスを海外で展開する」という戦略を進めているとのことで、<br />
日本のEC事業者としては、今までの業務フローを大きく変えずに中国展開ができるようになる。</p>
<p>これは今後日本の越境ECが繁栄する上で大きな一歩だと思った。<br />
中国のECは急速に発展しており、市場規模は6.6兆円、EC化率は6%と言われている。(日本は9.5兆円、3.1%)<br />
人口や成長率を考えると、2014年度にも日本を上回る可能性がある。<br />
また、中国は越境ECも成長しており、2012年度に中国が日本及び米国からECで購入した総計は2,868億円となり<br />
前年同期比123%となっている。<br />
経済産業省の試算によると、日本から中国へのECでの販売は2020年にも9000億円に達するとされており、魅力的な市場であることは明らかだ。<br />
そこに日本のEC事業者が簡単に参入できるとなると、中小事業者でも中国向け販売で成功するところが複数出てくる可能性が高い。<br />
中国向け販売を足がかりに、EC事業者と運送会社がノウハウを構築し、次のステップに進めれば<br />
他の国への販売スキームも作りやすくなり、小さな店舗が数十カ国と取引するグローバル企業となるという当社の理念に近づくことも十分可能になる。</p>
<p>売り手、買い手ともに、返品や不良品、詐欺など懸念点はたくさんあり、これらをいかに整備するかで今後の越境ECの成長は大きく変わると思う。<br />
多言語でのサポートサイトやガイドラインを国若しくはそれに準ずる機関がこの分野に力を入れ、取り締まるのと取引の円滑化をしてもらえればと強く思う。</p>


ヤマト通販事業者向け中国全土配送サービスの開始を発表

レスポンシブ＆タッチ対応！スライダーjQueryプラグイン「SlidesJS」

<p>当社運営サイトコンペナビ(<a href="http://compe.sterfield.jp/" target="_blank">http://compe.sterfield.jp/</a>)にてコンペ主催のお手伝いをさせていただいた</p>
<p>第1回 行田市CMコンテストが本日表彰式を終え、無事終了した。</p>
<p>&nbsp;</p>
<p>1回目であるということ、行田まで足を運び撮影をする必要があること</p>
<p>という障壁があり、10件程度集まれば良い方と主催者にお伝えしていたが、</p>
<p>結果として36件もの応募を頂いた。</p>
<p>実物の公表はまだ主催者側で無いので伏せるが、クオリティが高い作品が多かったと思う。</p>
<p>成功と言える形で完了し、胸を撫で下ろしているわけだが、</p>
<p>今一度初心に帰ってコンテストをやる意味、コンペナビを使うメリットを考えてみた。</p>
<p>&nbsp;</p>
<h2>コンテストを主催する意味</h3>
<p>・プロを含む複数の人からアイデアをもらえる</p>
<p>募集のしかたによって、プロ禁止や学生限定などターゲットを絞って作品やアイデアの応募ができる。</p>
<p>例えば女性向けのアパレル企業がキャッチコピーを募集すると、</p>
<p>ターゲットの客層に限定したコンテストにすることで企業側の意図と顧客のニーズをマッチさせることができる。</p>
<p>また、賞をその企業の商品数十万円分などとすればその企業の製品が好きな人が集まりやすい。</p>
<p>&nbsp;</p>
<p>・応募(受賞)作品の著作権を得られる</p>
<p>例えば今回の場合はCMコンテストだったが、多くのコンテストの場合、</p>
<p>受賞作品は賞や賞金と引き換えに主催者側に作品の所有権若しくは使用権が与えられる。</p>
<p>要は主催者の思うとおりに使用できる。</p>
<p>&nbsp;</p>
<p>・話題になる</p>
<p>コンテストはアイデアや作品を募集するということを1つのイベントにすること。</p>
<p>プレスリリースができるし、メディアに取り上げられやすい。</p>
<p>あとはSNSとの親和性も高いため話題になりやすいし、ファンを増やせる要素が多い。</p>
<p>&nbsp;</p>
<h2>コンペナビを使うメリット</h3>
<p>・過去5年間のコンテストデータから適切な企画が立てられる</p>
<p>例えば4月から動画コンテストを開催したい場合、過去のデータからこの時期に行われている動画コンテストと</p>
<p>その賞金や募集要項など細かい情報がコンペナビのデータベースに入っている。</p>
<p>応募者がかぶりそうな場合は競合のコンテストより賞金を上げたり、応募者層をかぶらないよう内容や時期を変更するという判断ができる。</p>
<p>あとは過去の広告方法に対する募集数のデータを参照することによって戦略も立てやすい。</p>
<p>&nbsp;</p>
<p>・業界トップクラスの掲載&amp;アクセス数</p>
<p>業界トップクラスの掲載数とアクセス数があり、トップページ上に</p>
<p>募集期間中広告をジャックすることができるため、複数の応募者にリーチすることができる。</p>
<p>&nbsp;</p>
<p>・応募システムがある</p>
<p>データでの応募が可能なコンテストでは、コンペナビに応募フォームを設置し</p>
<p>データのアップロードもできる機能がある。</p>
<p>そのため手続きなどがいらず手軽に応募できる。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


第1回 行田市CMコンテスト

<p>テレビを見ている時にはそれほど気にはしないかもしれないが、ほぼ全ての映像には音楽やＳＥ（効果音）がつけられている。もし今テレビの近くにいるなら少しだけ電源を入れて観てもらえれば、どのチャンネルでも映像のバックで何かしらの音楽が流れているはずだ。</p>
<p>このＢＧＭやＳＥをつけているのが「音効さん」と呼ばれる仕事をしている人たちだ。音効とは音楽効果の略で、ほぼ全ての番組には専属の音効さんがいる。</p>
<p>音楽効果と聞くと時代劇の殺陣シーンに「カキン！」「グサッ！」といった音をおつけるような仕事をイメージするかもしれないが、そういったＳＥ以外にもシーンごとのＢＧＭをつけたり、バラエティ番組に笑い声を足したりと、音効さんの作業次第でＶＴＲの最終的な印象は大きく変わる。</p>
<p>実はこの音効さん、そのへんのタレントやテレビ局のお偉いさんよりも稼いでいる人が何人もいる。音効さんの仕事はＶＴＲにとってかなり重要なものだが、作業に対してのギャラがものすごく高いというわけではない。音効さんの中で稼いでいる人が存在するのには「からくり」がある。</p>
<p>その「からくり」は番組中に流れている曲に隠されている。</p>
<p>JASRAC（日本音楽著作権協会）という団体の名前を一度は聞いたことがあるのではないだろうか、知らない人はＣＤのケースやディスクを見てほしい。ほとんどのＣＤにはJASRACのマークがついているはずだ。</p>
<p>このJASRACは音楽の著作権を管理する団体で、JASRACに登録された曲の使用料を使用者からしっかり徴収し、作曲者や作詞者にきちんと配分するのが仕事だ。JASRACに登録された曲を使用する場合には、個人的に楽しむ場合を除いて音楽使用料が発生する。</p>
<p>この音楽使用料はカラオケでも発生しているし、もちろん、映画、ＣＭ、ラジオ、テレビでも発生している。YouTubeに動画をアップする際に著作権フリーの曲をわざわざつけたりするのも、この音楽使用料が発生してしまうためだ。</p>
<p>この音楽使用料は使用方法によって料金が違う、大きな媒体ほど１曲を１回使用する時の料金は高くなると言える。テレビ局の場合はルールが異なり、年間の放送事業収入の１．５％が音楽使用料となる。つまり年間で数億円の使用料をＪＡＳＲＡＣに支払っているのだ。ＪＡＳＲＡＣはこの使用料を使われた曲が多い順に権利者へ配分する。テレビでよく使われた曲の権利者は、その分多くの使用料がもらえるという仕組みだ。</p>
<p>ここで音効さんに話を戻そう。テレビ番組の曲を決めているのは音効さんである、つまりどの権利者がテレビ局が払う巨額の使用料をどれだけもらえるのを決めるは音効さん次第なのだ。</p>
<p>そして音効さんが稼ぐ「からくり」とはこうだ。音効さん自らがＢＧＭなどの曲を作りＪＡＳＲＡＣへ登録をする、その曲を自分が担当する番組の色んな場所で使用することで使用料が得るという事が出来てしまうのである。</p>
<p>これが平日の昼に毎日放送しているような帯番組といわれる情報バラエティやニュース番組の場合、担当している音効さんが毎回自分の曲を使用していれば相当な使用料になる。</p>
<p>音効さんではないが、過去に同じ番組を担当していた総合演出が自らオープニングテーマを作曲して使用していた。当時はテレビの演出も作曲もできるなんて凄いなと思っていたが、もしかしたら使用料狙いの行動だったのかもしれない。ちなみにその番組は平日に毎日やっていた帯番組だった。</p>
<p>正直テレビ業界で働いていても音楽使用料を抑えようという人はいない、人が気にせずに支払うお金をうまく得る事が成功の近道なのかもしれない。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


テレビ業界でタレントより稼いでいる裏方がいる！？

<p>とても鋭いサービスを見つけたのでシェア。<br />
<a href="http://www.fromjapanlimited.com/" target="_blank">http://www.fromjapanlimited.com/</a></p>
<p>バナーをはるだけで海外販売ができるというとても目を引くサービス。<br />
直感的に切り口が鋭いというかセンスが良いと思った。</p>
<p>特長は<br />
・バナーを貼るだけで海外に販売できる<br />
・初期費用、月額0円<br />
・回収リスク無し<br />
・顧客対応代行<br />
となっており、手軽に既存のサイトに以下のようにバナーを貼るだけで設定は完了とのこと。</p>
<p><a href="/uploads-archive/2014/03/place_sample.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4510" alt="place_sample" src="/uploads-archive/2014/03/place_sample-300x219.png" width="300" height="219" srcset="/uploads-archive/2014/03/place_sample-300x219.png 300w, /uploads-archive/2014/03/place_sample-1024x747.png 1024w, /uploads-archive/2014/03/place_sample-228x166.png 228w, /uploads-archive/2014/03/place_sample.png 1200w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>仕組みとしてはたぶん<br />
・バナーはおそらくformになっており価格や加盟店情報がサービス提供元に送られる<br />
・共通の決済画面で決済<br />
・決済はクレジットカードとなっており回収リスクをカバー<br />
・サービス提供元は決済代行による収益を得る<br />
という流れではないかと個人的には予想。</p>
<p>以下のようなECサイトにはとても助かる機能だと思う。<br />
・決済会社がグローバル決済に対応していない<br />
・ASPが多言語対応していない</p>
<p>あと、顧客対応をしてくれるというのは大きいと思う。<br />
(商品についての説明ができるのかは不明)</p>
<p>あとは本サービスで配送までやってくれるのかは分からないが、<br />
そこのノウハウと体制があれば非常に強いと思った。</p>
<p>とても刺激的で参考にしたいサービスだ</p>


【良いサービス】バナーをはるだけで海外販売

css3のtransformを使って画像のモーダルウィンドウを作ってみた

<p><strong>What&#8217;s hackathon?</strong></p>
<p>A <b>hackathon</b> (also known as a <b>hack day</b>, <b>hackfest</b> or <b>codefest</b>) is an event in which computer programmers and others involved in software development, including graphic designers, interface designers and project managers, collaborate intensively on software projects. Hackathons typically last between a day and a week. Some hackathons are intended simply for educational or social purposes, although in many cases the goal is to create usable software.</p>
<p>The word &#8220;hackathon&#8221; is the words of &#8220;hack&#8221; and &#8220;marathon&#8221;, where &#8220;hack&#8221; is used in the sense of playful, exploratory programming, not its alternate meaning as a reference to computer crime. (ref: http://en.wikipedia.org/wiki/Hackathon)</p>
<p><strong>Code for Change Myanmar</strong></p>
<p>A new initiative to help the tech community in Myanmar tackle some of the country&#8217;s most pressing problems. Code for Change Myanmar is supported by <a title="Internews" href="http://www.internews.org/" target="_blank">Internews</a>, an international NGO, whose mission is to empower people through better access to media and information. (ref: http://www.codeforchangemyanmar.org/)</p>
<p><strong>Who will involve?</strong></p>
<p>Myanmar’s young developers and designers join the event to develop the apps which would solve daily issues of the people.  The event is aimed at solving daily problems of the people with new ideas and technologies, according to its organizers.</p>
<p><em>Two main parties</em></p>
<p>#<em>problem solver#</em></p>
<p>__ Myanmar’s best developers, designers and entrepreneurs come together to use technology to solve some important problems in Myanmar. The problems are being submitted by NGOs/CSOs.</p>
<p>#<em>problem submitter</em>#</p>
<p>__NGO/CSO in Myanmar</p>
<p>__working on an important issue or problem and need technology help</p>
<p>__submit such problems to Myanmar’s first-ever hackathon.</p>
<p><strong>Hackathon Day in Myanmar</strong></p>
<p>&#8211; held on 15-16 March 2014 in Yangon.</p>
<p>The event brought developers, designers and entrepreneurs together for<strong> 48 hours</strong> to figure out ways in which technology could help address some key problems in Myanmar.</p>
<p><strong>Powered By</strong></p>
<p>&#8211; supported by <a title="The World Bank" href="http://www.worldbank.org/en/country/myanmar" target="_blank">The World Bank</a>, <a title="Ooredoo Myanmar" href="http://www.ooredoo.com.mm/" target="_blank">Ooredoo Myanmar</a>, and <a title="Singtech Myanmar" href="https://www.facebook.com/singtechmm" target="_blank">Singtech Myanmar</a></p>
<p>Myanmar&#8217;s first-ever hackathon event was successfully finished and the first price is won by &#8220;Nil Bug&#8221; team with the title of &#8220;Location-based pest alert and community network for farmers&#8221;.(Proud of you Myanmar guys)</p>
<p>As a summary:</p>
<ul>
<li>76 hackers</li>
<li>17 teams</li>
<li>8 NGOs’ problems</li>
<li>48 hours</li>
</ul>
<p>__credited to codeforchangemyanmar.org</p>
<p>__credited to http://blog.programmableweb.com/2011/08/08/the-evolving-face-of-the-hackathon/ for main image</p>
<p>Enjoy!!!</p>
<p>&nbsp;</p>


First Hackathon event in Myanmar

<p>symfony2の暗号化の仕組みを学んで、普通のプロジェクトでも使えるかと思います。</p>
<h2>流れ</h3>
<p>１、まずpasswordとsaltをmergeする。(merge後の文字列は、password.&#8221;{&#8220;.salt.&#8221;}&#8221; になる)<br />
２、merge後の文字列を指定アルゴリズム（md5、sha512など）で暗号化（phpのhash関数を使う、復号が不可能）<br />
３、指定回数（iterations）で重複して暗号化する。<br />
４、base64_encodeかbin2hexを使ってDBに保存</p>
<h2>設定ファイル</h3>
<p>symfony2のデフォルトのセキュリティ設定ファイルはapp/config/security.ymlです。</p>
<p></p>

		<div id="crayon-64953fd598fc9634978689" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
security:
    encoders:
        namespace/to/userclass:
            algorithm:  sha512 // 暗号化を使うアルゴリズム
            iterations: 10 // 暗号化をやり続ける回数
            encode_as_base64: true // encodeでbase64を使うか。falseならbin2hexを使う</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd598fc9634978689-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598fc9634978689-2">2</div><div class="crayon-num" data-line="crayon-64953fd598fc9634978689-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598fc9634978689-4">4</div><div class="crayon-num" data-line="crayon-64953fd598fc9634978689-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598fc9634978689-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd598fc9634978689-1"><span class="crayon-i">security</span><span class="crayon-sy">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598fc9634978689-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">encoders</span><span class="crayon-sy">:</span></div><div class="crayon-line" id="crayon-64953fd598fc9634978689-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">namespace</span>/<span class="crayon-st">to</span>/<span class="crayon-i">userclass</span><span class="crayon-sy">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598fc9634978689-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">algorithm</span><span class="crayon-sy">:</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">sha512</span><span class="crayon-h"> </span><span class="crayon-c">// 暗号化を使うアルゴリズム</span></div><div class="crayon-line" id="crayon-64953fd598fc9634978689-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">iterations</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-h"> </span><span class="crayon-c">// 暗号化をやり続ける回数</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598fc9634978689-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">encode_as_base64</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-c">// encodeでbase64を使うか。falseならbin2hexを使う</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

symfony2の暗号化

<p>iOS7では、アプリのグループを選択したときに、グループのアイコンと一緒に背景も拡大されていて、</p>
<p>アイコンが近づいてくる感じをより強く感じることができます。</p>
<p>この動きがかっこいいと思ったので、</p>
<p>Webサイト上でもできないかと思い、jQueryを使ってやってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの(Firefox以外推奨)</p>
<p><a class="demo" href="/demo/ninomiya/43/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、ある要素がhoverになったときに、</p>
<p>bodyに設定した背景画像を拡大させるようにします。</p>
<p>HTMLは普通に組みます。</p>
<p>ただ今回の方法ではhtmlとbodyの高さを100%に設定する必要があるので、一画面内に閲覧する要素が収まっている必要があります。</p>
<p>&nbsp;</p>
<p>CSSの設定をします。</p>

		<div id="crayon-64953fd598de0773419965" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">CSS</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
html, body{ width:100%;height:100%;} 
body{
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; /*背景画像の大きさをbody要素いっぱいに表示*/
	overflow: hidden; /*画面外にはみ出した部分を隠します*/
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd598de0773419965-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-2">2</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-4">4</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-6">6</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd598de0773419965-1"><span class="crayon-k ">html, body</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-2"><span class="crayon-k ">body</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd598de0773419965-3"><span class="crayon-h">	</span><span class="crayon-e ">background-image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">../images/bg.jpg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-4"><span class="crayon-h">	</span><span class="crayon-e ">background-repeat</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd598de0773419965-5"><span class="crayon-h">	</span><span class="crayon-e ">background-position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-6"><span class="crayon-h">	</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">/*背景画像の大きさをbody要素いっぱいに表示*/</span></div><div class="crayon-line" id="crayon-64953fd598de0773419965-7"><span class="crayon-h">	</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">/*画面外にはみ出した部分を隠します*/</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlとbodyのwidthとheightを100%に設定します。</p>
<p>bodyに背景画像を指定し、background-size: coverで、body要素いっぱいに背景画像を表示するように設定します。</p>
<p>bodyのoverflowは、hiddenにする必要があります。</p>
<p>&nbsp;</p>
<p>jQueryで動きをつけます。</p>

		<div id="crayon-64953fd598de4051629978" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">javascript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){

	$("nav&gt;ul&gt;li").hover(function(){ //対象の要素をhoverしたときに実行
		$("html").animate({ //html要素を拡大し、拡大してよってしまう分だけ左に移動させる
			"width" : "125%",
			"margin-left": "-12.5%"
		}, 500);
	},function(){ //元に戻す
		$("html").animate({
			"width" : "100%",
			"margin-left": "0"
		}, 500);
	});

});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd598de4051629978-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-2">2</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-4">4</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-6">6</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-8">8</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-10">10</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-12">12</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-14">14</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-15">15</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd598de4051629978-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd598de4051629978-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"nav&gt;ul&gt;li"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">hover</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//対象の要素をhoverしたときに実行</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-4"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"html"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//html要素を拡大し、拡大してよってしまう分だけ左に移動させる</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-5"><span class="crayon-h">			</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"125%"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-6"><span class="crayon-h">			</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"-12.5%"</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-7"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-8"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//元に戻す</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-9"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"html"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-10"><span class="crayon-h">			</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-11"><span class="crayon-h">			</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-12"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd598de4051629978-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回の方法では、html要素を拡大することによって 背景を表示する領域を拡大し、</p>
<p>結果として背景画像が拡大されて表示されるようにしました。</p>
<p>背景を設定しているbody要素を拡大すれば背景画像も拡大されるように思いましたが、</p>
<p>body要素を拡大しても背景画像の大きさはそのまま固定されてしまい、うまく行きませんでした。</p>
<p>そこでbody要素を覆っているhtmlを拡大してみたところうまく行ったので、この方法を使いました。</p>
<p>ただこの方法だと、htmlを拡大したときに横方向のスクロールバーが出てしまうので、bodyにoverflow:hiddenを設定しています。</p>
<p>&nbsp;</p>
<p>DEMOではhoverした要素も拡大して、より動きをiOS7に近づけてみました。</p>
<p>カテゴリーで商品検索をするときなどに、この方法で直感的に操作できるのではないかと期待しています。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

jQueryでiOS7のようにアイコンを選択したときに背景を拡大させる方法を考える

<p>githubで管理されているサイトのリニューアルのお仕事を頂いておりまして、エラーページについてご依頼があったため、調べてみました。</p>
<p>通常のエラーページであれば、.htaccessを書き換えることでカスタムされた404などのエラーページを表示することが出来ます。</p>
<p>githubで管理している場合は、ドキュメントルートに<code>404.htmlを置くだけでよいようです。</code></p>
<h2>エラーページの設定方法</h3>
<p>ちなみに、通常エラーページを表示させる場合の記述</p>
<p>※表示させたいファイル名を「404.html」とした場合</p>
<blockquote>
<div>ErrorDocument 404 /404.html</div>
</blockquote>
<div>となり同様にErrorDocumentの後の数字を403、500などに変更すればそれに応じたエラーページが表示されます。</div>
<h2>githubのエラーページガイドライン</h3>
<div>さらにgithubの場合は、ガイドラインにエラーページの規程をしておりまして、それが以下になります。</div>
<div></div>
<div><a href="https://github.com/styleguide/templates/2.0" target="_blank">https://github.com/styleguide/templates/2.0</a></div>
<div></div>
<blockquote>
<div>Error pages should be built such that they require zero scripting, zero javascript, and zero dependency on anything whatsoever. That means static HTML with inline CSS and base64-encoded images.</div>
</blockquote>
<div>エラーページは、JavaScriptや他のスクリプトなどの外部ファイルに依存しないように構築すべきである。それは、style要素でCSSを記述し、base64でエンコードした画像を使用した静的なhtmlということ意味している。</div>
<div>
<blockquote><p>The following are banned from every error page:</p>
<ul>
<li>All <code>&lt;script&gt;</code> tags with an <code>src</code> attribute.</li>
<li>All JavaScript that loads external data.</li>
<li>All <code>&lt;link&gt;</code> tags.</li>
<li>All <code>&lt;img&gt;</code> tags with an <code>src</code> pointing to a URL.</li>
</ul>
</blockquote>
</div>
<div>エラーページは以下を禁止する。</div>
<div>
<ul>
<li>全てのsrcを含む&lt;script&gt;</li>
<li>全ての外部データを読み込むJavasript</li>
<li>全ての&lt;link&gt;タグ</li>
<li> 全てのURLを指定した<code>&lt;img&gt;タグ</code></li>
</ul>
<p>と記述されています。</p>
</div>
<div>さらに、上記ページないでテンプレートを入手することも出来るようになっています。</div>
<div></div>
<h2>まとめ</h3>
<p>このようにガイドラインが設定されていて読み込んでみると確かにその通りですね。</p>
<p>本来、それぞれの不具合によって、エラーページが表示される訳ですから、エラーページに外部ファイルを読み込ませて更なるエラーを誘発する、もしくは、リソースを無駄遣いするということを回避すべきだということですね。</p>


githubのカスタムエラーページの設定（404,500,503など）

<p>ミャンマーのタンテー鉄道運輸相（Than Htay）は、ヤンゴン市内に9つの鉄道路線を開設する計画を示して国際協力機構（JICA）と交渉し、計画が開始されました。</p>
<p>新設予定の９つの路線は以下のどおりです。</p>
<p>①ヤンゴン国際空港 － ダウンタウン線、<br />
②オッチン（Oak Kyinn） － ラインタヤ（Hlaingthaya）線、<br />
③パラミ（Parami） － 北ダゴン線、<br />
④パラミ（Parami） － オッチン（Oak Kyinn）線、<br />
⑤ヤンゴン中心部 － ハンターワディ国際空港線、<br />
⑥ヤンゴン中心部 － ティラワ線、<br />
⑦マハーバンドゥーラ通り沿線（Mahabandula Road）、<br />
⑧コンテー通り沿線（Merchant Road）、<br />
⑨バインナウン通り沿線（Bayint Naung Road）。</p>
<p>「JICAとヤンゴン管区政府は、ヤンゴン都市圏開発プログラム形成準備調査（都市交通）（Comprehensive Urban Transport Plan of the Greater Yangon：YUTRA）について、2012年12月21日から2014年11月28日まで連携して活動を実施する。中期計画には、総延長10.5キロの地下鉄と総延長11.3キロのケーブル鉄道の新設も盛り込まれており、その初期調査を継続して行う」と発表しました。</p>
<p>ヤンゴン市内で毎日の公共交通は280万人をのぼる大量の利用者にも関わらずサービスレベルが低く、不十分な車両維持管理や無秩序な運転により、事故率が高くなっています。<br />
また、車内はいつも非常に混雑していることが問題と見られています。</p>
<p>市内のもう一つの公共交通機関である環状鉄道は平均運行速度15キロメートル／時と遅く、駅から周辺地域へ向かうためのバスなど他交通との連携も不便なため、利用率は3%程度にとどまっている。</p>
<p>今回の計画では、効果的または持続可能性のある公共交通システムおよび道路ネットワークによって、ヤンゴン都市の住民が、都市におけるさまさまなサービスへのアクセシビリティとモビリティを確保する事を目標としています。</p>
<p>なお、ミャンマー鉄道運輸省は、ミャンマーの主要路線であるヤンゴン － マンダレー線、ヤンゴン － ピイ（Pyay）線、マンダレー － ミッチーナー（Myitkyina）線、バゴー（Bago） － モーラミャイン（Mawlamyine） － イェー（Ye） － ダウェイ（Dawei）線とヤンゴン環状線を対象に、3兆チャット（約3000億円）を利用した改修計画を公表している。</p>
<p>(ミャンマー新聞より)</p>
<p>計画とおり進めてほしいですね！</p>


ヤンゴンに鉄道9路線新設

<p>ここ数年で「Hulu」や「ひかりＴＶ」といったＶＯＤ（　ビデオ・オン・デマンド）サービスに加入してスマホやタブレット端末で映画やドラマを観ているという人はかなり増えたという印象を受ける。通勤の電車や駅のホームで動画を観ている人は珍しくなくなった。</p>
<p>約１年前の数字では有料の動画配信サービスの利用率は５．８％（出典：動画配信ビジネス調査報告書2013）、単純計算で少なくとも７５０万人以上の人が利用している事になる。</p>
<p>筆者自身もHuluに加入して海外ドラマなどをよく観ているが、ＶＯＤサービスを利用している人なら一度くらいは疑問に思った事があるのではないだろうか？「日本のテレビ番組が充実していないな」と。最近は少しずつ増えてきてはいるものの、海外の映画やドラマに比べると、需要が高そうなバラエティ番組や過去に高視聴率を記録したようなドラマはほとんど観る事ができない。</p>
<p>ＤＶＤ販売で記録的なセールスを出しているバラエティ番組はたくさんある、ＤＶＤを出して売れるならＶＯＤでもコンテンツとしてアップすれば人気が出て稼げそうなものだがなかなか増えない。</p>
<p>これには日本のテレビ業界特有のライツ契約が理由のひとつにある。</p>
<p>ここで言うライツ契約とはテレビ番組の制作側（テレビ局側）と出演者側との間に交わされている契約の事だ。通常、日本の芸能界で芸能プロダクションに所属しているタレントたちは「日本音楽事業者協会」や「映像実演権利者合同機構」といった団体に加盟している。<strong><br />
</strong></p>
<p>これはタレントの著作権・肖像権を守ったり雇用環境を改善する為のもので、テレビ業界では「日本音楽事業者協会」は「音事協」、「「映像実演権利者合同機構」は 「プレ（PRE=Performers&#8217; Rights Entrustment)」と呼ばれることが多い。</p>
<p>この音事協やプレを介した出演者側とテレビ局側の契約というのは、平たく言うと「再放送をする場合にもきちんとギャラを払ってね」という事。実は過去にオンエアされた映像を再び放送で使用する際、テレビ局から出演者に再びギャラが払われている。</p>
<p>なぜ再放送にもギャラが発生するのかというと、地上波のテレビでは放送枠に限りがあるので再放送で時間が埋められてしまった場合、その分タレントが新たに出演する枠が削られてしまう。タレントの雇用を守るという理由で、そういった契約が結ばれているのだ。</p>
<p>これは番組をまるごと再放送する場合も、過去のＶＴＲを一部だけ使う場合でも出演していたらギャラが発生する。テレビ業界で働く制作の人間は「音事協」と聞くと、ちょっと気が重くなるものだ。それは音事協やプレといった団体はかなり力のある存在だからでもある。制作の現場に入ったばかりのＡＤは先輩から「音事協は怒らせるな」とよく言われたりするものだ。</p>
<p>こういった契約の存在がタレントが出演する映像の二次使用でネックになっているのである。ＶＯＤの場合、何万回も再生されることになりその度にギャラを払うわけにもいかないので新しい形の契約を作る必要があるだか、その動きが鈍いのが現状だ。</p>
<p>新番組の制作が決定してタレントに出演を依頼する際にも、番組を動画配信するとういう契約になっていない場合は多い。過去の番組はもちろんだが最近の新番組でもヒットするかどうかは放送してみないと分からないという事もあり、なかなか難しいようだ。</p>
<p>中国など海外の動画投稿サイトには次から次へと日本のテレビ番組がアップされ、今ではかなり色んな人気番組が観られる。早めに手を打たないと、わざわざお金を出さなくても中国のサイトで何でも観られる状況になり日本のテレビ業界は大損することになる。（既に手遅れかもしれないが）</p>
<p>今後テレビ業界が地上波以外で業績を伸ばせるかは、こうした契約の形を柔軟に変えられるかどうかにかかっている。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


なぜＶＯＤのコンテンツに日本のテレビ番組が少ないのか？

【git】eclipseでgitを使う

<p>CSSの設定で、&#8221;overflow: auto&#8221; や&#8221;overflow:scroll&#8221;を指定したとき、</p>
<p>iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、</p>
<p>スクロールは可能なのですが、スクロールバーが表示されません。</p>
<p>そのままでは、そこがスクロール可能であるということがわかりづらく、</p>
<p>サイトとして使いづらくなってしまう可能性が高くなります。</p>
<p>&nbsp;</p>
<p>なんとか解決策はないかと探していたところ、</p>
<p>Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、</p>
<p>その方法についてご紹介いたします。</p>
<p>&nbsp;</p>
<p>↓こちらがデモです(ChromeもしくはSafariにてご覧下さい)</p>
<p><a class="demo" href="/demo/ninomiya/42/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundとborder-radiusとなります。</p>
<p><img decoding="async" loading="lazy" alt="-webkit-scrollbarの説明" src="/uploads-archive/2014/03/webkit-scrollbar.png" width="640" height="640" /></p>
<p>横方向のスクロールバーを別で指定する場合には、:horizontal疑似クラスを設定することで可能となります。</p>
<p>また、スクロールバーの動く部分(scrollbar-thumb)の前の部分は:start疑似クラス、後ろの部分は:end疑似クラスにて設定が可能です。</p>
<p>例：</p>

		<div id="crayon-64953fd5988a7717493864" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">CSS</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
.element{ /* 対象となる要素のクラス名が"element"の場合 */
	overflow: auto;
}
.element::-webkit-scrollbar{ /* スクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar-thumb{ /* スクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-track-piece:start{ /* スクロールバーの動く部分の前 */
	background: #9aadfc;
}
.element::-webkit-scrollbar-track-piece:end{ /* スクロールバーの動く部分の後ろ */
	background: #a3d2a0;
}
.element::-webkit-scrollbar-corner{ /* スクロールバー角 */
	background: transparent;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-2">2</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-4">4</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-6">6</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-8">8</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-10">10</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-12">12</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-14">14</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-16">16</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-18">18</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-20">20</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-22">22</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-24">24</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-26">26</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-28">28</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5988a7717493864-1"><span class="crayon-k ">.element</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 対象となる要素のクラス名が"element"の場合 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-2"><span class="crayon-h">	</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-4"><span class="crayon-k ">.element::-webkit-scrollbar</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-5"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-6"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-8"><span class="crayon-k ">.element::-webkit-scrollbar:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-9"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-10"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-12"><span class="crayon-k ">.element::-webkit-scrollbar-thumb</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-13"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-14"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-16"><span class="crayon-k ">.element::-webkit-scrollbar-thumb:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-17"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-18"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-20"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:start</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の前 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-21"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-22"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-23"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:end</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の後ろ */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-24"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#a3d2a0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-25"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-26"><span class="crayon-k ">.element::-webkit-scrollbar-corner</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー角 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-27"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">transparent</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-28"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こちらのサイト（→<a href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a>）で、より詳しい説明をしていただいてました。</p>
<p>&nbsp;</p>
<p>あまり細かな設定はできませんが、スクロールバーの存在を示す場合には十分に使うことができるので、</p>
<p>Webkitの利用が多いスマートフォンサイトなどでは実用としても利用できると思います。</p>
<p>&nbsp;</p>
<h3>参考サイト</h4>
<p><a class="link" href="http://dev.classmethod.jp/client-side/webkit-scrollbar-design/" target="_blank">Webkit独自拡張でスクロールバーのデザインを変更する</a></p>
<p><a class="link" href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a></p>

nino-eye (4).jpg

iPhoneやAndroidのサイトでスクロールバーをカスタマイズ

スライダーのアニメーションをマウスの位置によって変化するスクリプト

<p><b>Magento</b> is an <a title="Open source" href="http://en.wikipedia.org/wiki/Open_source">open source</a> e-commerce web application that was launched on March 31, 2008 under the name Bento. It was developed by Varien (now Magento, a division of eBay) with help from the programmers within the open source community but is now owned solely by eBay Inc.</p>
<p>Magento was built using parts of the <a title="Zend Framework" href="http://en.wikipedia.org/wiki/Zend_Framework">Zend Framework</a>. It uses the <a title="Entity–attribute–value model" href="http://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model">entity-attribute-value</a> (EAV) <a title="Database model" href="http://en.wikipedia.org/wiki/Database_model">database model</a> to store data. (__http://en.wikipedia.org/wiki/Magento)<sup id="cite_ref-3"><a href="http://en.wikipedia.org/wiki/Magento#cite_note-3"><br />
</a></sup></p>
<p><strong>Sample Frontend</strong></p>
<p><img decoding="async" loading="lazy" class="aligncenter" alt="magento_front_end" src="/uploads-archive/2014/03/magento_front-ecommerce_01.jpg" width="450" height="400" /></p>
<p><strong>Sample Backend</strong></p>
<p><img decoding="async" loading="lazy" class="aligncenter" alt="magento_end_end" src="/uploads-archive/2014/03/magento-3.png" width="450" height="400" /></p>
<p>There are three different editions:</p>
<p>1) Magento Community Edition  __open source software and can be downloaded for free.</p>
<p style="padding-left: 30px;"><em>http://www.magentocommerce.com/download</em></p>
<p>2) Magento Enterprise Edition __the high performance, scalable eCommerce solution for fast-growing and large businesses.</p>
<p style="padding-left: 30px;"><em>http://enterprise.magento.com/</em></p>
<p>3) Magento Go __hosted eCommerce solution for small businesses just getting started in eCommerce.</p>
<p style="padding-left: 30px;"><em>http://go.magento.com/tour/</em></p>
<p>With thousands of great eCommerce extensions(both free or paid version for all three editions) to pick from Magento-Connect.</p>
<p style="padding-left: 30px;"><em>http://www.magentocommerce.com/magento-connect/</em></p>
<p><strong>Demo Site(Enterprise)</strong></p>
<p><strong>Front End</strong> &#8211; http://enterprise-demo.user.magentotrial.com/</p>
<p><strong>Back End</strong>  &#8211; http://enterprise-admin.user.magentotrial.com/admin</p>
<p>The Magento Community Edition has been downloaded over 4 Million times, giving Magento almost 10% of the eCommerce market share globally. In addition to this over 200,000 Merchants are reported to be using the Magento Platform and have 5,000+ plugins available to extend their eCommerce experiance. (__http://en.wikipedia.org/wiki/Magento)<sup id="cite_ref-13"><a href="http://en.wikipedia.org/wiki/Magento#cite_note-13"><br />
</a></sup></p>
<p>This is just a look through about an e-commerce software named Magento.</p>
<p>Enjoy reading!!!</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/03/26

2014/03/26

2014/03/25

2014/03/25

2014/03/19

2014/03/19

2014/03/19

2014/03/19

2014/03/19

2014/03/19

2014/03/19

2014/03/18

2014/03/18

2014/03/17

2014/03/12

2014/03/12

2014/03/12

2014/03/11