チャットデプロイしたい2018 - MOL
タイトルの通り、チャットデプロイしたい。 開発環境 masterブランチ QA環境 deployment/qaブランチ 本番環境 deployment/production ブランチ 自分のところは、上記みたいに環境とブランチがマッチングしていて、そのブランチにコミットなりマージするとCircleCIのほうでデプロイしてくれる。 例えば、開発環境でおおかた確認してQA環境に反映したいときはmasterからdeployment/qaにPRを作成しマージして、デプロイしてた。それめんどいので、そこをボットでやらせたいと思った。要はこうゆう感じ。 slack上から任意の言葉でbotにデプロイを指示する slackのbotがGitHub APIでプルリクエスト作成・マージを実行する CircleCIがGAEにデプロイする 3.はもう出来てるので、1.2.を見てみよう。 1. Slack Bot S
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
【翻訳】デザインエンジニアリング - MOL
Original：Design Engineering（2014-11-25）by Jonathan Snook JavaScriptだけがフロントエンド開発ではない。それはデザインとディベロップメントの技術が人種のるつぼのように融合したものである。それはアクセシブルなUIを実装するためであり、Web標準を受け入れるものである。 — Matt Hill Shopify Adminの開発に関して言えば、最近まで2つの専門職、つまりデザイナーとエンジニアを受け入れていた。今では3つめの専門職がある、しかしながらそれが確かなものとして認識されるまで時間がかかった、フロントエンドデベロッパーである。フロントエンドデベロッパーのスキルはデザインとエンジニアリング両方にまたがっている。これまでクオリティの高いフロントエンドコードをフロントエンドデベロッパーの助けもなしに書けるデザイナーを雇えて、私たち
修正しやすいCSSとは - MOL
@hilokiという男がいる。この男と初めて出会ったのは7年前だろうか、当時細々と石川でブログを書きながらWebデザイナーをしていた僕に初めて勉強会で声をかけてくれた人物である。 それ以来、当時彼が住んでいた大阪の勉強会と石川の勉強会で互いに参加しあったりして親交を深めていった。ついには2年という短い間ではあったが、某緑の会社で同僚として働けたことは本当かけがえのないものと感じている。 そんな彼が最近2冊目の単著を出した。1冊目の『HTML5＋CSS3で作る 魅せるiPhoneサイト』はもちろん購入して読書済だが、本当に丁寧に書いてあり分かりやすかった印象がある。そんな彼の出す本だから間違いないのは当たり前だが、特筆すべきは扱っているテーマだろう。 最近のCSSのWeb参考書というと、CSS3でこんなことができちゃいます〜、だとかアニメーションでこんなことがっ！？とか、こんなグラフィカルな
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
Chrome for Androidでリモートデバッグ - MOL
さて、Adobe Edgeツール&サービスが発表されましたね。リモートデバッグではAdobe ShadowがEdge Inspectに名をかえて正式にリリースされたようです。まぁ特に変わったことはないんですけど、ダウンロードするのに、Adobeのアカウントが必要になったとかでちょいめんどくさくなりました。Shadowの使い方はこことか参照するとよい。 ここではあえて、時代の流れを読まずにChrome for Androidでリモートデバッグに挑戦したいと思います。ChromeはAndroid4.0以降対応なんですね、必死こいて2.3の端末機にインスコしようとググってました。あと、4.1からデフォルトのブラウザーになるとかで今後のメインストリーム確実な感じです。 Remote Debugging - Google Chrome Mobile — Google Developers 各種インス
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL
2回も続いてないのにまさかの番外編！ここぞ変化球！キエル消える魔球！！ ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。 /* CSS */ .gradient { background: -moz-linear-gradient(top, #000 0%, #595959 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959)); background
パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL
Sassとかいろんな機能ありますよね、でもぶっちゃけそんなにいっぱい機能あっても使わないし( ･´ω･｀) 案外、//ダブスラでコメントアウトできるのが一番嬉しかったりもします今日このごろです。 @import というわけで、そんな僕がSassを使うと思ったのも@importを使いたかったからという至極単純な動機によるものです。@import自体は普通のCSSでも使えますが、パフォーマンス的に難がありまして、あんまり使う気になれない、かといってファイル管理はページ単位やコンポーネント単位でちゃんとやらないと後々めんどいなというジレンマもあります。 そうゆうわけで、なんで普通の@importがダメなのか説明します。 IEにおいて@importはページ下部に置いた<link>タグのような挙動をします。 Best Practices for Speeding Up Your Web Site Y
CSSセレクタのパフォーマンスへの影響 - MOL
ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Sites :: Performance Impact of CSS Selectors Steve S
【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
Original：Don’t docwrite scripts（2012-04-10）by Steve Souders 昨日のブログ記事のHTTP Archiveが速くなっている、大きな要因の一つとしてはスクリプトローダーを使用しないことです。そのスクリプトローダーとはスクリプトを動的に読み込むためにdocument.writeを使用しているものです。振り返れば、私は2009年4月のブロッキングなしのスクリプト読み込み、続・ハイパフォーマンスWebサイト(4章)において、document.writeテクニックについて記述していました。それは以下のようなものです。 document.write('<script src="' + src + '" type="text/javascript"><\/script>’); document.writeを使ったスクリプトローダーの問題点： 挿入し
既にリリースしたアプリ名の変更（AppStore編） | MOL
Titanium Advent Calendar 2011 ありがとう、2011。ありがとう、Titanium。 ということで、始まりました、てか既に始まっているTitanium Advent Calendar 2011！25日まで毎日誰かさんがTitaniumについて記事を書いていくというも催し事です。栄えある1日目としては、軽く小ネタで行こうと思います。すみませんすみません、もはやTitaniumでもないような気がしますが、けっこう手間取ったのでシェア。 前回、ticktockというあタイマーアプリを作成・公開したのですが、それからほどなくしてAppleさんからメールを頂きました。内容は、私が出したアプリと同名のアプリ会社さんからの権利侵害だーって申し出がきてるよ。んで、Apple的にはちゃんとレビューしたし問題ないとは思ってるけど、当事者同士で話し合いしてね♪って感じでした、たぶ
Titanium Mobile でCSS的な、それJSS!!!!!! | MOL
Titanium Mobile での開発は当然JavaScriptオンリーですので、愛も憎しみもすべてこの中にではなくて、コンテンツであったり見た目の情報であったり振る舞いであったり全てJavaScript の中に書かれているわけです。 Webサイト制作ではあれば、HTML(content) + CSS(presentation) + JavaScript (behavior)のように役割を分けて制作するのが良いと言われております。JavaScriptオンリーのTitaniumでも然りです。せめてロジックとUIが分けることができれば、エンジニアさんとデザイナーさんが分業できるってもんです。 あるよ(・∀・)！CSSあるよ(・∀・)！それJSSでできるよ(・∀・)！ てことで、Titanium Mobile 1.5以上の環境でなら、JavaScript StylesheetsなるJSSという
jQuery MobileでGoogle Analyticsを使うために気をつけなければいけないこと - MOL
とあるとこで、とある話をしたので、とあるスライド置いときますよ。 要点を言うと、jQuery MobileでAjax遷移してると、普通にGoogle Analytics置いてても作動しないから気をつけてねって話です。 GATC for jQuery Mobile 僕はこうゆう感じでとりあえず対応しています。作動させるタイミングとフラグメント識別子を記録させるのがポイントです。あとはご自身のサイトに合わせてカスタマイズしていただければと思います。 //Account Setting var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxxx-x']); //Async Snippet (function () { var ga = document.createElement('script'); ga.async = true;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
querySelectorとquerySelectorAllというかLive NodeListとStatic NodeList