Tagbangers Blog

Frontrend

JS、Javaでサンプルプログラムを作ってみる

こんにちは、藤岡です。 今週も、先週に引き続きJavaとJavaScriptの勉強を進めました。 今週の課題として出していただいたのは、以下の3つです。 JSで四則演算を行うプログラムを作る JSで電卓を作る Javaで誕生日を入力し、年齢を算出させるプログラムを作る それぞれ、説明していきます。 四則演算プログラム(JS) このプログラムは、単純に「掛け算」、「足し算」、「引き算」、「割り算」を計算させるものです。 注意しなければならないのは、足し算を行う時です。というのも「+」を用いて計算させているため、数値が文字列として扱われてしまう危険性があるということです。そのため、「parseIn...

Thymeleafでpomのversionを利用する

お久しぶりです。奥村です。 GWを明日に控えたこのタイミングで連休ボケする前に小ネタを1つ投稿しておきます。 pomのversion値を利用して、各バージョンごとでcssファイルなどのキャッシュをリセットさせたい!っといった要望があった際に利用する小ネタです。 pom.xml     4.0.0     com.example     sample     1.0.0.RELEASE application.properties pom.version=@project.version@ index.html 1.0.0.RELEASE -1138007634 ...

JavaScriptの基礎学習

初めまして、藤岡です。 先週の木曜日から、タグバンガーズでインターン生として勤務することになりました。 というものの、プログラミング歴はほとんどないため、学びながらお仕事をさせてもらっています。 そこで、学んだことを備忘録も兼ねてこのブログに書き留めることにしました。 学ぶときに役立つサイト 今週は、主にJavaScriptについて学びました。 勉強するにあたって、参考になるサイトは MDN jsfiddle CodeAcademy です。 まず、MDNは初級者から上級者まで幅広く読まれているJavaScriptの定番リファレンスです。このサイトの読み方をマスターして、使いこなせるようになれば...

Chrome DevTools 小ネタ 〜shadowをつける〜

Hello web developer :) Web屋さん御用達のChrome DevTools小ネタを紹介。第1弾。(シリーズ化する風) 要素にshadowを追加する時に便利なTipsです。 まずいつも通りDev Toolsを開きます。( Macは command + option + i ) 今回使うのは一番馴染みがあるであろう、ElementsのStylesタブです。 好きな要素のStylesにマウスカーソルを載せると5つアイコンが出てきます。左から2つめがshadowです。 吹き出しの中の青いトグルを動かすと直感的に影の向きと大きさ、影のぼやけ方、影の距離を変更できます。便利! こんな...

Bootstrap3でテーブルをつくってみる

初めまして、篠原です。 社内では平野ノラとも呼ばれています。 どうぞ宜しくお願いします。 Bootstrap3で表を作るときに便利なclassを使ってみました。 基本のテーブル 順位 名前 県名 票数 1位 奈良県 せんとくん 60票 2位 愛知県 ひでっち 45票 3位 神奈川県 ヤマトン 44票 4位 新潟県 レルヒさん 43票 5位 兵庫県 はばタン 37票 ちなみにこちらは、地域マスコットの見た目ダサくね!?と思う都道府県ランキングです。 私はヤマトンが好きなので少々悲しかったです。 参考にしたランキングサイトはこちら → goo ランキング さて続いて、便利なクラスをみてい...

Riot.jsのRoutingについて

SPAをとりあえず味わってみたいけどどこからはじめればいいか。 まずはやさしく始められるRiotでやってみよう。 ということでRiotのRoutingについてドキュメント引きながらやってみました。 Riot Routerの機能 いわゆるRouting、URLを判断してどのビューを表示させるか決めるというのが大きな仕事 Setup Routingの書き方は大きく2つ riot.route(callback) URLが変化したらcallbackを返します。 *「URLが変化」するというイベントが発生するタイミング とは以下の4つのパターンのとき 新しい#(URL)がアドレスバーに入力されたとき。 ...

Riot.js QuickStart+JSPM

とりあえずRiot.jsをはじめるためのメモ Step1. プロジェクトを作成する riot-sampleなど適当に Step2. npmで必要なものをインストールする $ npm init -y $ npm install jspm@beta --save-dev $ npm install superstatic --save-dev  #webserver Step3. package.jsonのscriptsを編集する ...   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1",   ...

Webサイトデザイン調査用ChromeExtension 7選

Webサイトを作る時、他のサイトさまを参考にすることってよくあると思います。 その際によく使うおすすめChromeExtensionをご紹介します。 1.スクリーンショットを撮る Awesome Screenshot https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj App版 https://chrome.google.com/webstore/detail/awesome-screenshot-app/mfpiaehgjbbfednooiha...

Angular2 QuickStart + JSPM

Angular2 の RC5 がリリースされましたね。 NgModule という仕組みが追加されたようで、ついていくのが大変ですがどんどん便利になるのはわくわくしますね。 今回記事は、Angular2 の QuickStart を JSPM でアレンジした時のメモ。 あとからごにょごにょタスクを書きたくなるかもしれないので、gulp も入れました。 ソースコードは ここ にあります。 Step1 : npm で必要なパッケージをインストール npm init -y npm install \ babel-preset-es2015 --save-dev \ babel-register -...

うわさのRiot.jsとSpring Bootでサーバーサイドレンダリング

前置き ウェブアプリケーションをもっともっときもちのいい UI に。 ちらつきは悪だ そのための SPA (シングルページアプリケーション)。 でもいつまでも最初のページで Ajax による遅延描画で画面をガタガタちらつかせている場合じゃない。 だから、最初のページはサーバサイドでコンテンツをレンダリングしておきたい。 これがサーバーサイドレンダリング。 でもどうせだったらブラウザ側で実行しているコード (Javascript) をサーバサイドでもそのままつかってコンテンツをレンダリングできれば一石二鳥では? これが Isomorphic なアプローチ。 今回の構成 Riot.js Riot....