Ohtsu

DockerでMEAN Stackの稼働環境を簡単実現 ref: https://qiita.com/SOhtsu/items/da97e60164669e88a6a7

This example shows a Docker Compose configuration for running a MEAN stack application, with separate services for an Angular frontend, a Node.js backend, and MongoDB. The visualization highlights the service dependencies and network connections using Docker’s `depends_on`, `links`, and `networks` directives. The frontend is built in two stages with `node:alpine` and `nginx:alpine`, while the backend uses a single-stage Node.js build executed via `npm install` and `node server.js`. The setup also includes mongo-express for database administration, with environment variables for authentication credentials.

Jan 4, 2019

DockerでPandocの稼働環境を簡単実現 ref: https://qiita.com/SOhtsu/items/0cff10879a0c19e4bdb6

This example demonstrates a complete Pandoc workflow running inside Docker, showing how Markdown documents with embedded LaTeX, citations, and cross-references are converted to PDF via the `pandoc` command-line tool. The code spawns Pandoc with a lualatex engine, enabling TeX notation, tables, equations, and bibliography management. It references a BibTeX file (`myref01.bib`) and uses filters like `pandoc-crossref` for figure numbering. The sample documents illustrate rendering of special characters, math, footnotes, and citation styles, highlighting the seamless integration of Markdown, LaTeX, and bibliographic data for automated document generation.

Nov 26, 2018

Docker用VS Code拡張機能の使い方 Angular7のコンテナ化 ref: https://qiita.com/SOhtsu/items/32c0df5820e039c8c0f6

This example demonstrates a two-stage Docker build that containerizes an Angular 7 application for production deployment. The first stage uses `node:10.12` to copy the source code, run `npm install`, and execute `npm run build --prod` to compile the project. The second stage copies the resulting static files from `/app/dist/ng7-initial` into an `nginx:alpine` image, serving the built app via a lightweight web server. The Dockerfile leverages multi-stage builds and `COPY --from` to reduce the final image size by excluding build dependencies.

Nov 16, 2018

文献参照ツール Pandoc Citerの利用方法 ref: https://qiita.com/SOhtsu/items/cf126804002108d842a0

This example demonstrates a command-line workflow for automating PDF generation from Markdown files using Pandoc, specifically tailored for Japanese academic documents. The code defines a Node.js script that spawns a Pandoc process with arguments for LuaLaTeX PDF conversion, a table of contents, a BibTeX bibliography (`myref01.bib`), and the Chicago author-date citation style via a CSL file. It also includes the `pandoc-crossref` filter for cross-referencing figures and tables. The child process’s standard output and error streams are logged to the console, with a final exit code notification.

Nov 10, 2018

WSLへのPandocのインストール ref: https://qiita.com/SOhtsu/items/e921142372d0f4cce410

This example demonstrates a Node.js script that converts Markdown files into PDF documents using Pandoc, with a specific focus on Japanese typesetting. The code spawns the Pandoc process with arguments for LuaLaTeX as the PDF engine, the `ltjarticle` document class, a table of contents, and cross-referencing via the `pandoc-crossref` filter. It captures and prints the child process’s stdout and stderr streams to the console. The script relies on the `child_process` module’s `spawn` API to manage the external command.

Nov 9, 2018

"ng6-udm-mock" JsonPlaceholderとjson-serverを使用するためのAngular6用サービスライブラリ ref: https://qiita.com/SOhtsu/items/b19818c17f39aaddaa98

This example demonstrates a service library for Angular 6 that provides CRUD operations for mock data entities such as posts, comments, albums, photos, todos, and users. It uses ng6-udm-mock with json-server and JSONPlaceholder as the backend API. The code defines TypeScript interfaces for all data models and exposes Observable-based methods like getAllPosts(), getPost(id), addPost(), updatePost(), and deletePost(). The AppComponent shows how to subscribe to these methods for retrieving and manipulating data, with error handling for HTTP responses.

Sep 18, 2018

"Ng6PwaSample" Angular6で作成したPWAのサンプルプロジェクト ref: https://qiita.com/SOhtsu/items/98e5e85de5eb15ce46b5

This example demonstrates a progressive web app built with Angular 6 that displays a sample project setup for local development. The code shows a standard command-line workflow, including installing dependencies with npm, building the app with the Angular CLI (`ng build --prod`), and serving the compiled files using the `http-server` package on port 8080. It illustrates how Angular’s build tooling produces a production-ready bundle that can be hosted statically, with the PWA capabilities implied by the project name. The visualization focuses on the setup process rather than a graphical data representation.

Aug 2, 2018

Angular6でナビゲーションを利用したいと考えている開発者向けのサンプル ref: https://qiita.com/SOhtsu/items/ffc40ba67c0a1f2d149b

This example demonstrates a responsive navigation interface built with Angular 6, showing how developers can implement adaptive menu behavior for varying screen sizes. The code uses Angular’s `RouterModule` and `Navigation` components to manage route transitions, while the layout adapts via CSS media queries and Flexbox. The project, cloned from a GitHub repository, relies on the Angular CLI (`ng serve`) to render the interface locally. The sample’s source data is the static navigation structure defined in the Angular templates, with no external dataset. The visualization focuses on the interaction between the navigation state and the rendered DOM, highlighting practical use of Angular’s built-in directives without third-party charting libraries.

Jul 21, 2018

Angular6でダッシュボードを作成したいと考えている開発者向けのサンプル ref: https://qiita.com/SOhtsu/items/d524c1c3e65c1972a081

This sample demonstrates a functional dashboard UI built with Angular 6, showing a clean layout of interactive cards and charts for a typical data-monitoring interface. It uses Angular’s core modules—including component templates, data binding, and services—to structure the dashboard’s content, alongside CSS grid-based styling for a responsive arrangement. The rendering approach relies on Angular’s built-in DOM manipulation rather than external charting libraries, and the data displayed is hardcoded within component classes, not fetched from a dynamic source. The example focuses on the framework’s capability to assemble a cohesive, modern dashboard front-end through standard Angular practices.

Jul 21, 2018

"ng6-o2-chart" D3.js(バージョン４)を利用したAngular6用チャートライブラリ ref: https://qiita.com/SOhtsu/items/58d826a0e74577411336

This example presents a comprehensive Angular 6 chart library built with D3.js version 4, showcasing multiple visualization types including line, pie, bar, scatter, histogram, stacked bar, world map, globe, tree, pack layout, choropleth, and force-directed graphs. The library leverages D3’s animation capabilities, which are enabled by default and may cause performance slowdowns on less powerful machines, as seen in the accompanying notes. The code references concrete D3 APIs such as `d3.forceSimulation` for the force-directed layouts and `d3.geoPath` for geographic projections. A consumer repository via GitHub demonstrates the installation process, which involves cloning and running the library.

Jun 26, 2018

UdmChart

UdmChart builds an interactive force-directed network diagram from a JSON dataset, showing how nodes cluster and link through shared connections. The example uses Angular 6 with D3.js, specifically `d3.forceSimulation` and `d3.forceLink`, to compute node positions and edges in real time, while SVG circles and lines render the graph. Hovering highlights neighboring nodes, and the layout responds to drag events, with the simulation restarting on each interaction. The code is structured as a reusable Angular library via `ng-packagr`, with the main app bootstrapped through `npx @angular/cli`.

UdmChart

UdmChart is an Angular component that renders a variety of D3.js charts, including line, bar, pie, scatter plot, histogram, stack bar, geographic map, tree, and force-directed layouts, all as animated SVG. It switches chart types based on an input parameter and uses `d3.histogram` to bin data for histograms, with scales and axes configured from a data-driven configuration object. The code imports the full D3 library and applies transitions for animation, supporting customizable margins and grid lines.

UdmChart

This example demonstrates an interactive chart built with Angular, displaying data through the UdmChart library. It shows a visualization component (Ng6UdmChartModule) integrated into a browser application. The code imports the module from the local `projects/ng6-udm-chart` directory and uses Angular’s `BrowserModule` and `NgModule` to bundle the component. The rendering approach is defined by the library’s internals, though the visible code only wires the module into the app’s main module. Data specifics are not visible, but the architecture highlights how Angular composes third-party charting modules into a working app.

UdmChart

UdmChart demonstrates an Angular library that renders twelve distinct D3.js chart types, including geoOrthographic projections, bar, pie, scatter plot, histogram, pack layout, tree, line, geoMap, stackBar, choropleth, and force-directed graphs. Each chart is instantiated through a reusable `<lib-Ng6UdmChart>` component, which takes `chartType`, `configData`, and `graphData` as inputs to generate SVG output. The examples use static JSON datasets for each visualization, with the geographic charts relying on D3's projection and path generation, while the force layout employs `d3.forceSimulation` for node positioning.

UdmChart

UdmChart is an Angular component that provides a configurable interface for rendering a variety of chart types, including bar, line, pie, scatter plot, histogram, stacked bar, and treemap visualizations. The application loads chart-specific JSON data and applies a central configuration object that controls appearance, such as colors, margins, legends, and animation. The implementation leverages Angular's component architecture and imports chart constants from a custom library, demonstrating a structured approach to building interactive data visualizations within a web framework.

UdmChart

UdmChart is a multi-view dashboard that presents a variety of data visualization types, including line charts, bar charts, histograms, treemaps, pie charts, and network diagrams. It also features interactive elements like a force-directed graph using `d3.forceSimulation` and a collapsible tree layout. The code employs D3.js APIs for scales, axes, and layouts, along with SVG rendering for all graphics. The example demonstrates how D3's modular components can be combined to create a versatile, data-driven interface with multiple synchronized views.

UdmChart

UdmChart renders a customized scatterplot using the D3.js library, drawing data points within a graph area defined by configurable margins and scales. It calculates graph dimensions, axis positions, and scaling factors from configuration and SVG size, then applies translate transforms for graph and axis placement. The visualization shows how D3's core APIs for SVG manipulation and coordinate calculations support flexible chart layouts with configurable legends, titles, and axis properties.

UdmChart

UdmChart demonstrates a collection of twelve chart types, including line, bar, pie, scatter plot, histogram, stack bar, geo map, geo orthographic, tree map, pack layout, choropleth, tree, sankey, and force layouts. The visualization uses D3.js APIs such as `d3.forceSimulation` for network diagrams and `d3.geoPath` for geographic projections, rendering each chart type through a unified interface. It draws sample data on a canvas, enabling interactive exploration of diverse visualization patterns within a single application.

UdmChart

UdmChart is an Angular module that renders a custom chart component using the `Ng6UdmChartComponent`. It imports and exports this component through `Ng6UdmChartModule`, structuring the visualization as a reusable Angular building block. The chart’s implementation leverages Angular’s component architecture, with the module declaring and exporting the chart for use in other parts of an application. The code focuses on modular integration rather than a specific visual encoding, providing a framework for embedding the chart within larger Angular projects.

Angular5による多言語サイトの構築方法 ref: https://qiita.com/SOhtsu/items/7e5d072e5ba6c7f0aad5

This example demonstrates how to build a multilingual Angular 5 site using the built-in internationalization (i18n) tools, with separate build configurations for Japanese and French alongside the default English version. The setup uses Angular CLI commands like `ng serve` and custom npm scripts that invoke `ng build` with flags such as `--i18nFile`, `--i18nFormat=xlf`, and `--locale=ja` or `--locale=fr`, producing distinct output directories (`dist/ja`, `dist/fr`) with base-href adjustments. It shows the workflow of cloning a gist repository, installing dependencies via `npm install`, serving the development build, and then generating localized production bundles from source locale files.

May 5, 2018

I18n Scripts For Package.json

This example presents a JSON object of npm script commands for an Angular project, illustrating internationalization configurations. It uses the `ng xi18n` extraction tool and `ng serve` or `ng build` commands with flags like `--i18nFile`, `--i18nFormat=xlf`, and `--locale` to generate or run localized builds for Japanese, English, French, German, Italian, and Spanish. The visualization likely parses this JSON to display the script names and their corresponding locale-specific arguments.

Apr 22, 2018

bootstrap4_button_events

This example demonstrates how an Angular component emits structured button-click events from a Bootstrap 4 navigation interface. It shows a navbar with brand, logo, menu, submenu, and search buttons, where each interaction triggers a `buttonClick` event carrying a parameter object with the button type and associated text. The implementation uses Angular’s `EventEmitter` and `@Output` decorator (via `this.buttonClick.emit`) and logs details to the console, including the target element’s innerText for menu items and the search input value. The code is written in TypeScript, referencing `configData.Brand.name` for the brand label.

InitializeData method for bootstrap4 navbar

This example demonstrates the initialization of configuration data for a Bootstrap 4 navbar component. The `initializeData()` method populates a `configData` object with TypeScript-defined structures for color theming, logo and brand display, search functionality, and a hierarchical menu array. It uses the Angular framework implicitly through its class structure, with menu items supporting both standard links and dropdown submenus via a `submenu` array property. The configuration specifies visible flags, routing links (`rlink`), and IDs for DOM binding, providing a complete blueprint for rendering the navbar’s navigation elements.

NavHeader For bootstrap4

This example demonstrates a configurable navigation header component built with Angular and Bootstrap 4, displaying a logo, brand name, menu items with optional dropdowns, and a search form. The template uses Angular structural directives like *ngIf and *ngFor to conditionally render each element based on the configData object, which also supplies the logo URL, brand text, menu titles, and submenu items. Navigation buttons use the [routerLink] directive for client-side routing, while dropdowns rely on ngbDropdown from the ng-bootstrap library. Click events (logoButtonClick, menuButtonClick, submenuButtonClick, searchButtonClick) and two-way data binding via [(ngModel)] handle user interaction.

bootstrap4_setHeaderColor

This example demonstrates how to dynamically set the color theme of a Bootstrap 4 navigation bar. The code defines a `setHeaderColor` function that assigns specific CSS classes to the navbar, brand, search button, and logo button based on a chosen base color such as dark, light, primary, or danger. It uses TypeScript with Bootstrap 4’s class-based styling system, including `navbar-dark`, `bg-primary`, and `btn-outline-success`, to apply the theme. The implementation relies on an object-literal class binding approach, likely for use with a framework like Angular.

"o2-chart-lib" D3.js(バージョン４)を利用したAngular5用チャートライブラリ ref: https://qiita.com/SOhtsu/items/dacac4f23679c8a89c91

This gallery example presents an Angular 5 chart library built on D3.js version 4, showcasing a diverse range of visualizations including line charts, pie charts, bar charts, scatter plots, histograms, stacked bars, world and globe maps, trees, pack layouts, choropleths, and force-directed graphs. The library defaults to enabling animations across all charts, which can slow response on less powerful machines. The code uses D3 APIs such as `d3.forceSimulation` and `d3.geoPath` to render the dynamic and geographic elements. A demo consumer project is available via a GitHub repository, which can be cloned using standard git commands.

Mar 8, 2018

Gist c85dd820e20ad40ed05f07b3ea0eb4a8

This example shows a Gulp task that creates a timestamped backup of an Angular project directory. It uses `gulp.src` to copy all project files except `node_modules` into a new folder named after the current directory and the current time, formatted with a custom `dateFormat` utility. The task accepts an optional `m` argument via `minimist` to append a message to the backup folder name. The code demonstrates file-watching and build automation with Gulp’s task system and path handling through `path.parse`.

Mar 1, 2018

NavBar sample based on ng-bootstrap

This example shows a responsive navigation bar built with Bootstrap 4 and Angular, using the `ngbDropdown` and `ngbDropdownToggle` directives from ng-bootstrap to handle the dropdown menu. The navbar collapses at the medium (`md`) breakpoint, displaying a toggle button for smaller screens. It includes a left-aligned list of links (Home, Link, Disabled, Dropdown) and a right-aligned search form, styled with Bootstrap’s `navbar-dark` and `bg-dark` classes. The markup relies on standard Bootstrap collapse behavior and Angular event binding for the dropdown, with no custom JavaScript or data manipulation.

Feb 18, 2018

Gist dc86a67fe2fcbf50032b3763c7309119

This example demonstrates a Material Design dialog for collecting user input, specifically asking for a favorite animal. The dialog displays a title and a text field pre-bound to a data object containing a name and an animal value. The code uses Angular 5 with Angular Material components such as `md-dialog-title`, `mat-dialog-content`, `mat-form-field`, and `mat-dialog-actions`, along with `[(ngModel)]` for two-way data binding. It includes two buttons that trigger cancel and confirm actions through click handlers.

Jan 24, 2018

Angular Materialを利用するためのAngular5用初期セットプロジェクト ref: https://qiita.com/SOhtsu/items/bc66c323e906db907d5d

This example shows a ready-to-use Angular 5 project configured for Angular Material, with dependencies on `@angular/material`, `@angular/cdk`, and `hammerjs` for gestures. The setup includes a full development toolchain with `@angular/cli`, Karma for unit testing, and Protractor for end-to-end tests. It demonstrates how to clone the repository, install dependencies via `npm install`, and launch the app with `ng serve`. The code relies on RxJS and zone.js for reactive programming and change detection.

Jan 23, 2018

Adding script of localback for existing gulpfile.js

This example adds a `localbackup` task to an existing Gulpfile, creating a timestamped backup of the current Angular project directory. It derives the solution name from the current directory path using Node’s `path.parse`, generates a version string with custom date formatting, and defines a target path that includes both the solution name and timestamp. The task uses `gulp.src` with glob patterns to copy project files while excluding `node_modules`, then pipes the result to `gulp.dest`. The code shows the Gulp task API and a custom date formatting object operating without external dependencies.

Jan 21, 2018

Localbackup Gulpfile.js for Angular

This example demonstrates a Gulp task that creates timestamped local backups of an Angular project directory. It computes a version string from the current date using a custom `dateFormat` object, constructs a target path naming convention (`../<solution>_<timestamp>`), and copies all project files—excluding `node_modules`—to that destination via `gulp.src` and `gulp.dest`. The code relies on Node.js `path` parsing to derive the solution name and logs the generated paths before execution. The default Gulp task triggers the backup process.

Jan 14, 2018

Local Backup for Angular

This example demonstrates a Gulp-based backup workflow for local Angular projects. The code defines a `localbackup` task that copies all project files, excluding `node_modules`, into a timestamped destination folder using `gulp.src` and `gulp.dest`. It uses the `path` module to derive the current directory name and a custom `dateFormat` object to generate a version string from the current date and time. The backup folder is named by combining the solution name with this timestamp, targeting the Angular dependency directory path. The default Gulp task triggers the backup process.

Dec 22, 2017

ProjectName

This example presents a network graph rendered with D3’s force simulation, using three forces: `d3.forceLink` to maintain connections, `d3.forceManyBody` for charge-based repulsion, and `d3.forceCenter` to keep the layout centered. It also demonstrates a geographic map component that loads GeoJSON data (from a local `world.geojson` or a GitHub-hosted URL) and scales it to 75. The project includes two variants of the simulation code, one in JavaScript and one with TypeScript annotations, plus configuration files for a web application.

Dec 13, 2016