![http://blog.mismithportfolio.com/web/20150927jscssexpression](https://cdn-ak-scissors.b.st-hatena.com/image/square/3557990abf083ca472465fde0ace037b57f78aae/height=288;version=1;width=512/https%3A%2F%2Fblog.mismithportfolio.com%2Fwp-content%2Fuploads%2F2015%2F07%2FjQuery.png)
UIScrollViewでピンチ量を計算してズームするありがちな画像表示ビューを作る時代は終わった!!iOSSwift ピンチしてズームするありがちな画像表示ビューコントローラを作る。よくある話だと思います。 元来、これを作るのは非常にめんどくさくlocationInViewだのzoomRectForScaleだのというメソッドを作っては投げていました。 でも、それも今日まで! AutolayoutにUIScrollViewとUIImageViewを乗せて数行コードを書けば、ピンチで画像ズーム出来るビューコントローラが作れます!!3分くらいで! Autolayout 1.UIScrollViewを乗せて、上下左右にマージン0を指定して画面いっぱいにレイアウト 2.UIScrollViewの中にUIImageViewを乗せて上下左右にマージン0、高さと幅をUIScrollViewと同じ(Eq
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
翔泳社では11月19日に『プログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化』を刊行しました。今回、Dockerが大好きだという著者の阿佐志保さんに、本書の紹介だけでなくDockerに関わる人生観についてもお話をうかがいました(インタビュー内容は10月21日時点のものです)。 家事、育児、講師、執筆の両立 ――よろしくお願いします。最初に、阿佐さんの自己紹介をお願いできますでしょうか。 阿佐:結婚・出産前は、システムの基盤を構築・運用するエンジニアなどをしていました。インフラの設計構築だけでなく、アプリケーション開発標準化や運用設計など、障害やトラブル以外では表に出ることのない地味な仕事です。毎日、朝早くから終電まで働いていました。仕事が好きだったし、非常に優秀なメンバーに囲まれていたのであまり苦ではありませんでした。 分かりやすくいうと「社畜」です。社
サイトの仕様をグレードアップさせるjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」 さまざまなプラグインがフリーで配布されており、取り入れてみることで今までの仕様よりもクリエイティブ性をアップさせることができます。今回はそんなjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」を紹介したいと思います。 Cropper 7種という厳選された数ですが、どれも使ってみたくなるプラグインばかり。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Swipebox | A touchable jQuery lightbox シンプルですが、印象的なライトボックスのプラグイン。写真を印象的に見せたい時におすすめのツール
こんにちは。 アグリゲーション開発担当の中川です。 今回は、みんなが大好きな構成管理ツール「Git」について話したいと思います。 私は Git を使い始めてから、バグの発生数が激減しました。 Git を使ったとある手法によってレビューが充実し、バグの少ないコードを書くようになったと考えています。 では、今回はその手法について紹介したいと思います。 ※ 本稿は Git 以外の第三世代構成管理ツール(Hg、Bzr など)にも適用するかと思いますが、Git の用語とコマンドを使って紹介していくため Git の基本知識が必要となります。ご了承ください。 レビューしやすいコミット履歴と、開発の流れで自然にできるコミット履歴の乖離 以下のようなコミット履歴があるとします。 1. wip: 仕様変更○○を行い始めた 2. wip: 仕様変更○○の続き 3. wip: ちょっと設計を変更、それと過去のバグ
日本語Webフォントのトラブル解決 今回は、日本語webフォントの設置方法で 表示できなかった場合の解決方法について 忘れないうちにまとめておこう思い 4つほどのCSSソースを紹介いたします。 Webフォントの指定方法 世の中の多くの人が使っているwebフォントの設置 における標準の指定方法を念のためにご紹介します。 私はHTML、CSSの知識が無いので、試行錯誤で表示するという 大ざっぱだけど、案外確実な方法を使っているのでご了承下さい よくある代表的なwebフォント記述方法1 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8
Electron (エレクトロン)はウェブの技術でデスクトップアプリケーションを開発できる人気のフレームワーク。HTML5とCSS3とJavaScriptで開発できるため、ウェブ開発者であれば手軽に導入できます。それもクロスプラットフォームなので、ワンソースでWindowsとmacOS向けのソフトウェアが作れることが利点です。 GitHub社の「Atom」やMicrosoft社の「Visual Studio Code」もこのElectronを使って開発されているなど、大手企業が採用していることでも人気の高さがうかがえます。この入門サイトでは、開発環境のセットアップからサンプル・アプリケーションの作り方を解説します。 Electron入門編 最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう Electronの導入手順を解説。ゼロからアプリケーションのビルドまでの手順を
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。
September 28, 2015How to Solve Coding Anti-Patterns for Ruby Rookies As a freelance developer, I often work with developers from different programming backgrounds and of different skill-levels. Over time, I’ve learned to tell a programmer’s Ruby level of experience by looking at the code they’ve written. Not only that, I can also place a safe bet on the programmer’s coding background based on cert
動的平衡 福岡伸一の「動的平衡」という本が話題になったのは,もうだいぶ前のような気がする. 「あれ~なんかおかしいなあ,動的平衡って別に生物に限らない筈だよねー」とか思ってるうちにブームになり,「文句いおうかどうしようか」と空気を読んでいるうちに話題から去ってしまった,という方も多いのではないだろうか. 「動的平衡」をウィキペディアで見ると,普通の説明を読むことができるが,べつだん生物に限らないことは明らかである.動的平衡 - Wikipedia 統計物理の観点からすると,動的平衡といっても,熱平衡状態やその近傍で見られるものと「非平衡」のものがあるが,前者は釣り合いの状態にある化学反応ならいつでもみられる.たとえば,生物実験で使う緩衝液の中でも起きているが,そのことから「緩衝液は生きている」などと考える生物学者はいないだろう. 非平衡の動的平衡も生物絡みとは限らないが,「非平衡のシステム
『Minecraft: Pocket Edition(マイクラPE)』では、回路を工夫することで複雑なメカニズムの装置もつくれます。 (© Mojang AB 以下同じ) 今回はレッドストーンランプを繰り返し点滅させる回路と、2つのレバーをオンにしないと開かないドアをつくる方法をご紹介します。 ランプを繰り返し点滅させる方法 ランプを繰り返し点滅させる・「音符ブロック」を繰り返し鳴らすには、プレイヤーが「レバー」や「ボタン」を押してもよいですが、できるなら自動化したいですよね。 それには、ランプや音符ブロックに繰り返し信号を送る回路が必要です。 そんな回路をつくるには、少なくとも「レッドストーン」6個・ブロック6個・「レッドストーントーチ」3個以上が必要です。 材料がそろったら、以下の図のように材料を置きます。レッドストーンはブロックの側面に設置してください。 これでクロック回路が完成しま
社内企画書、会議の議事録、そしてお客さま向け事業提案書……。会社のなかにはさまざまな書類があふれている。どのように書いていったら仕事がはかどり、成果もあがるのか? 元ソフトバンク社長室長、ジャパン・フラッグシップ・プロジェクトの三木雄信社長が語る、孫正義流文章テクニックとは。 社内での新規プロジェクトの検討は、一般的に「企画書」の作成から始まる。今回、例として挙げるプレジデントソリューション社は、クライアントのサイトをヤフーやグーグルなどの検索エンジンの上位ページに表示させるSEO(検索エンジン最適化)サービスで、業界トップの企業だ。 その同社がベンチャー企業向け成果報酬型の新卒紹介事業を企画した。SEOのノウハウと実績を活用し、独自に就活サイトを立ち上げて優秀な学生を集める。そして、ピンポイントでクライアント企業に紹介していく。しかも、内定した段階で初めて料金が発生する点で、既存の採用支
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる!というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー(ApacheとかNginxとか)への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
せっかく魂を込めて書いた文章です。ぜひとも最後まで読んでほしい!! 今回は記事の「文章」部分だけにスポットを当てて、わたしが文章の密集度を下げるためにやっているデザイン例を紹介します。 ここで紹介しているCSSは、WordPressテーマ STORK19 を想定しています。 「改行(BRタグ)」は使わない わたしは、ブログではほとんど改行をしません。 あ、改行と書いていますが具体的には<br />(<br>)タグのことです。 なぜ<br />を使わないかというと、見る人のPCや端末の環境によってこちらで指定した改行場所どおりには見えないから。 こちらの画像はスマホで見た文章ですね。 スマホで見ると改行がへんなところに! パソコンで見たときにイイ感じに見える場所に改行を入れている(<br />が入っている)のですが、スマホで見るとどうでしょうか? スマホのほうが横幅が狭いため、実際に改行され
JavaScriptエンジニアへのIoTのすすめ:Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう Tomomi Imura(Slack) ここ、HTML5Experts.jpでも今年になって IoTやWoT関連の話題がことかかず、みさなんも関心を持ち始めていることかと思われます。 私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。 そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロト
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川(@maepon)さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く