はてなブックマーク

「ナガタが気になる会社に会ってきたよ」シリーズです 鹿児島にて活動するナガタが、話したい人のところにいって色々ノウハウを聞いて回る全国行脚インタビューです。 毎回無駄話にも花を咲かせ、企画目的も雑にお伝えするのに皆さん優しく迎えてくれる、ナガタ愛されインタビューです。 福岡の技術集団オルターブースとは .NETやMicrosoft AzureをはじめAWS、さくらのクラウドといったクラウドを駆使したWeb開発を得意とする高度な技術を有したベンチャー企業。第5弾となる今回のインタビューではオルターブースCEO小島淳さんと同COO藤崎優さんにお話をうかがった。 ※本記事は後半記事となります。前半記事はこちらからどうぞ。 http://unitopi.com/interview005-1/ オルターブース流RESTfulな組織 オルターブースでは弊社（unimal）同様、大きく自社サービスの運営

どうもイマグマです。 タイトルみたいな状況、よくありますよね？ 今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」とマークダウン記法の文書の表示時の変換ライブラリ「Marked」をご紹介します。 SimpleMDEとは JavaScript製のマークダウンエディタです。 SimpleMDE is a simple, embeddable, and beautiful JS markdown editor SimpleMDE 使用感はDemoページでお試しください。 特徴 書きながら何となくスタイルが分かる シンプルでそれでいて編集中の文字のスタイリングもそこそこ美しいのです。 ツールバーが付いている ツールバーも標準で付いているので、記法を忘れたときにも優しいですね。 フルスクリーン表示とリアルタイムプレビュー 行数や単語数が標準でフッターに

「ナガタが話題のあの人に会ってきたよ」シリーズです 鹿児島にて活動するナガタが、話したい人のところにいって色々ノウハウを聞いて回る全国行脚インタビューです。 毎回無駄話にも花を咲かせ、企画目的も雑にお伝えするのに皆さん優しく迎えてくれる、ナガタ愛されインタビューです。 第3弾ゲストはこの方！ JUSO Coworkingオーナー、水交デザインオフィスの深沢さん 1979年、奈良県生駒市生まれ。2006年まで演劇活動と音楽活動に明け暮れながら、独学でウェブ制作・各種デザインを始める。2009年に妻と二人で水交デザインオフィスを立ちあげ。サイト企画からデザイン・HTMLコーディング・WordPressあたりまでを守備範囲として、関西中小企業のウェブサイトや各種のWordPressサイトを受託開発・管理している。 2010年12月、全国でもいち早くコワーキングスペース「JUSO Coworkin

【前編】やたら仕事幅の広いweb担からフリーランスへ。ゲームプログラマーを目指してたYATさんに聞いてきた 「このICレコーダーいいんですよ。これぐらいの機能はいってると３〜４万円しそうですけど…なんと１万６０００円〜」と通販番組のように始まったYATさんとのインタビュー。 インタビュー場所は居酒屋ということで関係ない世間話でも盛り上がり、氷とグラスのカランコロンが音を奏でる不思議なインタビュー風景でしたがこれまたノウハウだらけのインタビューとなりました。 「ナガタが話題のあの人に会ってきたよ」シリーズです 鹿児島にて活動するナガタが、話したい人のところにいって色々ノウハウを聞いて回る全国行脚インタビューです。 毎回無駄話にも花を咲かせ、企画目的も雑にお伝えするのに皆さん優しく迎えてくれる、ナガタ愛されインタビューです。 第２弾ゲストはこの方！Rish-DesignのYATさん！ Word

こんにちは。ナガタです。 ナガタは非常に興奮しています。 それはタイトルの通り、「Adobe Illustrator CCでついに画像アセットができる」ようになったからにほかなりません。Photoshopが画像アセット対応してからというもの、スライス作業が楽になったこと楽になったこと。 画像アセット…Photoshopで標準機能とされる書き出し機能。レイヤーにxxx.png等つけることで一括で書き出すことが可能。詳しくはこちらの記事を参照ください。 データはフォトショですか？イラレですか？イラレは２倍料金ください。 画像アセットになれてからの日々、画像アセットができないイラレファイルでデザインが来るのを非常に嫌がっていました。懇意にしてくださる制作会社さんから「案件のお願いがあるんだけど〜」と言われた日には即「データフォトショですか？イラレですか？」と確認をし、イラレだった場合には非常に嫌

メリークリスマス、メリークリスマス。 今回はWebページをリダイレクトする３つの方法とそのメリット・デメリットについてご紹介します。 リダイレクトとは ウェブサイトにおけるリダイレクト（英:redirect）とは、ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。 引用：リダイレクト (HTTP) – Wikipedia WebページのURLが変更されたときなどに使いますね。 また、フィッシング詐欺などに使われることもありますのでご注意ください。 いろいろな方法があるけどベストプラクティスはどれか クローラーの解釈 googleの場合はサーバサイドで301リダイレクトの使用を奨めている[2]。ヤフーについては0秒リダイレクトがSEO的に有利と言える。 引用：リダイレクト (HTTP) – Wikipedia いわゆるSEO的にどうか、という観点も

こんにちは！ツルダです。 実はワタクシ、ずっと疑問に思っていることがありまして・・・ WordPressでテーマをカスタマイズする時などに、必ず出てくるphpのif文。 あれってなぜ2通りの書き方があるんでしょうか？ ずっとなぜなのかわからないままコードを書き続けて、はや○年… 知ってそうな人に聞いても「だいたい同じだから」で済まされること、はや○年… ほんとにどっちでもいいの？ もしくはじつは背後にものすごい秘密が隠されてて、賢者の称号を持つ人にしか教えられないとかそんなことなの？ このままじゃダメだ！ということで、改めてエンジニアさんに聞いてみることにしました。 誰か教えて！マジで！ なぜか2通りあるif文の書き方 phpでif文をつくるとき、メジャーな書き方としては次の2通りがあります。 <?php if($hoge == 1){ $foo = 1; }else{ $foo = 2

【2016年版】SEO対策の基本の「き」。とりあえずこれをやっときゃ大丈夫！AMP, OGP, Twitterカードなどなど こんにちはナガタです。 今回はSEOの基本についてまとめてみました。色々書いておいて、このサイトも全て対応しているわけでないので耳の痛い話なんですが、がんばってまとめたので是非御覧ください。 一旦網羅して理解しておくとグッと楽になります！ SEO対策？良質なコンテンツが大事？ 賛否両論、色々とありますが、やっておくに越したことはない対策は最低限やりましょう！ 重要視されているのはズバリ、セキュリティ・モバイル対応でしょう。 セキュリティはHTTPSなどがメインですね。 モバイル対応のほうでは、モバイルフレンドリー（webページのスマフォ対応）ももちろんのことながら、検索シーンを快適にするAMP（Accelerated Mobile Page）対応など、根本的な「ユー

こんにちは、ユニマルのツルダです。 この間めずらしく休日出勤をしていたところ、窓から鳩に仕事ぶりを監視されていました。。 仕事してるのがそんなに珍しかったのか。。。 今回はサイトを運営するWeb担当者さんやSNSの「中の人」に ぜひおすすめしたい画像作成ツール「Adobe Spark Post」をご紹介します！ PCで更新はもう古い？今どきのWeb担の更新方法とは？ スマートフォン対応のCMSやSNSの普及により、ここ数年でWeb担さんの更新方法は大きく変わってきているようです。 以前はサイトの更新をPCで行うことが主流だったのですが、現在は業務の様子をスマートフォンで撮影し、そのままスマフォでサイトやSNSを更新する機会が多くなってきているそう。 また記事にちょっとした画像を付けてアイキャッチにする手法もよく使われるようになりました。 アイキャッチの画像作成におすすめの「Adobe Sp

こんにちは。 CSSのアニメーションに関するポストです。 その中でも、@keyframesという指定方法について学んでみましょう。 @keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。 引用：@keyframes – CSS | MDN まぁ、これだけみても何のことかしっくり来ませんね。 構文は単純 @keyframes <identifier> { [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* } identifierがキーフレ

こんにちは、ナガタです。 自社サービス、universionsの大幅バージョンアップなどなど少しそちらに集中しており、更新が度々途絶えてすみません。 のちほど大幅バージョンアップについても記事書きたいと思います。 2015年もそろそろということで、今年のトレンドと次のトレンドについて考えてみたいと思います。 1カラム、ミニマル、モバイルファースト、マテリアルデザイン 2014年からの流行もありますが、2015年でどっと増えたデザインの特徴をいくつかあげてみます。 1カラム サービス系、ブランド系サイトでとても増えた印象があります。 これまで右にサイドバーが設置されていた設計から、ストレートに１カラムで設計されたものが増えました。 サイドバーがある設計 引用：NTTドコモ ホーム 1カラムの例 引用：Uber – Tokyo 並べて見るとそもそもの情報量に大きな差がありますね。 また、視線誘

お久しぶりです。ナガタです。 ７月初旬からの更新となり２ヶ月あまり途絶えていてすみませんでした！ 以下の様な状況でございました。 さくらハウスオープン 鹿児島にスタートアップやテック系文化を応援するイベントスペースをオープンしました。 ASCII.jpさんに記事にして頂きました。→ASCII.jp：酒がうまい勉強会、最高！ 鹿児島さくらハウスがうらやましい 脱腸してた 私ナガタが脱腸（ヘルニア）を患ってしまい、その他業務も含めバタバタしておりました。 ナガタ無事手術を終え経過も良好です。 更新ない日も毎日沢山の方に閲覧いただいていたようで嬉しいです。 というわけでこれからまた再開していければと思います。 まぁ見て触ってもらうのが早いと思うのでDemoを。 See the Pen JYGVjw by Tsukasa Nagata (@nt-uni) on CodePen.0 こんな感じです。

Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。 CSS font Javascript のライブラリです。 早速使い方と使用例を見て行きたいと思います。 ダウンロード Material Design Lite 上記URLからどうぞ。 DLが済んだら配置し、以下のように指定してあげます。 <link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> <link rel="stylesheet" href="//fonts.googleapis.com/i

こんにちは。 みなさんは、 <h1> <a href="#">これはH1の中のaタグです</a> </h1> これと、 <a href="#"> <h1>これはaの中のh1タグです</h1> </a> これの違いってご存じですか？ HTML5的にはどちらもOKなんです。 違いを見て行きましょう。 サンプルを用意します See the Pen LERXQm by Tsukasa Nagata (@nt-uni) on CodePen.0 クリック有効範囲 アンカータグ（a）の有効範囲が先ず違います。 マウスオーバーするとリンクのカーソルに変わる範囲が違うと思います。 h1 > aの場合は文字の部分だけに対して、 a > h1の場合はインライン全てがクリック範囲となります。 テキストの選択 テキストをコピーしたりする際に選択しますよね。 是非上のサンプルで上の行だけ選択してみてください。 a

こんにちは。 今日はCSSに関するポストです。 まず、CSSで以下のようなプロパティを使ったこと有りますか？ clip clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 引用：clip－スタイルシートリファレンス .element { clip: rect(10px, 20px, 30px, 40px); } このような形で、通常のCSS指定どおり上から時計回りに指定します。 これはCSS2でも使えました。 ただ、通常はoverflow:hidden;にして、位置を調整するのが一般的だったように思えます。 clip-path 本日の目玉はこちら。これまでのclipでは短形で、かつ絶対的に配置されている場合のみ有効でした。 どうなるか見てみましょう。 img.sample-img{ width:300px; clip-path: circle(100px at

Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と

こんにちは！ライターのケインです。 突然ですが、僕はPhotoshopが大好きで、デザイン（そんなに機会ないけど）もカンプ作りも、 Photoshopで行うことが多いです。 今回は、そんなPhotoshopのバージョンCCから採用された、画像アセット（スライス）について、取り上げてみようと思います！ これさえ覚えておけば、スライスは爆速！ 画像アセットとは何か！？ まず前提としてお伝えすると、僕が一番最初にPhotoshopをまともに触ったのは,Photoshop CS6からです。なので、それ以前のバージョンのPhotoshopについてはほとんど知識がありませんので、予めご承知置きください。 デザインしたデータをコーディングする際に、画像として各パーツに分解するために行う「スライス」。Photoshop CS6の段階では、 「スライスツール」で通常通りのスライスを行う 「レイヤーに基づく新

はじめまして、 unitopiさんの下でライターをさせていただくことになりました、chikurinです。 どうぞよろしくお願い致します。 今回、Javascriptの関数パターンを2種類ご紹介させて頂きます。 関数とは・・・タスクや値の計算を実行する文の集まりである MDN Javascriptガイド jQueryやそのプラグイン、他の人が書いたJavascriptコードを見ると、 ①②のような書き方にでくわしたことはないでしょうか？ ① var [変数名]　= function (){...}; ② (function(){...})(); ※...は、処理内容を表します。 ここでは、こうした書き方を1つずつご説明したいと思います。 まず、①の書き方は「無名関数」と呼ばれます。 何故このような書き方になるのか、 関数の書き方をおさらいしつつ考えてみましょう。 Javascriptの関数は

【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく

こんにちは。 本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。 最近ではネイティブアプリ（それぞれの言語でストアでダウンロードするアプリです）ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。 さっそくコード -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and