はてなブックマーク

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

Vue.js Advent Calendar 2015の二日目です。 今回は、Vueifyのお試しに便利なツールを作ってみました。 Vueifyについて Vueify、使ってますか？ Vueifyはコンポーネントを定義するのに便利ですが、最近ではホットリローディングに対応し、開発体験の向上にも大きく寄与するものになっています。エディタでゴリゴリvueファイルを書き換えると、ブラウザ上でSPAがリアルタイムに組み上がっていくのは、単純に開発速度が上がりますし、実際感動します。 Vueifyは便利なのですが、セットアップがなかなかに大変です。 おすすめはvueify-exampleをgit cloneして使うことですが、今回は、もっと手軽にvueifyを体験出来るエディタを作ってみました。 リポジトリ こちらです。 https://github.com/hashrock/vueify-edit

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2016/09/03更新 以下の資料は、StrongLoopがIBMに買収される前のものであるため、 記述が古くなっている可能性が高いです。 IBMはLoopback資産を利用した「API Connect」というツールを提供しており、 ドキュメントはそちらを参照したほうがいいように思われます。 API Connectについては、以下の記事が参考になると思います。 LoopBackとは 実態はExpressと、Webアプリ作るときに便利なコンポーネントをくっつけたものであり、それぞれのコンポーネントは単体でも使えたりする。 Express

2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで

PHPは簡単に動かせるのがいいところですね。 その良さを生かしつつ、薄いフレームワークの組み合わせで掲示板を作ってみたいと思います。 経緯 Node.js + Express使いだが、実際のところNode.jsをサーバで動かしていい案件はまれ PHP案件はいっぱいだし、動くレンタルサーバも多いぞ 動作環境としてのPHPは魅力なので触っておきたい PHPにあまり詳しくないし、コードを書いている時間よりも調べ物に時間の方が長くなるのが辛い PHPフレームワークも分厚いものが多く、調べ物に時間が取られてやはり辛い 何でも屋になりたいわけではないので、PHPのことは詳しく知らない自分のままでいたい 作りたいもの とりあえず一行掲示板。 考えた構成 SPA（PHPを書く量を最低限にするため） PHP5.5 + ビルトインサーバ Slim Framework2 (3も気になるがとりあえず) Vue.j

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 日本語ドキュメント 満を持して本日リリースされました。めでたいですね。 Vue.js自体は、0.12の次に1.0のリリースが控えています。0.11から大幅にAPIが変更されましたので、これから安定化に向けて頑張っていくような気がします。 Vue.jsの弱点として「ViewModelが巨大化してしまい、大きな構造のアプリをどう作ればいいかわからない」点がしばしば挙げられます。宣伝だけするのも何なので、今回はVue.jsのサンプルとして最大規模の、vue-hackernewsのコードを読んでいきたいと思います。 その前に、HackerNew

CSS3アニメーション、なるべく覚えたくないですし、誰かによしなにやってほしいですね。でもかっこいい画面は作りたい。 というわけで最低限だけ説明します。某所で行ったLTの内容をベースにしておりますので、さらに面倒な方はスライドを流し読みしてください。（ただし、スライドの方は不正確な部分がありますので、時間があれば当記事で補完していただけるといいかと思います。） スライドは以下です。 DEMOはこちら 対象 CSS3アニメーション、基本的にコピペで実装するし、なるべくなら一生知らずにいたい方 かといって、CSSフレームワークに頼ると大量のCSSに埋もれるのが辛い人 だからといってjQueryに頼るのも嫌な人 今回説明すること CSS3 Animationの最低限の書き方 基本的なイージングの種類 Vue.jsでアニメーションの省力化 アニメーションタイミングをずらす方法 3Dっぽい動きを付け

すると、下記のボタンが表示されます。 赤くて不穏なボタンなんですが、これはTwitterのAPIなどが未設定なので設定してくれよ、ということですね。このボタンをクリックすると、下記のダイアログが表示されます。 親切なことに、Twitter APIの取得方法、さらにAPIキーの入力場所までありますね。 あとはここに書いてある手順に従い、Twitterアプリを登録し、設定を済ませるだけです。 手順はこれで全てです。 動いている様子 Sign in with Twitterをクリックします。 ポップアップでログインダイアログが出ます。 ログインユーザ名が出ましたね。以後、ユーザID及び、ログイン判定は下記コードで行います。 所感 超簡単ですね。 今までpassport-twitterとかでめっちゃ頑張ってたのはなんだったんでしょうか… さらに、TwitterのAPIキーをどこで管理するんだ問題に

3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で

※現在、当サンプルは動作しません。追記を参照して下さい。 大き目の勉強会に参加すると、たいていぼっちになってしまいます。ピザとチューハイ片手に、邪魔にならない位置にいるしかありません。 自己アピールさえできればなんとかなる場合も多かったと思います。じゃああれですね。ポートフォリオの出番です。作りましょう。 CMSに対する最新の気持ち 書き下すとこんな感じでしょうか。そこは面倒臭がるなよって箇所もありますが。 とりあえずWordPressは嫌 GitHub pages上にホスティングできると、お金かからないし、しかもURLもかっこいい jekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。 だから管理画面がほしいなぁ。 Markdownで書きたい。 画像アップローダもほしい（しかし作りたくはない）。 というか自

スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

これは、小さなチーム管理のためにいろいろ採用したり内製したりした経験のログです。 ##モチベーション 下記の２つのファイルがあるつらみは計り知れません。 ガントチャート.xls 課題管理表.xls もっと軽量に、楽しく、リアルタイムに、Windows非依存でやりたい。 ##やりたかったこと 数名レベルの小規模チーム向けに、下記システムを構築したい。 ※ただし、外部にデータがおけないので、オンプレミスで。 情報共有 チャット ちょっとした確認を非同期で行えるようにしたい。 簡易なタスク管理 メンバーのタスクが終わって手が空いたことを知りたい #導入したもの１：DevHub（チャット・通知・情報共有） プログラマの為の開発支援コミュニケーションツール。作業中メモをリアルタイム共有する。 ###特徴 チャット メモ共有 簡易ブログ機能 ###チャット＋メモ画面 ###ブログ機能 ある程度メモに内

#脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 #SuperAgent HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 #superagentの良さ かわいい。 #ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest s

最近話題のAngularJSですが、学習コストが辛いのが難点です。 チームでのWebアプリ開発に半年ほど利用していましたが、 「難しい」「辛い」「闇」という声が多かったので、 よりシンプルなVue.jsに移行することにしました。 Vue.jsはAngularのコードを一部利用して作成されており、多くの点で共通した書き方が出来ます。 以下にご紹介します。 （カスタムDirective作るほど使い込んでいなかったので、あくまで初歩的なサンプルとなります。ご容赦ください） AngularJSの基本形 基本的に、バインドする変数やメソッドを$scopeに生やす形になります。 var Ctrl(function($scope) { //バインドする変数宣言 $scope.message = "Hello, World"; //メソッド宣言 $scope.method = function(){/*