サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
おみそ汁
sterfield.co.jp
の記事です
WebAPIとは Web APIとは、コンピュータプログラムの提供する機能を外部の別のプログラムから 呼び出して利用するための手順・規約（API：Application Programming Interface） の類型の一つで、HTTPなどWebの技術を用いて構築されたもの。ざっくり簡単に言うとオ ンライン上でアプリケーションを利用する、というものでデータが欲しい！！等のリクエスト を送ったりするとデータがjsonやxml形式で返ってきます。これをAPIを叩くと言います。 以下のURLにブラウザで直接アクセスすれば、JSONデータを確認できます。 ・東京都の天気予報の概要を取得する https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json JSONなので人間には少し読みにくいですが、読みやすくする方法
技術者の皆さんがGoogleスプレッドシートを本格的に運用していく場合、 プログラム内でスプレッドシートのデータを取得して利用したい、 あるいはその逆で、プログラムで生成したデータをスプレッドシートに入力したい、 といった局面が出てくるかと思います。 今回はそのようなシーンで役に立つGoogle Sheets APIの使い方を紹介します。 Google Sheets APIとは？ その名の通り、Googleスプレッドシートを操作する事のできるAPIです。 指定したスプレッドシートに対して、読み書きなどの処理を外部から行う事ができます。 本記事では入門として指定したスプレッドシートの内容を読み取るところまで説明します。 0.Google Cloud Platform内で作業用プロジェクトの作成 Google Cloud Platformで今回の作業用のプロジェクトを作成します。 今回はプロジ
実はcheckboxはcheckedだけじゃなかったです。 三つのステータスがあります。 indeterminateというプロパティです。 Unchecked Checked Indeterminate 使い方 JavaScript var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;
nuxt.jsは静的なHTMLファイルを生成することができるため、コーディングツールとして使えるのではないかと思い、試してみました。 nuxt.jsをコーディングツールとして使うメリットとしては、 gulpやwebpackと違い、nuxt.jsはある程度インストール時点で環境が整っているため、環境設定に時間を使わなくて済む Vue.jsを使ったコンポーネント単位のモダンなコーディングが可能 静的な出力だけでなく、SPAへの切り替えも簡単にできる などが挙げられます。 今回私が導入するときに行ったことを紹介いたします。 ↓作ってみたもの DEMO インストール Macの場合はターミナル、Windowsの場合はコマンドプロンプトを開き、cdコマンドでコーディングを行うディレクトリへ移動。 Nuxt.jsのプロジェクトを作成
json_encode関数を用いることで、JSON形式のデータを簡単に生成できます。 APIを作成するにあたって、ブラウザから直接アクセスすることによって意図しない動作を引き起こすことがないように、適切に処理する必要があります。 以下サンプルでは、ブラウザ直アクセスの場合エラーになるようにしています。 json.php <?php # jQueryなど主要なJavaScriptライブラリを通じてのアクセスである # （ブラウザからの直接アクセスでない）ことを確認します。 if (! isset($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') { die(json_encode(array('status' => "不正な呼び出しです"))); } #
スターフィールド株式会社 > Blog > 制作 > html5 > ネイティブアプリ並みのパフォーマンス！WebAssemblyでフロントエンド開発が変わる JavaScriptは現在のWeb上で欠かせないものとなっています。近年のWebアプリケーションは物理演算や画像・音声・映像の処理、人工知能といったネイティブアプリと同じような機能や動作が求められるようになってきています。また、ユーザー側の端末のパフォーマンスが大幅に向上してきたことから、以前はサーバー側で行っていた処理をフロントで行うようになってきているため、フロントのプログラムはより複雑に、大規模なものが必要になってきています。 しかし、そのような複雑で大規模な処理をJavaScriptだけで行うことに限界が出てきていました。JavaScriptは元々複雑な処理や大規模な開発を前提としたプログラム言語ではないため、言語の特性上、
ようやく巡り会えました。大本命のスタートページ。 定期巡回する情報収集のツールと最早欠かすことの出来ない存在です。 私のスタートページの変遷をブログ記事で御覧ください。 2013年10月 igoogleの移行先はMy Yahoo!推し ↓ 2016年6月 My Yahoo!からMy Yahoo!に移動 サービスが終了するに連れて移行を繰り返し、igoogle→MyYahoo（co.jp）→MyYahoo(com)と変遷しましたがようやくこれだというのに出会えました。 その名も「iChrome」 MyYahooも悪かったわけではないのですが、_blankの設定が出来なかったり、検索エンジンがyahoo.comだったり（当たり前なのですが）とスタートページとして使うにあたっては、改善して欲しいなと思うところが何点かありました。 そして、そもそも要因としてWindows10で開いているとスリープ
最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、 これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、 若干戸惑ってしまいました。 しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。 そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。 そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。 アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、
複数の人で開発を進める場合や、プログラムの規模が大きくなってきた場合に、 コメントの記述が、開発の大きな助けとなります。 さらにそのコメントが、標準化された方法で記述されていると、さらに可読性が高まり、 生産性の向上が期待できます。 私はこれまで、特にそういったことを気にせずにコメントを書いたり書かなかったりしてきましたが、 規模の大きな開発に関わるときに、このことが障害になってしまうことを感じ、 コメントの記述を見直そうと思い調べてみました。 今回紹介するのは、現在、最もポピュラーと思われる JSDoc コメントというコメントの記述方法です。 JSDoc コメントは、Google の JavaScript スタイルガイド でも推奨されているコメントの方法で、 AngularJS、CreateJS、jQuery（部分的に） など、メジャーなライブラリで利用されています。 JSDoc のメリ
Three.js を使うと、簡単に WebGL による 3D の描画ができ、360°パノラマのビューアーを作ることもできます。 これは、球体に360°のパノラマ画像をテクスチャとして設定することで実現していますが、 Three.js ではこのテクスチャに動画を指定することもできるので、 360°動画のプレイヤーを作ることも比較的簡単にできてしまいます。 公式の DEMO でも見ることができますが、 こちらは VR のみで操作可能で、ドラッグやスワイプでの操作はできないようでしたので、 ドラッグやスワイプで操作できるものを作ってみました。 ↓ 作ってみたもの DEMO (動画サイズ 11MB-) ↓こちらの360°のパノラマ動画を使わせていただきました。 Free 360 Video Downloads Page | 360/VR Master Series | Mettle 作り方 HTM
2010年12月に WebGL が Chrome で利用可能となり、 2011年には3月に Firefox、7月に Safari で利用可能となり、 2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、 一般的なほとんどのブラウザで WebGL が利用可能となりました。 それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、 今、WebGL の実装の機会が増え、必要性も求められつつあります。 私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、 WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、 Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、 技術を応用して新たに何かを作り出すというところ
弊社では様々な連絡・コミュニケーションにChatWorkを利用しており、プロジェクトごとに必要な情報がだいたいChatWorkに集約していく、くらいに使い込んでます。 とはいえ、スプレッドシートでも様々な情報をまとめることもありますが、更新状況がいまいち掴みづらい。ということでGoogleスプレッドシートの更新状態を定期的にChatWorkへ通知する仕組みを作ったので解説します。 スプレッドシートの例 サンプルなので2列しかありませんが… 今回は「A列になんらかの入力があれば、ChatWorkへ通知する」という方針でやっていきます。 監視したいスプレッドシートのスクリプトエディタを起動して、Google Apps Scriptを書いていきましょう。Excelで言うところのVisual Basic for Applicationsみたいなものですが、こっちはJavaScriptベースなので馴
規模がある程度以上大きなサイトでWordPressを利用する場合、 ディレクトリやページごとに読み込むCSSやJSを変更する必要が出てくることが多々あります。 header.phpやfooter.php、または各種テンプレート内でこれらを振り分けることも可能ではありますが、 振り分けるファイルの数が多くなると、 これらの方法では、コードが見づらくなってしまったり、管理が煩雑になってしまいます。 WordPressでは、functions.phpでadd_action()という関数を使うことで、WPの特定のアクションに対して、様々な設定することができますが、 その設定の中で、wp_print_styles、wp_print_scriptsというアクションに対して、wp_enquete_style()、wp_enqueue_script()という関数を合わせることで、 管理のしやすい状態で、C
これまでにも少しvue.jsを触っていましたが、今回はRouterを使用してみたいと思います。 今までのは以下のようになってます。 javascriptフレームワークのvue.jsを使ってみる（入門編） javascriptフレームワークのvue.jsを使ってみる②（ソート機能っぽいもの） javascriptフレームワークのvue.jsを使ってみる③（簡単TODOリスト） vue-routerとは？ vue.jsを使用してサイトを作る際ルーティングを設定したい場合、使用する公式ライブラリです。 はじめに · vue-router vue.jsを使う場合は、SPAが多いと思いますが、今回は普通のサイトの形でやってみました。 ページのメニューがあり、そこを押下するとそのページに飛ぶみたいな感じです。 vue-routerを使用すると、 ・URLがつく ・history(ブラウザの戻るが使用で
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 追記(2019年10月)： IE11から使えるもっとわかりやすい操作方法をご紹介しました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以
/*** iOS ***/ .switch__label { width: 50px; position: relative; display: inline-block; } .switch__content { display: block; cursor: pointer; position: relative; border-radius: 30px; height: 31px; overflow: hidden; } .switch__content:before { content: ""; display: block; position: absolute; width: calc(100% - 3px); height: calc(100% - 3px); top: 0; left: 0; border: 1.5px solid #E5E5EA; border-radiu
以前、vue.jsの記事を書いたのですが、 今回もうちょっと機能を使い、DEMOを作ってみました。 前回は入門編と書いたのですが、基礎編とか応用編とか、ちょっとどう切り分けたらよいかわからなくなりそうなのでやめました笑 javascriptフレームワークのvue.jsを使ってみる（入門編） 今回のDEMOは「ECサイトでソートする機能みたいなもの」です。 公式サイトにある例のグリッドコンポーネント – Vue.js DEMO 価格、レビュー、口コミ数等をクリックすると順番が、昇順、降順で切り替わるようになっています。 あとはテキストフィールドに文字を入力するとその文字が入ったものを表示します。 コード html <div id="sort"> <p>検索： <input type="text" name="query" v-model="word"></p> <table> <thead>
を実行してpython用のseleniumをインストールします。これで基本的な準備は終わりました。 今回は、googleでキーワード検索結果のスクリーンショットを5ページぶん撮影する、という操作を自動化してみます。以下がそのプログラムです。 import os from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By driver = webdriver.Chrome
今や、webサイトの開発・制作には欠かせない存在といっても過言ではないchromeのデベロッパーツールですが、 もしかしたら意外と知られてないかもしれないという機能を紹介したいと思います。 こんなの当たり前だよ！って感じでしたらすみません… 早速紹介したいと思いますが、chromeのデベロッパーツール自体の説明については省略させて頂きます。 一応初心者向けの方を対象にした記事を貼っておきます。 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方 記事にもありますが、 ツールを開くにはショートカットも使用でき、 「option」 + 「command」 + 「i」(Macの場合) 「F12」(Windowsの場合) で開くことができます。 テーマ変更 ルーラー表示 要素の疑似状態を確認 背景画像のチェック 検証ツール表示の時だけできる「再読み込み」 使用していないcssやjav
日々webサイトを見ている中で、「この表現どうやっているんだろう」、「やってみたいな」というのを試してみました。 本来やろうと思っていたのは縦長ページだけど、1コンテンツずつ切り替るような、 光岡自動車 デンソー ブランドサイト こういったサイトみたいなのです。 このような動きをするプラグインはfullpage.jsで出来る感じはするんですが、 プラグインを使わずにやってみたかったのですが、時間の関係で今回はjsは辞めてcssだけでやることになったのでちょっと妥協してしまった形になります。 fullPage.js とりあえずDEMOサイトはこちらになります。 DEMO demoはパパパッと作ったので見た目、ソースはキレイではありません。 そして中身は弊社サイトのコンテンツを流用しております。 あと細かい解説等はしておりませんのでご了承下さい。。。 デンソー ブランドサイト 先程も紹介しまし
Ajaxはページ遷移で発生するユーザーのストレスを軽減する方法として有効ですが、 ページ遷移の履歴が残らないため、 ブラウザの戻るボタンを押した場合に、ユーザーの意図しない動作になってしまう場合が多々あります。 HTML5のJavaScriptの仕様で、履歴を扱うhistoryオブジェクトに、 pushState()およびpopstateイベントが追加され、 Ajaxのような実際にページ遷移しない場合でも、ページの変化があるごとに、URLを変更して履歴を追加することができるようになりました。 この機能はIE10以上のブラウザで利用することができます。 今回は、この機能を使ったページ遷移の方法をご紹介いたします。 ↓作ってみたもの DEMO 方法 遷移するそれぞれのページを、Ajax経由ではなく、直接開いても問題ない状態で用意する 初期で読み込んだページのURLを取得し、pushState(
前回の記事で、CSS の 3D Transform を利用したコンテンツの作成方法をご紹介しました。 しかしながら、実際やってみると、 前回ご紹介したような、立方体を回転させるという単純なものでも、 結構骨の折れる作業でした。 やりながらふと思ったのは、Three.js だったらもっと楽にできるのになぁということでした。 Three.js は WebGL をとても扱いやすくしてくれる JavaScript ライブラリです。 Three.js を使えば、立方体を回転させるという動作は、とても簡単に実装することができます。 Three.js で CSS を扱えないだろうか。。 そう思い調べてみたところ、↓こちらの記事を発見しました。 WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化 なんと、Three.js には、CSS で描画するためのプラグ
PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、 スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、 画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。 これは、jqueryのtouchstartイベントを使うではなく、 touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。 $(function() { $( 'div' ).on( { 'touchstart': function() { this.isTouch = true; }, 'touchmove': function() { this.isTouch = false; }, 'touchend': function() { if(this.isTouch == true){ // popupイベントを発生
CentOS6.7にて、SSL VersionをNSSからOpenSSLに変更する際に、curlのバージョンアップが必要があったため、それを記事にしてみました。 現状のバージョンは下記コマンドで確認できます。
はじめまして、4月からプログラマとして働きはじめたmotokiと申します。 さてさて、発売日が発表され、じわじわと詳細が明らかになるドラゴンクエスト11。PS4版か、3DS版か悩みますよね。 今回のドラクエ11には「ふっかつのじゅもん」機能が復活するとのことで、ファミコン時代を思い出すピコピコおじさんおにいさんは多いと思います。私もそうです。 復活の呪文をご存じない方へ端的に説明すると「ゲームの進行状態を電子データとして保存せず、代わりに文字列として書き出しておき、それを利用してゲームを再開する」という、今時の感覚からすれば謎の仕様ですね。ゲームカセットに電池を搭載してRAMの状態を保持する技術が普及し、フラッシュメモリが浸透し、クラウド保存があたりまえになった今では逆に新しく感じるかもしれません。 ドラクエ11でも現在の進行状態を「復活の呪文」化することで、だいたい同じ進行度を維持したま
今やjavascriptフレームワークはフロントエンドの者にとっては出来て当たり前という雰囲気をひしひしと感じております。 javascriptフレームワークといえば、 ・react ・angular ・backbone ・riot ・Aurelia 等々あり、特に人気が高いのは、react,angularなのですが… 私が目をつけたのは「vue」です。 vue.jsとは vue.jsとは公式サイトから引用させて頂き、 Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てているため、Vue.js を使い始めたり、
軽量できれいな画像を表示させることができるSVGですが、 SVGにはアニメーションに関わるタグがあり、 JavaScriptやCSSを使わなくてもアニメーションさせることができます。 ↓こちらのSVGアイコンを使ったサイトをご覧いただくと、その良さを感じていただけると思います。 SVG Loaders – Sam Herbert IEでは現在最新のバージョンである11ですらこのアニメーションに対応していないので、 現時点ではスマホ用のサイトなどに利用は限られてしまいますが、 GIFのアニメーションと比べて制作の手間も少なく、 何より「軽量」、「拡大してもきれい」「アニメーションがとても滑らか」という利点があるので、 利用価値は大いにあると思います。 今回は以前loading画像として作ったアニメーションGIFを、 SVGで再現してみることにしました。 GIF版 ↓HTML5のインラインSV
次のページ
このページを最初にブックマークしてみませんか？
『越境EC｜システム開発｜スターフィールド株式会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
