間違いやすいHTML5の要素を再確認 | バシャログ。
こんにちは。koyaです。 突然ですが、龍が如く7はプレイしましたか？ 今まで龍が如くシリーズをプレイしたことはありませんでしたが、物語の舞台が関内、伊勢佐木町だったため思わず買ってしまいました。 見覚えのある景色を走り回るのはプレイしてて楽しかったです。横浜にゆかりのある方には是非触って欲しいです。 さて、今回はタイトルの通りよく間違いを見かけるHTML5の要素についてまとめたいと思います。 僕もマークアップを始めた頃は<section>と<article>の違いなどがさっぱりだったので、初心者の方など参考にしていただければと思います。 section要素 article要素 div要素 ul、ol要素 section要素 section要素は文脈のセクション分けをするためのタグです。本で言うと目次のようなものですね。 文脈を分けるためのものなので、見出し要素(h1〜h6)が要素内に必ず
JSでエクセルを扱う ( SheetJS js-xlsx が凄い ) | バシャログ。
どうもfujiharaです。本日はブラウザJSでエクセルを扱える、SheetJS js-xlsx を紹介します。 背景 あるデータをブラウザ上で表示したいが、スプレッドシート(apiを利用)やCSVファイルを編集(エクスポート)するのは 避けたいということで探していたところ、npmにSheetJS js-xlsxというものがありました。 サンプル 今回はエクセルからHTML, CSV(配列)への変換をします。 npm インストール npm install xlsx csv-parse javascript ※IE11対応の場合の箇所追記しました。 import XLSX from 'xlsx'; import parse from 'csv-parse'; //IE11対応の場合は import parse from 'csv-parse/lib/es5'; fetch( '/data/s
CSVファイルを呼び出す前に文字コードを確認するようにする。 | バシャログ。
みなさんこんにちは 私の担当したプロジェクトで必要な情報をエクセルからCSVファイルに変換してそれをphpで読み取って保存する。 という手順がありました。 処理自体は簡単なものでSplFileObject()を使ってやればforeachで一行ずつ読み取るだけです。 しかし、一点読み取る前に問題がありました。文字コードです。 エクセルからCSVファイルを保存するとShift-JIS 調べてみるとどうやら最新のエクセルでは問題なくutf-8で保存ができるようですが、私の使用しているMicrosoft Excel 2010では難しいようです。 そのため一度CSVファイルを保存してからエディタなどで開いてutf-8に保存し直しています。 しかし人間なので何回もやっているとその工程を忘れてしまう事があります。 すると・・・・ターミナルが最悪停止します。 サーバーは生きてるとはいえ、ターミナルを立ち上
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
CakePHP 使いが Rails チュートリアルをやってみた話 | バシャログ。
ゴールデンウィークにぶらぶら遊ぶことをしなかったせいで、いまだに休めていない感のある kagata です。 ゴールデンウィークに遊ばずに何をしていたかというと、ひたすら Ruby on Rails のチュートリアルを解き進めていました。ひととおりやってみるといろいろ気づきがあったので、読者のみなさまにもご紹介申し上げます。 動機 業務ではひたすら PHP による開発を続けているのですが、最近プライベートで Ruby のコードを書くことが多くなってきました。といってもサーバサイドアプリケーションを書いているのではなく、主に Itamae や Serverspec など Infrastructure as Code 的な用途が今のところ多いです。 そうこうするうちに Ruby 自体もちょっとおもしろくなってきて、勉強するのに適当な教材がないか探して見つけたのが Rails チュートリアルでした
【CakePHP3】Cellを使ってヘッダーにお知らせを表示してみる。 | バシャログ。
がっつり体調を崩して寝込んでました。fukasawaです。こんにちは。 年末ということで気が緩んでたのでしょうか。皆様も体調には十分お気をつけください。アップしきれなかった記事を2015年にスッと差し込んで、未練なく新年を迎えたいと思います。 さて、今回はCakePHP3のCellを使って「ヘッダーに簡単なお知らせを表示する」というのをやってみたいと思います。 CellというのはCakePHP3から追加された機能で、簡易的なコントローラ＋エレメントのセットです。 CakePHP2以前にもエレメントがありましたが、エレメントには紐づくコントローラの処理というものがありませんでした。なので、例えば「ヘッダーに簡単なお知らせを表示する」という機能を実装するため、レイアウトにお知らせ表示用のエレメントを埋め込んだ場合、そのエレメントからrequestAction()でコントローラを呼び出しデータを
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
JavaScriptでSNSのカウンターを取得する | バシャログ。
どうもfujiharaです。 連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。 本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、 カウント数のみをJSONで取得する仕様に変更 についての実装方法を説明します。 流れ たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。 はてブ数の取得 はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
Vagrant を PhpStorm から使う | バシャログ。
仕事でチャットツールをよく使うようになって大分立つのですが、チャットによるコミュニケーションでは顔文字が大事とかいう話をどこかで読んだ気がするので顔文字をよく使うようにこころがけているtanakaです。 今日は PhpStorm を使ってVagrant 経由で仮想マシンを起動する方法を紹介します。30分から1時間半くらいで開発環境が用意できるので、試してみてください。 前提 以下のツールがインストール済みか確認してください。 PhpStorm (有償・30日無料お試し可能) VirtualBox for Windows hosts Vagrant 新しくプロジェクトを作る 空のプロジェクトを作ります。以下のような感じで。 仮想マシンを起動するのに必要なファイル Vagrantfile を用意する。 メニューバーからTools→Vagrant→Init in Project Rootをクリッ
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
えっ！ビルド不要？JavaScriptで自動生成するスタイルガイドジェネレーターKalei | バシャログ。
娘の誕生日に、ドラえもんドンジャラDXをプレゼントしました ishida です。 娘とともにハマってしまいました。早く「ドンジャラ」って言いたいっ！ さてさて、皆さん HTML/CSSコーディングでスタイルガイド作成していますか？ スタイルガイドは、サイト内で定義されている部品を一覧化して こんなパーツを使ってますよーとするドキュメントです。 複数人でのページ制作や新規サイト構築後の運用には欠かせません。 ジェネレーターによるスタイルガイド生成も人気になりつつあり< 最近では、StyleDocco が有名ですね。 StyleDocco 以外にもスタイルガイド生成のツールはいろいろあります。 そのなかでもビルドを必要としないスタイルガイドジェネレーターのご紹介です。 ビルド不要なスタイルガイドジェネレーターKalei こちらのジェネレーター、コンパイルが不要で Ruby や Node.js
Webマスター必見！パンダ・ペンギンアップデート判定ツール「syachi.jp」 | バシャログ。
週末に昔の「水曜どうでしょう」を見てたんですが、大泉さんの福山雅治モノマネにお腹痛くなるほど笑わせてもらいました Latin です。 「Googleさんがまた大型アプデするんだって All rights☆！」 ということで、先日弊社の kimoto もブログ内で取り上げておりましたが、数週間後にまた大規模なペンギンアップデートがあるらしいですね。 今回は一連のパンダ・ペンギンアップデートと自社サイトのプロファイルを比較する事ができる便利なサービス「syachi.jp」をご紹介します。 自社サイトの自然検索流入数とパンダ・ペンギンアップデートの時期を比較できる syachi.jp は、Google Analyticsと連携させる事で、一連のパンダ・ペンギンアップデートと自社サイトの自然検索流入数を比較する事が可能になるツールです。 「なんで流入数が減ったんだ～」と思う事もしばしばですよね。そ
CUI で Git 使うなら入れておきたいツールまとめ | バシャログ。
ブランコ と同い年だったことが判明しました。みなさん、こんにちは nakamura です。あいつも昭和 55 年会か・・・。 Git をコマンドラインで使う利点は色々ありますが、git コマンド以外にも便利なツールがいくつかあるっていうのもひとつかなと思います。今日はそんな中でも個人的にこれないと困るわーっていうのを独断と偏見でご紹介したいと思います。 tig Index of /tig これはけっこう有名かも。いわゆるリポジトリブラウザです。カラフルで見やすいし、その場で任意のコミットの差分も見れちゃうのでリポジトリブラウザとしては git コマンドよりも格段に高機能です。 gitolite Hosting git repositories sitaramc/gitolite gitolite は Git リポジトリを管理するためのツールです。ドキュメントを少し読んでみれば分かりますが、
printデバッグ離れできるようになるために試してほしいPhpStorm+Xdebug用例集(1) | バシャログ。
TimeCapsuleのハードディスクが故障したので、ゴールデンウィーク中に交換してました、tanakaです。 以前、PhpStorm で、Xdebugのリモートデバッグ環境を作るで、PhpStormでXdebugと連携させるための設定について解説しました。あれからいくつか便利な用法を覚えて、printデバッグ離れできるようになってきました。今回は、printデバッグをやめられるまでに至った便利な用法をいくつか紹介します！ 準備 以前の記事でデバッグ環境を作成しておきます。また、ブラウザから簡単にデバッグの有効/無効を切り替えられるように、Zend Debugger & Xdebug bookmarklets generator for PhpStormでブックマークレットを作っておきます。(右側のGenerateボタンを押して、表示された"Start debugger", "Stop d
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
別ドメインのjsonデータをXMLHttpRequestでやりとりする | バシャログ。
いつのまにやら家から5分の距離に新しくコンビニができたことに気づいたtanakaです。 今日は、別ドメインのjsonデータをXMLHttpRequestで普通に取得するにはどうすればいいか調査したので方法をまとめます。実装としてはもう4年くらい前から使えるようになっていますが、私はまだ使ったことがなかったので。 XMLHttpRequest とクロスドメイン XMLHttpRequest が Internet Explorerに実装され、それ以外のブラウザに実装された当初は JavaScriptが実行されたページのドメイン以外にリクエストを送りデータを受け取ることはできませんでした。別ドメインに非同期でリクエストするためにいくつかの方法が考えられましたが詳しい説明は省略します。(一旦サーバを経由する・Flashを経由する・JSONPを使うなど) 2009年になりXMLHttpRequest
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CakePHP】TextHelper::highlight()を使って文字列をハイライト表示してみる。 | バシャログ。
PHP で「配列の最初の要素を取得する」なら array_shift() より current() のほうが速かったという話 | バシャログ。