サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
雑学
kito0039.hatenablog.com
この記事はRiot.js Advent Calendar 2017の24日目(遅刻)になります!申し訳ないです! qiita.com Riot.js(以下、Riot)は非常にシンプルかつ軽量で入門の敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。 今回は、おそらく来年リリースされる(と自分は期待している)v4について、githubのissueを追ってみました。v4の議論についてはgithubで活発に行われていますが、追った内容を全部書く必要はないと思いますので、独断と偏見でいくつかピックアップした形になります。 ※変な日本語訳ありましたら、ご指摘いただけると幸いです。 v4のドラフト まずは、ドラフトについて見ていきます。『あくまでドラフトだからこれからリストを深掘りしていくよ』とのこと。 ソースコードをシンプルにするコンパイラの完全な書き換え。ただしソースマップも許可
Riot.js Advent Calendar 2017 の3日目の記事になります! 今回もあまりRiot.js(以下Riot)の書き方やtipsなど、テクニカルなプログラミングの話ではありませんのでご注意ください。 qiita.com Riot以外のフレームワークやライブラリのCLI いくつかピックアップして調べてみました。 Angular, Ionicなどのフレームワークや、React, Vue.jsなどのライブラリのCLIと、RiotのCLIには差があります。 簡単ですが、まとめてみました。 Name version generater Overview angular-cli 1.5.5 あり いわゆるフレームワークのCLI。devサーバー起動、ビルド、各コンポーネントの作成など必要なものは全て備わっている。 ionic-cli 3.19.0(*1) あり angular-cliと
はじめに 2016年11月8日現在、自分がアサインされた案件がかなり大炎上している。 燃えている要因を数えだしたらキリがないが、大きなものでも5つはある。 それはお客さんにもあるが、チーム内(というか上司がデカい)にもやはりある。 そんな中(自分も含めて)エンジニアのメンバーが意識やモチベーション高く仕事をしているかと言えば、 もちろんそんなことはなく、かなりストレスや不満を溜めた状態で仕事をしている。 意識の変革のために、ある記事が凄く参考になった 本当の本当にデッドライン(これを超えたら出るとこ出てましょうか)に差し迫っていて、チーム内も切羽詰まって来ている中、 自分の意識が変わるようなエントリがあった。それが以下。 logmi.jp この記事を読んだ上でいったん置いておくw 自分の書きたいことを先に書いて、最後にこの記事の内容を引用して終わろうかなと思っているので。 上下関係なんかな
かなり面白くかつ刺激的な座談会だった!以下のメモはだいぶ雑記。間違い + 誤認もあるとは思う。(componentとコンポーネントが混在している、なども) アジェンダ ベストプラクティスを探りたい Web Componentsはこの先避けては通れない CSSデザインの過去・現在 Web Components時代のCSSデザイン CSSデザインの未来 登壇者 高津戸さん(ピクセルグリッド) 小原さん(ピクセルグリッド) 榊原さん(一般社団法人リレーションデザイン研究所) ◯CSSデザインの過去・現在 ▼3年前のCSSデザインはどんな感じでしたか? iOS7 がフラットデザインを2013年採用 Bootstrapもそれに追随 元々のBootstrapはデザインができないエンジニアのため 昔は背景に画像をベースに置いていた その上にピクセル単位で1ミリのズレも許さずコンテンツを置いていた いわゆ
はじめに Riot.js(以下riot)は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。(ここまでテンプレートにしたい) 今年の夏にv3.0.0が出てきたことで、さらに熱いので皆さん是非触ってみてください! ここから本題 Angularには実装されている機能「データバインディング」 ちょっとだけriotから脱線します。「Angular」とは、かのGoogle社が開発したJavaScriptのフレームワークです。最近、いわゆるAngular 2と呼ばれる全く新しいバージョンがリリースされました。これは最初にリリースされたAngularJS 1とは別物です。 (個人的な感想として)このフレームワークの特徴は 双方向データバインディング html側だけでfilterが実装可 ハイパフォーマンス TypeScriptを利用していることによる恩恵 などな
本投稿は機械学習に必要な高校数学やり直しアドベントカレンダー Advent Calendar 2016の12日目です! 近年、機械学習が物凄く話題になっており、それに付随して数学を学ぼう!っていう流れも出てきているので、数学好きな私としては嬉しい限りです。 はじめに 色んな所で騒がれている機械学習ですが、今やたくさんのツールやフレームワークが登場しているため、 原理や理論を知らなくても良いんじゃね?って声もちらほら聞きますが、個人的には「そんなことはないよ!」って思っています。 知らないままブラックボックスのまま使うことは、何かあった場合自分たちでは何もできないし、応用しようにもできないことになります。 そもそも機械学習って何なのかを知らないと、この技術を使うことすらできないかな〜って思います。 今回はタイトルにもあるように、その機械学習そのものに触れるのではなく、機械学習の原理を学ぶため
Riot.js Advent Calendar 2016の1日目です!(初トップバッター!) 今回はあまりテクニカルなプログラミングの話はせず、基本ばかりなので、その点ご了承ください(笑) qiita.com はじめに Riot.js(以下riot)は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。(ここまでテンプレート)そして今一番ホット(筆者比)なJavaScriptのライブラリでもあると思います! 2016/11/22、ついについに、ずっと待ち望んでいたメジャーアップデート「v3」がリリースされました! おめでとうございます!ありがとうございます! そしてつい先日!riotのSlack(日本ユーザ)も立ち上がりましたー! 皆さんご自由に参加して発言していって下さい! まずはざっくり振り返ってみる 主に触ってきたのはv2系、特に2.4.*です
はじめに 現在あるプロジェクトで、JavaScript界隈では一時期話題になった(*1) Riot.jsで開発をしている。DBとのデータのやり取りを全てAPI化しているため、APIに非同期に通信しているのだが、ちょっとコケたので(*2)備忘録として書き残す。 開発環境など Riot.jsのバージョンは2.4.1 AjaxにはjQueryを使用 ※$.ajax()のこと 本題のコード とりあえず.jsファイル、.tagファイルを見てみよう。今回はペン(ボールペンやシャーペンのことね)のメーカー情報を取得するものを例にする。 ・hoge.js /** * 非同期通信のまま返り値を受け取るメソッド * * @param {object} params パラメータオブジェクト * {string} url コントローラの指定 * {string} method POSTかGET * {string
はじめに 今までgulpを使って自動で.jsやら.scssをコンパイルするようにしていたが、今回はよく耳にするwebpackを使って開発環境を作ってみたお話。(最近触り始めてかなり気に入っている) もちろんgulp-*モジュールをフルに使えばできることだが、webpackの方が圧倒的に楽らしい。 ※1 gulp-webpackというモジュールを使ってgulpだけで全て解決することも可能。 ※2 今回作った環境構築用のソースコードはこちら。かなり簡単なものじゃね。 ※3 この記事はいわゆるhow-toではないので、それが目的の方は別の方の記事を探してみて下さい。 具体的にやりたかったことは、最近はもっぱらテンプレートとしてjadeを利用しているため、jadeのままriotのコンパイルにかけたい。ついでに一つのjsファイルとして出力したい。 それを簡単にできたら良いなと。 使ったモジュールリス
Riot.js 名前に「js」が入ってるから、JavaScriptのフレームワークかライブラリの1つ、とは想像が付くと思う。 Riot.jsとは、 A React-like user interface micro-library ですわ(公式より)。簡単に訳すとReact.jsに似せて作られた超軽量なUIライブラリくらいだろうか。 特徴としては以下の二点。 Custom tags Simple and minimalistic 個人的にこの2点ともヒットしたので使ってみた。 ただ日本語のドキュメントや記事が少なく、探しても大抵この方のQiitaの記事ばかりである。(大変参考にさせて頂きました!) なので、頑張って英語を翻訳しながら試行錯誤しつつRiot.jsの世界へ入った。 ※2016/08/04 追記 現在は公式ページの各言語への翻訳もされ、かつ沢山の方がエントリを書かれているので、結
前置き 今やっている案件(既存ECサイトのリプレイス)で実装した機能に ユーザがブラウザで別タブ・別ウィンドウを開いて商品を検索 各タブ・各ウィンドウでの検索条件を維持 (つまりそれぞれの画面でのセッションを維持) 今の画面の複製も同様に維持 というものがある。今回は、これをどう実装したかっていう話。 ただセッションの維持の方法は書かず、別タブ・別ウィンドウを開いたことを検知する部分の方法(というかTips)のみ。 ※2016/09/15 追記 補足内容をこちらの記事に書いてますので、合わせてご参照下さい! 続・ブラウザで別タブ・別ウィンドウを開いたことを検知する方法の問題点 実装方針 画面操作での制御なのでJavaScriptで実装 新しいタブ・画面を開いたことをonfocusイベントで検知 別のタブ・画面に移ったことをonblurイベントで検知 厳密には別タブ・別ウィンドウを開いたこと
CodeIgniter Advent Calendar 2015の19日目の投稿です。 Codeigniter(ver 3.0.1)を使い始めて約3週間経ちましたが、色んな記事を見ていて「これ良いな」とか、 「これは活用させてもらおう」と思ったネタを集めました。対象は初心者です。 経験者の方は大体知ってるものかと思いますので、ご了承ください。 必須事項 まずはやるべき事一覧。 index.phpのリダイレクト index.phpの設定 <?php define('ENVIRONMENT', 'development'); // 環境毎に変更 デフォルトコントローラ(ページ)の設定 application/config/routes.phpを編集。 <?php $route['default_controller'] = 'top'; ログ出力設定 application/config/co
※2017年10月19日 追記 本記事のriot.jsは、バージョンは2のものとなります。 現在の最新バージョンは3.7.3ですので、参考にならないこともありますので、ご注意ください。 はじめに 前回の続きで、今回はもっと具体的にRiot.jsの書き方に触れてみる。 ※よくあるチュートリアルのようなものを書く予定なので、自分の備忘録的に書きます。 したがって、随時更新の形にします。 cognitomさんの記事にRiot.jsのソースコードをとても詳しく解説されているので、 細かい仕様まで確認したい方はご参照ください。 書き方 opts変数 前回の最期でもちょっとだけ書いたopts変数について。tagファイル内で使われる変数だが、本当に中身はこれだけなのか疑問に思ったので、コンソールにopts変数の中身を出力してみた。 マウントした値は以下。 <script> riot.mount('app
はじめに CodeIgniter Advent Calendar 2015の18日目の記事になります! いつもAdvent Calendarは見る専門で参加するのは初めて。(なぜか緊張してます) 本投稿は「Codeigniterのコアな部分」には触れません。また、「Codeigniter入門」でもありませんので、ご了承ください。 初めてのCodeigniter 現在の職場で一番使われているPHPのフレームワークがCodeigniterなのだが、自分はこのフレームワークを使ったことがない。 先輩社員からは、「軽い・速い・CodeIgniter ユーザガイド 日本語版がとてもしっかりしていて分かりやすい*1・学習コストも低い、だからすぐに使えるようになるから勉強してみて!」と言われ、また 「何かわからなかったらググれ(ドヤァ」とのありがたいお言葉もいただいた。 というわけで、とにもかくにも使
リアルタイムでのデータ同期が特徴のバックエンドサービスFirebaseを利用してみたく、 ちょうどRiot.jsを使ってアプリも作ってみたかったので、勢いでチャットアプリを作ってみた。 今回はトランスコンパイルではなくプリコンパイルしてるので、.tagファイルを読み込むのではなく、 コンパイル後の.jsファイルを読み込む。作成したデモサイトはこちら。 ソースもGithubに上げているので、参考になれば。 ログイン認証や投稿者名などもなく、ただテキストを入力・送信・表示するような簡単なもの。Riot.js特有の落とし穴に何度かハマったが、 これはこれで勉強になった。 Firebaseの用意 Firebaseのホームページにてアカウントを作成。 作成後は以下のURLをコピー。 ソースコード 今回はFirebaseの使い方については割愛。 まずはhtmlファイル。 index.html <!DO
このページを最初にブックマークしてみませんか?
『Web Developer's Struggle Memories』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く